fix mobile reponsiveness

2026-04-16 20:09:41 -03:00
parent 1ae1456502
commit 1ed2ad06b8
6 changed files with 207 additions and 5 deletions
--- a/ctrl/Tiltfile
+++ b/ctrl/Tiltfile
@@ -5,8 +5,14 @@

 allow_k8s_contexts('kind-unt')

-# Create namespace first to avoid race conditions
-local('kubectl create namespace unt --dry-run=client -o yaml | kubectl apply -f -')
+# Hard guard: Tilt deploys to whatever the shell's current kubectl context is,
+# and allow_k8s_contexts auto-permits any local-looking (kind-*) cluster.
+# Fail early instead of silently landing the workload in the wrong cluster.
+if k8s_context() != 'kind-unt':
+    fail("Wrong kubectl context: '%s'. Run: kubectl config use-context kind-unt" % k8s_context())
+
+# Create namespace first to avoid race conditions (pin cluster explicitly)
+local('kubectl --context kind-unt create namespace unt --dry-run=client -o yaml | kubectl --context kind-unt apply -f -')

 # Apply k8s manifests via kustomize (dev overlay)
 k8s_yaml(kustomize('k8s/overlays/dev'))
@@ -42,7 +48,7 @@ docker_build(
 # --- Resources ---

 k8s_resource('api')
-k8s_resource('ui', resource_deps=['api'], port_forwards=['8040:80'])
+k8s_resource('ui', resource_deps=['api'])

 # Group infra resources
 k8s_resource(
--- a/docs/index.html
+++ b/docs/index.html
@@ -228,6 +228,55 @@
    vertical-align: top;
  }
  .cmp-table tr:last-child td { border-bottom: none; }
+
+  /* Mobile menu toggle — hidden on desktop */
+  .menu-toggle {
+    display: none;
+    background: transparent;
+    border: 1px solid #1e2a4a;
+    color: #e8eaf0;
+    padding: 6px 10px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 14px;
+    cursor: pointer;
+    line-height: 1;
+    margin-left: auto;
+  }
+  .menu-toggle:hover { background: #1a2340; }
+
+  .nav-backdrop {
+    display: none;
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 10;
+  }
+  .layout.nav-open .nav-backdrop { display: block; }
+
+  @media (max-width: 720px) {
+    header { padding: 10px 12px; gap: 8px; }
+    header h1 { font-size: 16px; letter-spacing: 1px; }
+    header .subtitle { display: none; }
+    .menu-toggle { display: inline-block; }
+
+    .layout { position: relative; }
+    nav {
+      position: absolute;
+      left: 0; top: 0; bottom: 0;
+      width: 220px;
+      z-index: 20;
+      transform: translateX(-100%);
+      transition: transform 0.2s ease;
+      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.5);
+    }
+    .layout.nav-open nav { transform: translateX(0); }
+
+    main { padding: 16px; }
+    .graph-section h2 { font-size: 13px; }
+    .prose p, .prose ul { font-size: 13px; }
+    .cmp-table { font-size: 12px; }
+    .cmp-table th, .cmp-table td { padding: 6px 8px; }
+  }
 </style>
 </head>
 <body>
@@ -235,9 +284,11 @@
 <header>
  <h1>STELLAR AIR</h1>
  <span class="subtitle">NOVA Operations Platform — Architecture</span>
+  <button class="menu-toggle" onclick="toggleNav()" aria-label="Toggle navigation">☰</button>
 </header>

 <div class="layout">
+<div class="nav-backdrop" onclick="toggleNav()"></div>

 <nav>
  <a class="active" onclick="show('walkthrough')">Walkthrough</a>
@@ -485,8 +536,13 @@ function show(id) {
  document.getElementById(id).classList.add('active');
  var navLink = document.querySelector('nav a[onclick="show(\'' + id + '\')"]');
  if (navLink) navLink.classList.add('active');
+  // auto-close the mobile drawer after selecting
+  document.querySelector('.layout').classList.remove('nav-open');
 }

+function toggleNav() {
+  document.querySelector('.layout').classList.toggle('nav-open');
+}
 </script>

 </body>
--- a/ui/app/src/App.vue
+++ b/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>
--- a/ui/app/src/components/ScenarioSelector.vue
+++ b/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>
--- a/ui/app/src/pages/OpsNotifications.vue
+++ b/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>
--- a/ui/framework/src/tokens.css
+++ b/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.