Complete map display page

src/lib/components/RouteRow.svelte

@@ -34,9 +34,11 @@
 </div>
 
 <style>
-    .row-container {
+.row-container {
         display: grid;
-        grid-template-columns: 80px 64px 1fr;
+        /* Balanced columns: 1fr on both sides keeps the 64px icon in the dead center */
+        grid-template-columns: 3.5rem 64px 1fr;
+        width: 100%;
         height: 64px;
         align-items: center;
         margin: 0;
@@ -50,7 +52,7 @@
         padding-right: 12px;
         font-family: 'Courier New', Courier, monospace;
         font-size: 0.85rem;
-        color: #54748b;
+        color: #64748b; /* Adjusted slightly for contrast */
     }
 
     .miles {
@@ -62,29 +64,70 @@
         font-size: 0.7rem;
     }
 
-    .icon-col {
+.icon-col {
         width: 64px;
         height: 64px;
-        overflow: visible;
-    }
-
-    .label-col {
-        padding-left: 16px;
+        /* Ensure the icon itself is centered if the SVG is smaller than 64px */
         display: flex;
-        flex-direction: column;
         justify-content: center;
+        align-items: center;
     }
 
+.label-col {
+    padding-left: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    
+    /* FIX: Allow children to manage their own wrapping */
+    overflow: hidden; 
+    /* min-width: 0 is critical for flex children to allow truncation */
+    min-width: 0; 
+}
+
+.feature-name {
+    font-weight: 700;
+    color: #1e293b;
+    font-size: 0.8rem;
+    text-transform: capitalize;
+    
+    /* Allow the title to wrap naturally onto multiple lines */
+    white-space: normal; 
+    line-height: 1.2;
+    margin-bottom: 2px;
+}
+
+.feature-desc {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    
+    /* Firefox Fix: Ensure white-space is normal here too */
+    white-space: normal; 
+    
+    line-height: 1.2rem;
+    max-height: 2.4rem;
+    font-size: 0.75rem;
+    color: #64748b;
+    word-break: break-word;
+}
+
+/* Tablet and Desktop scaling */
+@media (min-width: 480px) {
     .feature-name {
-        font-weight: 700;
-        color: #1e293b;
-        font-size: 1rem;
-        text-transform: capitalize;
+        font-size: 1rem; /* The larger title you requested */
+        margin-bottom: 4px;
     }
 
     .feature-desc {
-        font-size: 0.75rem;
-        color: #94a3b8;
-        font-style: italic;
+        font-size: 0.85rem; /* Slightly larger desc to match */
+        line-height: 1.3rem;
+        max-height: 2.6rem;
     }
+
+    .label-col {
+        padding-left: 24px; /* More "breathing room" on big screens */
+    }
+}
 </style>