From 263cd0a6d3bf5fee87be150de183705c641ef9ed Mon Sep 17 00:00:00 2001
From: SowinskiBraeden <braeden@sowinski.dev>
Date: Mon, 22 Jun 2026 20:51:19 -0700
Subject: [PATCH] mobile improvements

---
 static/css/style.css | 188 ++++++++++++++++++++++++++++++++++++++-----
 templates/base.html  |  38 ++++++++-
 2 files changed, 203 insertions(+), 23 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index c58c9b2..8719b34 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -2,9 +2,16 @@
    RESET + BASE
    ================================================================ */
 *, *::before, *::after { box-sizing: border-box; }
-html { color-scheme: dark; scroll-behavior: smooth; }
+html {
+  color-scheme: dark;
+  scroll-behavior: smooth;
+  width: 100%;
+  overflow-x: hidden;
+}
 body {
   margin: 0;
+  width: 100%;
+  min-width: 0;
   min-height: 100vh;
   font-family: var(--font-ui);
   font-size: 15px;
@@ -12,6 +19,7 @@ body {
   color: var(--text-body);
   background: var(--bg);
   -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
 }
 img, canvas, svg { display: block; max-width: 100%; }
 a { color: inherit; text-decoration: none; }
@@ -49,6 +57,7 @@ h1, h2, h3, h4 { margin: 0; }
   display: flex;
   align-items: center;
   gap: 28px;
+  min-width: 0;
 }
 .brand {
   display: flex;
@@ -82,6 +91,29 @@ h1, h2, h3, h4 { margin: 0; }
   white-space: nowrap;
 }
 .mainnav { display: flex; gap: 4px; }
