fix mobile reponsiveness

ui/app/src/App.vue

@@ -72,7 +72,9 @@ provide('showInternals', showInternals)
 .app-header {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 24px;
+  row-gap: 8px;
   padding: 12px 24px;
   background: var(--surface-1);
   border-bottom: var(--panel-border);
@@ -130,4 +132,31 @@ provide('showInternals', showInternals)
   overflow: auto;
   padding: 24px;
 }
+
+@media (max-width: 720px) {
+  .app-header {
+    gap: 8px;
+    padding: 8px 12px;
+  }
+  .app-title h1 {
+    font-size: 15px;
+    letter-spacing: 1px;
+  }
+  .app-subtitle {
+    display: none;
+  }
+  .app-nav {
+    flex-wrap: wrap;
+    margin-left: 0;
+    width: 100%;
+    order: 2;
+  }
+  .app-nav a {
+    padding: 4px 10px;
+    font-size: 11px;
+  }
+  .app-main {
+    padding: 12px;
+  }
+}
 </style>

ui/app/src/components/ScenarioSelector.vue

@@ -67,4 +67,13 @@ select {
 select:focus {
   outline: 1px solid var(--accent);
 }
+
+@media (max-width: 720px) {
+  .scenario-selector {
+    gap: 4px;
+    margin-left: auto;
+  }
+  .scenario-selector label { display: none; }
+  .scenario-selector select { font-size: 11px; padding: 2px 6px; }
+}
 </style>

ui/app/src/pages/OpsNotifications.vue

@@ -96,9 +96,17 @@ onMounted(loadFlights)
 </script>
 
 <template>
-  <div :class="['ops-layout', { split: showOps && showInternals }]">
+  <div :class="['ops-layout', { split: showOps && showInternals, 'ops-collapsed': !showOps && showInternals }]">
     <!-- Ops pane (left) -->
-    <div v-show="showOps" class="ops-pane">
+    <div class="ops-pane" :class="{ collapsed: !showOps && showInternals, solo: !showInternals }">
+      <div v-if="showInternals" class="pane-controls">
+        <button
+          class="ops-collapse-btn"
+          @click="showOps = false"
+          aria-label="Collapse ops pane"
+          title="Collapse"
+        >‹</button>
+      </div>
       <Panel title="FCE — Behind Every Departure" :status="fceStatus">
         <template #actions>
           <select v-model="selectedFlight" class="flight-select">
@@ -125,6 +133,15 @@ onMounted(loadFlights)
       </Panel>
     </div>
 
+    <!-- Show-ops tab when ops is collapsed -->
+    <button
+      v-if="!showOps && showInternals"
+      class="ops-expand-tab"
+      @click="showOps = true"
+      aria-label="Show ops pane"
+      title="Show ops"
+    >›</button>
+
     <!-- Internals pane (right) -->
     <div v-show="showInternals" class="internals-pane">
       <Panel title="Agent Graph" :status="agentStatus">
@@ -172,8 +189,60 @@ onMounted(loadFlights)
   overflow: auto;
   height: 100%;
   min-width: 0;
+  transition: flex-grow 0.25s ease, max-width 0.25s ease, max-height 0.25s ease,
+              padding 0.25s ease, opacity 0.2s ease, transform 0.25s ease;
+  position: relative;
 }
 
+/* Collapsed state: slides off to the left, yields its flex space to internals. */
+.ops-layout.ops-collapsed > .ops-pane.collapsed {
+  flex: 0 0 0;
+  max-width: 0;
+  opacity: 0;
+  transform: translateX(-100%);
+  padding: 0;
+  overflow: hidden;
+}
+
+.pane-controls {
+  display: flex;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  margin-bottom: -16px; /* absorb into gap so it doesn't add visual height */
+}
+
+.ops-collapse-btn {
+  background: var(--surface-2);
+  color: var(--text-secondary);
+  border: var(--panel-border);
+  width: 22px;
+  height: 22px;
+  font-family: var(--font-mono);
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+}
+.ops-collapse-btn:hover { color: var(--text-primary); background: var(--surface-3); }
+
+.ops-expand-tab {
+  position: absolute;
+  top: 4px;
+  left: 0;
+  z-index: 3;
+  background: var(--surface-2);
+  color: var(--text-secondary);
+  border: var(--panel-border);
+  width: 22px;
+  height: 48px;
+  font-family: var(--font-mono);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+}
+.ops-expand-tab:hover { color: var(--accent); background: var(--surface-3); }
+
 .internals-pane {
   display: flex;
   flex-direction: column;
@@ -282,4 +351,34 @@ onMounted(loadFlights)
   font-family: var(--font-mono);
   font-size: 12px;
 }
+
+@media (max-width: 720px) {
+  .ops-layout {
+    flex-direction: column;
+    height: calc(100vh - 130px); /* topbar wraps to ~2 rows on mobile */
+    gap: 12px;
+  }
+  .ops-layout.split > .internals-pane {
+    border-left: none;
+    padding-left: 0;
+    border-top: var(--panel-border);
+    padding-top: 12px;
+  }
+  .ops-pane { gap: 12px; }
+
+  /* Collapse shrinks vertical space in a column flex, still slides horizontally. */
+  .ops-layout.ops-collapsed > .ops-pane.collapsed {
+    max-width: none;
+    max-height: 0;
+    padding: 0;
+  }
+
+  .ops-expand-tab {
+    /* On mobile keep the tab at top-left of the stacked layout */
+    height: 32px;
+  }
+
+  .flight-select { font-size: 11px; padding: 4px 6px; max-width: 60%; }
+  .run-btn { font-size: 11px; padding: 4px 10px; }
+}
 </style>

ui/framework/src/tokens.css

@@ -42,6 +42,9 @@
   --panel-radius: 6px;
   --panel-border: 1px solid var(--border);
   --panel-header-height: 36px;
+
+  /* breakpoints — documentation anchor; write @media (max-width: 720px) directly */
+  --bp-mobile: 720px;
 }
 
 /* Animated gradient outline for buttons in a waiting state.