From a98de7388ee119586d43df0f46decc3ee8283fc0 Mon Sep 17 00:00:00 2001
From: Smittix <jamessmith1@outlook.com>
Date: Tue, 13 Jan 2026 23:03:30 +0000
Subject: [PATCH] Move ACARS panel to left of map in adsb/dashboard

- Reorder HTML: ACARS sidebar now comes before main-display
- Update grid: auto 1fr 300px (ACARS, Map, Sidebar)
- Swap borders: right border on sidebar, left border on button
- Button now on right side of ACARS panel (bordering map)
- Icon changed to left arrow (collapse direction)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 static/css/adsb_dashboard.css |  8 ++++----
 templates/adsb_dashboard.html | 30 +++++++++++++++---------------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/static/css/adsb_dashboard.css b/static/css/adsb_dashboard.css
index 931ace3..4a72447 100644
--- a/static/css/adsb_dashboard.css
+++ b/static/css/adsb_dashboard.css
@@ -185,17 +185,17 @@ body {
     position: relative;
     z-index: 10;
     display: grid;
-    grid-template-columns: 1fr auto 300px;
+    grid-template-columns: auto 1fr 300px;
     grid-template-rows: 1fr auto;
     gap: 0;
     height: calc(100vh - 60px);
     min-height: 500px;
 }
 
-/* ACARS sidebar (between map and main sidebar) - Collapsible */
+/* ACARS sidebar (left of map) - Collapsible */
 .acars-sidebar {
     background: var(--bg-panel);
-    border-left: 1px solid var(--border-color);
+    border-right: 1px solid var(--border-color);
     display: flex;
     flex-direction: row;
 }
@@ -205,7 +205,7 @@ body {
     min-width: 28px;
     background: var(--bg-card);
     border: none;
-    border-right: 1px solid var(--border-color);
+    border-left: 1px solid var(--border-color);
     color: var(--accent-cyan);
     cursor: pointer;
     display: flex;
diff --git a/templates/adsb_dashboard.html b/templates/adsb_dashboard.html
index 42902bb..bd96590 100644
--- a/templates/adsb_dashboard.html
+++ b/templates/adsb_dashboard.html
@@ -43,22 +43,8 @@
     </header>
 
     <main class="dashboard">
-        <!-- Main Display (Map or Radar Scope) -->
-        <div class="main-display">
-            <div class="display-container">
-                <div id="radarMap"></div>
-                <div id="radarScope">
-                    <canvas id="radarCanvas"></canvas>
-                </div>
-            </div>
-        </div>
-
-        <!-- ACARS Panel (right of map) - Collapsible -->
+        <!-- ACARS Panel (left of map) - Collapsible -->
         <div class="acars-sidebar" id="acarsSidebar">
-            <button class="acars-collapse-btn" id="acarsCollapseBtn" onclick="toggleAcarsSidebar()" title="Toggle ACARS Panel">
-                <span id="acarsCollapseIcon">▶</span>
-                <span class="acars-collapse-label">ACARS</span>
-            </button>
             <div class="acars-sidebar-content" id="acarsSidebarContent">
                 <div class="panel acars-panel">
                     <div class="panel-header">
@@ -97,6 +83,20 @@
                     </div>
                 </div>
             </div>
+            <button class="acars-collapse-btn" id="acarsCollapseBtn" onclick="toggleAcarsSidebar()" title="Toggle ACARS Panel">
+                <span id="acarsCollapseIcon">◀</span>
+                <span class="acars-collapse-label">ACARS</span>
+            </button>
+        </div>
+
+        <!-- Main Display (Map or Radar Scope) -->
+        <div class="main-display">
+            <div class="display-container">
+                <div id="radarMap"></div>
+                <div id="radarScope">
+                    <canvas id="radarCanvas"></canvas>
+                </div>
+            </div>
         </div>
 
         <!-- Sidebar -->