From 430cb24ef013b8b066abaf52132fe61bc7bbd692 Mon Sep 17 00:00:00 2001
From: Bernt <bernt@aamos.systems>
Date: Thu, 2 Jul 2026 17:38:31 +0000
Subject: [PATCH] Mobile optimization: Compact header and navigation

- Responsive font sizes with clamp()
- Shorter navigation labels (Explorer, Upload, Console, Health, Pilot, Ready)
- Developer Mode -> Dev
- Flex wrap for mobile screens
- Smaller padding and gaps

Tested on pilot.landvex.com
---
 packages/ui/src/App.tsx | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index fc26edc85..c3715e319 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -14,33 +14,34 @@ function App() {
   return (
     <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: 1200, margin: '0 auto', padding: 20 }}>
       <header style={{ borderBottom: '2px solid #333', paddingBottom: 20, marginBottom: 20 }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <h1>LandveX {developerMode ? '(Developer Mode)' : ''}</h1>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap' }}>
+          <h1 style={{ fontSize: 'clamp(1.2rem, 5vw, 2rem)', margin: 0 }}>LandveX {developerMode ? '(Dev)' : ''}</h1>
           <button
             onClick={() => setDeveloperMode(!developerMode)}
             style={{
-              padding: '8px 16px',
+              padding: '6px 12px',
               background: developerMode ? '#ffd700' : '#f0f0f0',
               border: '1px solid #ccc',
               borderRadius: 4,
               cursor: 'pointer',
+              fontSize: '0.8rem',
             }}
           >
-            {developerMode ? '🔓 Developer' : '🔒 Normal'}
+            {developerMode ? '🔓 Dev' : '🔒 Normal'}
           </button>
         </div>
-        <nav style={{ display: 'flex', gap: 20, marginTop: 10 }}>
-          <Link to="/">Dataset Explorer</Link>
-          <Link to="/upload">Mission Upload</Link>
-          <Link to="/console">Field Console</Link>
+        <nav style={{ display: 'flex', gap: 10, marginTop: 10, flexWrap: 'wrap', fontSize: '0.85rem' }}>
+          <Link to="/">Explorer</Link>
+          <Link to="/upload">Upload</Link>
+          <Link to="/console">Console</Link>
           <Link to="/health">Health</Link>
-          <Link to="/pilot">Pilot 001</Link>
-          <Link to="/readiness">Readiness</Link>
+          <Link to="/pilot">Pilot</Link>
+          <Link to="/readiness">Ready</Link>
           {developerMode && (
             <>
-              <Link to="/datasets">Datasets</Link>
+              <Link to="/datasets">Data</Link>
               <Link to="/models">Models</Link>
-              <Link to="/training">Training</Link>
+              <Link to="/training">Train</Link>
             </>
           )}
         </nav>