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;