From 74492142a14a15b1d1eb810634b164119f67d051 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 22:04:05 -0500
Subject: [PATCH] Update App.jsx with mobile-responsive navigation and layout

---
 client/src/App.jsx | 105 +++++++++++++++++++++++++++++++++++++++------
 1 file changed, 93 insertions(+), 12 deletions(-)

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 0055663..2b02499 100755
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -3,6 +3,7 @@ import ViolationForm from './components/ViolationForm';
 import Dashboard     from './components/Dashboard';
 import ReadmeModal   from './components/ReadmeModal';
 import ToastProvider from './components/ToastProvider';
+import './styles/mobile.css';
 
 const REPO_URL     = 'https://git.alwisp.com/jason/cpas';
 const PROJECT_START = new Date('2026-03-06T11:33:32-06:00');
@@ -56,8 +57,19 @@ function AppFooter({ version }) {
           0%, 100% { opacity: 1; transform: scale(1); }
           50%       { opacity: 0.4; transform: scale(0.75); }
         }
+
+        /* Mobile-specific footer adjustments */
+        @media (max-width: 768px) {
+          .footer-content {
+            flex-wrap: wrap;
+            justify-content: center;
+            font-size: 10px;
+            padding: 10px 16px;
+            gap: 8px;
+          }
+        }
       `}</style>
-      <footer style={sf.footer}>
+      <footer style={sf.footer} className="footer-content">
         <span style={sf.copy}>&copy; {year} Jason Stedwell</span>
         <span style={sf.sep}>&middot;</span>
         <DevTicker />
@@ -89,6 +101,19 @@ const tabs = [
   { id: 'violation', label: '+ New Violation' },
 ];
 
+// Responsive utility hook
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) setMatches(media.matches);
+    const listener = () => setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [matches, query]);
+  return matches;
+}
+
 const s = {
   app:      { minHeight: '100vh', background: '#050608', fontFamily: "'Segoe UI', Arial, sans-serif", color: '#f8f9fa', display: 'flex', flexDirection: 'column' },
   nav:      { background: '#000000', padding: '0 40px', display: 'flex', alignItems: 'center', gap: 0, borderBottom: '1px solid #333' },
@@ -121,6 +146,58 @@ const s = {
   card: { maxWidth: '1100px', margin: '30px auto', background: '#111217', borderRadius: '10px', boxShadow: '0 2px 16px rgba(0,0,0,0.6)', border: '1px solid #222' },
 };
 
+// Mobile-responsive style overrides
+const mobileStyles = `
+  @media (max-width: 768px) {
+    .app-nav {
+      padding: 0 16px !important;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+    .logo-wrap {
+      margin-right: 0 !important;
+      padding: 12px 0 !important;
+      width: 100%;
+      justify-content: center;
+      border-bottom: 1px solid #1a1b22;
+    }
+    .nav-tabs {
+      display: flex;
+      width: 100%;
+      justify-content: space-around;
+    }
+    .nav-tab {
+      flex: 1;
+      text-align: center;
+      padding: 14px 8px !important;
+      font-size: 13px !important;
+    }
+    .docs-btn {
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      padding: 4px 10px !important;
+      font-size: 11px !important;
+    }
+    .docs-btn span:first-child {
+      display: none;
+    }
+    .main-card {
+      margin: 12px !important;
+      border-radius: 8px !important;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .logo-text {
+      font-size: 16px !important;
+    }
+    .logo-img {
+      height: 24px !important;
+    }
+  }
+`;
+
 const sf = {
   footer: {
     borderTop: '1px solid #1a1b22',
@@ -149,6 +226,7 @@ export default function App() {
   const [tab,        setTab]        = useState('dashboard');
   const [showReadme, setShowReadme] = useState(false);
   const [version,    setVersion]    = useState(null);
+  const isMobile = useMediaQuery('(max-width: 768px)');
 
   useEffect(() => {
     fetch('/version.json')
@@ -159,26 +237,29 @@ export default function App() {
 
   return (
     <ToastProvider>
+      <style>{mobileStyles}</style>
       <div style={s.app}>
-        <nav style={s.nav}>
-          <div style={s.logoWrap}>
-            <img src="/static/mpm-logo.png" alt="MPM" style={s.logoImg} />
-            <div style={s.logoText}>CPAS Tracker</div>
+        <nav style={s.nav} className="app-nav">
+          <div style={s.logoWrap} className="logo-wrap">
+            <img src="/static/mpm-logo.png" alt="MPM" style={s.logoImg} className="logo-img" />
+            <div style={s.logoText} className="logo-text">CPAS Tracker</div>
           </div>
 
-          {tabs.map(t => (
-            <button key={t.id} style={s.tab(tab === t.id)} onClick={() => setTab(t.id)}>
-              {t.label}
-            </button>
-          ))}
+          <div className="nav-tabs">
+            {tabs.map(t => (
+              <button key={t.id} style={s.tab(tab === t.id)} className="nav-tab" onClick={() => setTab(t.id)}>
+                {isMobile ? t.label.replace('📊 ', '📊 ').replace('+ New ', '+ ') : t.label}
+              </button>
+            ))}
+          </div>
 
-          <button style={s.docsBtn} onClick={() => setShowReadme(true)} title="Open admin documentation">
+          <button style={s.docsBtn} className="docs-btn" onClick={() => setShowReadme(true)} title="Open admin documentation">
             <span>?</span> Docs
           </button>
         </nav>
 
         <div style={s.main}>
-          <div style={s.card}>
+          <div style={s.card} className="main-card">
             {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
           </div>
         </div>