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>

src/lib/components/mapIcons/Bridge.svelte

@@ -19,7 +19,7 @@
         pipeline:   { color: '#334155', stroke: '#1e293b', width: 4, text: '#334155'},
     }
 
-    $: s = bridgeStyles[feature.category] || styles.minorRoad;
+    $: s = bridgeStyles[feature.category] || bridgeStyles.minorRoad;
     $: isOver = feature.position === 'over';
 
     $: topY = 32 - (s.width / 2);
@@ -36,9 +36,9 @@
     <path d={bodyPath} fill={s.color} />
     <path d={`M 0 ${topY} L 64 ${topY}`} stroke={s.stroke} stroke-width="2" />
     <path d={`M 0 ${bottomY} L 64 ${bottomY}`} stroke={s.stroke} stroke-width="2" />
-    <BaseTrack elec={activeElec} height={64} />
+    <BaseTrack {activeElec} height={64} />
   {:else}
-    <BaseTrack elec={activeElec} height={64} />
+    <BaseTrack {activeElec} height={64} />
     
     <path d={bodyPath} fill="white" /> <path d={bodyPath} fill={s.color} />
     

src/lib/components/mapIcons/Crossover.svelte

@@ -14,5 +14,5 @@
         <line x1="16" y1="52" x2="48" y2="20" />
     </g>
 
-    <BaseTrack elec={activeElec} height={64} />
+    <BaseTrack {activeElec} height={64} />
 </svg>

src/lib/components/mapIcons/Junction.svelte

@@ -16,8 +16,8 @@
     $: isRight = feature.diverges === 'right';
 
     $: yStart = visualUp ? 64 : 0;
-    $: yEnd = visualUp ? 0 : 64;
-    $: xEnd = isRight ? 64 : 0;
+    $: yEnd = visualUp ? 8 : 56;
+    $: xEnd = isRight ? 56 : 8;
 
     $: branchColour = getElecColour(feature.elecBranch || activeElec);
     $: branchPath = `M 32 ${yStart} Q 32 32 ${xEnd} ${yEnd}`;

src/lib/components/mapIcons/Loop.svelte

@@ -3,7 +3,7 @@
     import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
 
     export let feature: {
-        side: 'left' | 'right' | 'both';
+        position: 'left' | 'right' | 'both';
         elecLoop?: string;
     };
 
@@ -12,17 +12,22 @@
 
     $: loopColour = getElecColour(feature.elecLoop || activeElec);
 
+    $: effectivePosition = (() => {
+        if (!reversed || feature.position === 'both') return feature.position;
+        return feature.position === 'left' ? 'right' : 'left';
+    })();
+
     const leftPath = `M 32 0 Q 8 32 32 64`;
     const rightPath = `M 32 0 Q 56 32 32 64`;
 </script>
 
 <svg viewBox="0 0 64 64" width="64" height="64" class="loops">
     <g fill="none" stroke={loopColour} stroke-width="4" stroke-linecap="round">
-        {#if feature.side === 'left' || feature.side === 'both'}
+        {#if effectivePosition === 'left' || feature.position === 'both'}
             <path d={leftPath} />
         {/if}
         
-        {#if feature.side === 'right' || feature.side === 'both'}
+        {#if effectivePosition === 'right' || feature.position === 'both'}
             <path d={rightPath} />
         {/if}
     </g>

src/lib/components/mapIcons/SiteOf.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import BaseTrack from '$lib/components/mapIcons/BaseTrack.svelte';
+
+    export let activeElec: string;
+    export let feature: any;
+    export let reversed: boolean;
+</script>
+
+<svg viewBox="0 0 64 64" width="64" height="64" class="loops">
+    <BaseTrack {activeElec} height={64} />
+</svg>

src/lib/mapRegistry.ts

@@ -7,17 +7,20 @@ import Crossing from '$lib/components/mapIcons/Crossing.svelte';
 import Loop from '$lib/components/mapIcons/Loop.svelte';
 import SignallerChange from '$lib/components/mapIcons/SignallerChange.svelte';
 import ElectrificationChange from '$lib/components/mapIcons/ElectrificationChange.svelte';
+import SiteOf from '$lib/components/mapIcons/SiteOf.svelte';
 
 
 export const components = {
     station: Station,
     junction: Junction,
-    crossovers: BaseTrack,
-    siteof: BaseTrack,
+    crossovers: Crossover,
+    siteof: SiteOf,
     bridge: Bridge,
     crossover: Crossover,
     crossing: Crossing,
     loop: Loop,
+    loops: Loop,
     signallerChange: SignallerChange,
     electrificationChange: ElectrificationChange,
+    default: BaseTrack,
 }