From b5611d8e2fa03e4269c534f7da7b298d90dd090e Mon Sep 17 00:00:00 2001
From: Jacob Dahl <dahl.jakejacob@gmail.com>
Date: Fri, 26 Jun 2026 18:10:13 -0600
Subject: [PATCH] fix(frontend): scope full-width layout to the Video route

962f4f8 fixed the Video page by setting width:100% on #app, but since
#app is a shrink-wrapping flex item that pinned every route to the full
viewport, so each data page's `margin: 0 auto` centered its capped
content in a full-width column instead of sitting at its natural width
beside the sidebar.

Toggle a `fill-viewport` class on #app for the Video route only, and
restore the `min-width: 800px` the commit dropped from the Autopilot and
Connections containers. Non-Video routes now render identically to before
the commit; the Video route still gets the full-width frame.
---
 frontend/src/App.vue                   | 17 +++++++++++------
 frontend/src/pages/AutopilotPage.vue   |  1 +
 frontend/src/pages/ConnectionsPage.vue |  1 +
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 46de08c..1e11571 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" :class="{ 'fill-viewport': isActive('/video-page') }">
     <div class="sidebar" ref="sidebar">
       <img src="@/assets/logo.png" alt="Logo" class="logo">
       <router-link class="link" :class="{ active: isActive('/') }" to="/">System</router-link>
@@ -94,16 +94,21 @@ html, body {
 
 #app {
   display: flex;
-  /* Pin to the viewport width. Without this the flex container shrink-wraps to its
-     content, which collapses any page whose content has no intrinsic width — the Video
-     page (the video is position:absolute, so the frame's only in-flow sibling is the
-     short "Video" title) renders as a thin strip the width of that title. */
-  width: 100%;
   font-family: 'Roboto', sans-serif;
   color: var(--ark-color-black); /* Should be your black color */
   background-color: var(--ark-color-white); /* Your specified white color */
 }
 
+/* The app root is a shrink-wrapping flex item, so each page sizes #app to its own
+   content — data pages keep their natural width and stay left-aligned beside the sidebar.
+   The Video page has no intrinsic width (the video is position:absolute, leaving only the
+   short "Video" title in flow), so it would collapse to a thin strip. Pin #app to the
+   viewport on the Video route only, so the frame fills the area without also stretching
+   and centering the data pages in a full-width column. */
+#app.fill-viewport {
+  width: 100%;
+}
+
 .sidebar {
   position: fixed;
   height: 100vh; /* Full height */
diff --git a/frontend/src/pages/AutopilotPage.vue b/frontend/src/pages/AutopilotPage.vue
index 5c3e226..d745e6b 100644
--- a/frontend/src/pages/AutopilotPage.vue
+++ b/frontend/src/pages/AutopilotPage.vue
@@ -680,6 +680,7 @@ export default {
   align-items: center;
   width: 100%;
   max-width: 1200px;
+  min-width: 800px;
   margin: 0 auto;
   padding: 20px;
   gap: 20px;
diff --git a/frontend/src/pages/ConnectionsPage.vue b/frontend/src/pages/ConnectionsPage.vue
index 9fba4d8..1650a0e 100644
--- a/frontend/src/pages/ConnectionsPage.vue
+++ b/frontend/src/pages/ConnectionsPage.vue
@@ -1333,6 +1333,7 @@ export default {
   align-items: center;
   width: 100%;
   max-width: 1200px;
+  min-width: 800px;
   margin: 0 auto;
   padding: 20px;
   gap: 20px;