+.nav-toggle {
+  display: none;
+  width: 42px;
+  height: 42px;
+  place-items: center;
+  gap: 4px;
+  padding: 0;
+  border: 1px solid var(--border-strong);
+  border-radius: 10px;
+  background: var(--field);
+  color: var(--text-2);
+}
+.nav-toggle span {
+  display: block;
+  width: 18px;
+  height: 2px;
+  border-radius: 2px;
+  background: currentColor;
+  transition: transform 160ms, opacity 160ms;
+}
+.nav-is-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
+.nav-is-open .nav-toggle span:nth-child(2) { opacity: 0; }
+.nav-is-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
 .navlink {
   font-size: 13.5px;
   font-weight: 600;
@@ -105,6 +137,7 @@ h1, h2, h3, h4 { margin: 0; }
 .page {
   margin: 0 auto;
   padding: clamp(22px,3.4vw,46px) var(--gutter) 96px;
+  min-width: 0;
 }
 .page--public  { max-width: var(--w-public);  }
 .page--session { max-width: var(--w-session); }
@@ -140,11 +173,15 @@ h1, h2, h3, h4 { margin: 0; }
 @media (max-width: 640px) {
   .site-footer {
     grid-template-columns: 1fr;
-    justify-items: start;
+    justify-items: center;
+    gap: 6px;
+    margin-top: 36px;
+    padding: 18px 0 max(20px, env(safe-area-inset-bottom));
+    text-align: center;
   }
   .site-footer span:nth-child(2),
   .site-footer span:nth-child(3) {
-    justify-self: start;
+    justify-self: center;
   }
 }
 
@@ -268,6 +305,7 @@ h3 {
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   overflow: hidden;
+  min-width: 0;
 }
 .panel__head {
   padding: 16px 22px;
@@ -1666,6 +1704,43 @@ select.control { cursor: pointer; }
   h1 { font-size: 28px; }
   .hero { padding: 18px 0 14px; }
   .topbar__season { display: none; }
+  .page {
+    padding: 18px 12px 72px;
+  }
+  .panel {
+    border-radius: 12px;
+  }
+  .panel__head {
+    padding: 14px 14px;
+  }
+  .panel__body,
+  .form-card,
+  .append__body,
+  .panel--pad {
+    padding: 16px 14px;
+  }
+  .chart-wrap {
+    padding: 0 10px 14px;
+  }
+  .chart-frame {
+    height: 230px;
+  }
+  .chart-frame--tall {
+    height: 260px;
+  }
+  .cards,
+  .cards-2,
+  .provisional-grid,
+  .recon-grid,
+  .append__grid {
+    grid-template-columns: 1fr;
+  }
+  .form-shell {
+    padding-top: 20px;
+  }
+  .form-shell.narrow {
+    grid-template-columns: minmax(0, 480px);
+  }
   .cash-strip { grid-template-columns: 1fr 1fr; }
   .debt-action-grid { grid-template-columns: 1fr; }
   .snapshot-grid { grid-template-columns: 1fr; }
@@ -1699,6 +1774,39 @@ select.control { cursor: pointer; }
   .leaderboard-hero-stats .stat:last-child {
     min-width: 0;
   }
+  .tbl-scroll,
+  .table-wrap {
+    width: 100%;
+    max-width: 100%;
+    overscroll-behavior-x: contain;
+  }
+  .tbl {
+    min-width: 620px;
+  }
+  .tbl--session,
+  .tbl--session.is-full {
+    min-width: 760px;
+  }
+  .feed,
+  .debt-list,
+  .admin-bottom-grid .table-wrap,
+  .admin-bottom-grid .event-feed {
+    max-height: none;
+    height: auto;
+  }
+  .csv__btns,
+  .append__footer,
+  .button-row,
+  .modal-card__actions {
+    align-items: stretch;
+  }
+  .csv__btns > *,
+  .append__footer > *,
+  .button-row > *,
+  .modal-card__actions > * {
+    flex: 1 1 auto;
+    justify-content: center;
+  }
 }
 
 @media (max-width: 440px) {
@@ -1706,32 +1814,68 @@ select.control { cursor: pointer; }
 }
 
 /* ================================================================
-   MOBILE — additional responsive rules (phones ≤ 600px)
+   MOBILE — additional responsive rules
    ================================================================ */
 
-/* Topbar: two-row layout on phones.
-   Row 1 → brand (fills remaining space) + admin actions.
-   Row 2 → nav links (horizontally scrollable so nothing clips). */
-@media (max-width: 600px) {
+/* Topbar: app-style single row with an anchored menu on phones. */
+@media (max-width: 700px) {
   .topbar__inner {
-    flex-wrap: wrap;
-    height: auto;
-    padding-top: 10px;
-    padding-bottom: 4px;
-    gap: 0 16px;
+    height: 58px;
+    padding-inline: 12px;
+    gap: 10px;
+  }
+  .brand {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .brand__name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .nav-toggle {
+    display: grid;
+    flex: none;
+    order: 20;
   }
-  .brand { flex: 1; }
   .topbar__spacer { display: none; }
   .mainnav {
-    order: 10;      /* pushes nav below brand + admin-actions */
-    width: 100%;
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    padding-bottom: 8px;
-    margin-top: 2px;
+    position: fixed;
+    top: calc(58px + env(safe-area-inset-top));
+    left: 10px;
+    right: 10px;
+    z-index: 60;
+    display: grid;
+    gap: 4px;
+    padding: 8px;
+    border: 1px solid var(--border-strong);
+    border-radius: 12px;
+    background: rgba(22, 22, 28, .98);
+    box-shadow: 0 18px 48px rgba(0,0,0,.42);
+    transform: translateY(-8px);
+    opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
+    transition: opacity 150ms, transform 150ms, visibility 150ms;
+    overflow: hidden;
+  }
+  .nav-is-open .mainnav {
+    transform: translateY(0);
+    opacity: 1;
+    pointer-events: auto;
+    visibility: visible;
+  }
+  .navlink {
+    display: flex;
+    align-items: center;
+    min-height: 44px;
+    padding: 11px 12px;
+    border-radius: 8px;
+    font-size: 14px;
+  }
+  .topbar__admin-actions .btn {
+    height: 38px;
+    padding-inline: 11px;
   }
-  .mainnav::-webkit-scrollbar { display: none; }
 }
 
 /* Toolbar: stack left/right sections vertically on narrow viewports */
diff --git a/templates/base.html b/templates/base.html
index d54121c..314cc60 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -16,7 +16,12 @@
                 <span class="brand__mark"></span>
                 <span class="brand__name">myboker.org</span>
             </a>
-            <nav class="mainnav">
+            <button class="nav-toggle" type="button" aria-controls="mainnav" aria-expanded="false" aria-label="Open navigation">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
+            <nav class="mainnav" id="mainnav">
                 <a class="navlink {{ 'is-active' if request.endpoint == 'public.leaderboard' }}" href="{{ url_for('public.leaderboard') }}">Leaderboard</a>
                 <a class="navlink {{ 'is-active' if request.endpoint in ('public.sessions', 'public.session_detail') }}" href="{{ url_for('public.sessions') }}">Sessions</a>
                 {% if is_admin %}
@@ -55,5 +60,36 @@
             <span>cedarline.digital</span>
         </footer>
     </main>
+    <script>
+    (() => {
+        const toggle = document.querySelector('.nav-toggle');
+        const nav = document.getElementById('mainnav');
+        if (!toggle || !nav) return;
+
+        const setOpen = (open) => {
+            document.body.classList.toggle('nav-is-open', open);
+            toggle.setAttribute('aria-expanded', String(open));
+            toggle.setAttribute('aria-label', open ? 'Close navigation' : 'Open navigation');
+        };
+
+        toggle.addEventListener('click', () => {
+            setOpen(!document.body.classList.contains('nav-is-open'));
+        });
+        nav.addEventListener('click', (event) => {
+            if (event.target.closest('a')) setOpen(false);
+        });
+        document.addEventListener('keydown', (event) => {
+            if (event.key === 'Escape') setOpen(false);
+        });
+        document.addEventListener('click', (event) => {
+            if (!document.body.classList.contains('nav-is-open')) return;
+            if (event.target.closest('.topbar')) return;
+            setOpen(false);
+        });
+        window.addEventListener('resize', () => {
+            if (window.matchMedia('(min-width: 701px)').matches) setOpen(false);
+        });
+    })();
+    </script>
 </body>
 </html>