hosting page css adjustments

app/static/styles.css

@@ -821,7 +821,7 @@ textarea {
 }
 
 .host-listings-grid {
-  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
 }
 
 .host-card {
@@ -829,24 +829,38 @@ textarea {
   grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
   gap: 20px;
   align-items: start;
+  min-width: 0;
 }
 
 .host-card-media {
   display: block;
+  min-width: 0;
 }
 
 .host-card-heading {
+  flex-wrap: wrap;
+  align-items: flex-start;
   margin-bottom: 0;
+  min-width: 0;
+}
+
+.host-card-heading > div,
+.host-card-body,
+.host-card-sections,
+.host-subpanel {
+  min-width: 0;
 }
 
 .host-card-heading h2 {
   margin-bottom: 6px;
+  overflow-wrap: anywhere;
 }
 
 .host-metric-row {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   gap: 12px;
+  min-width: 0;
 }
 
 .host-metric,
@@ -861,6 +875,7 @@ textarea {
   display: grid;
   gap: 4px;
   padding: 14px 16px;
+  min-width: 0;
 }
 
 .host-metric strong {