From bf8fa3ca5f9123609872df7ef0e182dd94d32016 Mon Sep 17 00:00:00 2001
From: Ben Miller <benjimanmiller@gmail.com>
Date: Mon, 1 Jun 2026 23:02:39 -0500
Subject: [PATCH] large css update

---
 GEMINI.md                     | 10 ----------
 static/about.html             |  3 ++-
 static/assets/css/admin.css   |  4 ++++
 static/assets/css/auth.css    | 13 ++++++++++--
 static/assets/css/base.css    |  4 ++++
 static/assets/css/modals.css  | 16 +++++++++++++++
 static/assets/css/navbar.css  | 37 +++++++++++++++++++++++++++++++++--
 static/assets/css/sidebar.css | 25 +++++++++++++++++++----
 static/assets/js/nav.js       | 11 +++++++++++
 static/contact.html           |  3 ++-
 static/index.html             |  3 ++-
 static/login.html             |  3 ++-
 static/register.html          |  3 ++-
 13 files changed, 112 insertions(+), 23 deletions(-)

diff --git a/GEMINI.md b/GEMINI.md
index 4e53793..e69de29 100644
--- a/GEMINI.md
+++ b/GEMINI.md
@@ -1,10 +0,0 @@
-# SpotNotes Future Implementation & Refactoring Plan
-## 1. Feature: Mobile UX & Responsive Overhaul
-- **Status:** **[To Do]**
-- **Action Plan:**
-  - **Audit & Consistency:** Review every application state (Login, Register, Admin Dashboard, Map View) to ensure visual parity with the desktop experience while optimizing for vertical screen constraints.
-  - **Compact Layout & Spacing:** Re-evaluate the spacing and layering of icons, buttons, and UI elements. Aim for a "small and tight" aesthetic that maximizes map visibility without cramping everything into an unreadable jumble.
-  - **Sidebar to Bottom-Sheet:** On mobile devices, explore transitioning the right-side drawer into a "Bottom-Sheet" component (sliding up from the bottom) to provide a more ergonomic, thumb-reachable interface for note lists.
-  - **Enhanced Touch Targets:** Standardize all interactive elements (buttons, icons, notepad list items) to a minimum 44x44px touch target to prevent accidental clicks and improve accessibility.
-  - **Responsive Modals:** Refactor modal windows to occupy 100% of the viewport height/width on small screens, ensuring that form inputs and the "Add Note" textarea remain fully visible above the virtual keyboard.
-  - **Mobile Navigation:** Consolidate the desktop navbar into a streamlined mobile header, utilizing a hamburger menu or action bar to keep the search functionality and account links accessible but unobtrusive.
diff --git a/static/about.html b/static/about.html
index 7863678..6dc32cf 100644
--- a/static/about.html
+++ b/static/about.html
@@ -15,7 +15,8 @@
             <a href="/" class="brand">
             <img src="/assets/images/spotnotes.png" alt="SpotNotes.app" style="height: 44px;">
             </a>
-            <div class="nav-links">
+            <button class="nav-toggle" id="nav-toggle" aria-label="Toggle Navigation">☰</button>
+            <div class="nav-links" id="nav-links">
             <a href="/login.html" id="link-login">Login</a>
             <a href="/about.html">About</a>
             <a href="/contact.html">Contact</a>
diff --git a/static/assets/css/admin.css b/static/assets/css/admin.css
index 122f50c..7ad3616 100644
--- a/static/assets/css/admin.css
+++ b/static/assets/css/admin.css
@@ -7,6 +7,10 @@
     margin: 5px;
     border-radius: 4px;
     cursor: pointer;
+    min-height: 44px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .admin-button:hover {
diff --git a/static/assets/css/auth.css b/static/assets/css/auth.css
index 645356d..e41b6f3 100644
--- a/static/assets/css/auth.css
+++ b/static/assets/css/auth.css
@@ -27,11 +27,20 @@
     border: 1px solid #ddd;
     border-radius: 4px;
     font-size: 16px; /* Mobile friendly */
+    min-height: 44px;
 }
 
 .links { margin-top: 1rem; text-align: center; font-size: 0.9rem; }
-.links a { color: #007bff; text-decoration: none; }
+.links a { color: #007bff; text-decoration: none; display: inline-block; padding: 10px; min-height: 44px; }
 .links a:hover { text-decoration: underline; }
 
 /* Ensure buttons on content pages are white */
-.content-container .btn { color: white; }
\ No newline at end of file
+.content-container .btn { color: white; }
+
+@media (max-width: 600px) {
+    .auth-container, .content-container {
+        padding: 1.5rem;
+        margin: 10px;
+        width: calc(100% - 20px);
+    }
+}
\ No newline at end of file
diff --git a/static/assets/css/base.css b/static/assets/css/base.css
index ec290c0..d1ed1ba 100644
--- a/static/assets/css/base.css
+++ b/static/assets/css/base.css
@@ -31,6 +31,10 @@ body.page-body {
     cursor: pointer;
     font-size: 1rem;
     transition: opacity 0.2s;
+    min-height: 44px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 .btn:hover { opacity: 0.9; }
 .btn-primary { background: #007bff; }
diff --git a/static/assets/css/modals.css b/static/assets/css/modals.css
index 4910623..7a6a98a 100644
--- a/static/assets/css/modals.css
+++ b/static/assets/css/modals.css
@@ -20,6 +20,22 @@
     max-width: 400px;
     position: relative;
     box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+    max-height: 90vh;
+    overflow-y: auto;
+}
+
+@media (max-width: 600px) {
+    .modal {
+        align-items: flex-end; /* Align to bottom for better mobile reach or use full height */
+    }
+    .modal-content {
+        width: 100%;
+        height: 100%;
+        max-width: none;
+        max-height: 100%;
+        border-radius: 0;
+        padding: 20px;
+    }
 }
 
 .close-modal {
diff --git a/static/assets/css/navbar.css b/static/assets/css/navbar.css
index 721ea02..d39abe0 100644
--- a/static/assets/css/navbar.css
+++ b/static/assets/css/navbar.css
@@ -58,6 +58,7 @@
     border-radius: 4px 0 0 4px;
     outline: none;
     font-size: 16px; /* Prevents zoom on iOS */
+    min-height: 44px;
 }
 .nav-search button {
     padding: 5px 12px;
@@ -66,9 +67,20 @@
     background: #f8f9fa;
     border-radius: 0 4px 4px 0;
     cursor: pointer;
+    min-height: 44px;
 }
 .nav-search button:hover { background: #e2e6ea; }
 
+.nav-toggle {
+    display: none;
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    color: #333;
+    padding: 5px;
+}
+
 /* Mobile Navbar */
 @media (max-width: 600px) {
     .navbar {
@@ -81,10 +93,31 @@
         flex: 1;
         order: 1;
     }
-    .nav-links {
-        flex: initial;
+    .nav-toggle {
+        display: block;
         order: 2;
     }
+    .nav-links {
+        display: none;
+        flex-basis: 100%;
+        order: 4;
+        flex-direction: column;
+        align-items: stretch;
+        background: #fff;
+        padding: 10px 0;
+    }
+    .nav-links.active {
+        display: flex;
+    }
+    .nav-links a {
+        padding: 10px 15px;
+        width: 100%;
+        text-align: left;
+        border-bottom: 1px solid #eee;
+    }
+    .nav-links a:last-child {
+        border-bottom: none;
+    }
     .nav-search {
         flex: 1 1 100%;
         order: 3;
diff --git a/static/assets/css/sidebar.css b/static/assets/css/sidebar.css
index 96f8463..051e784 100644
--- a/static/assets/css/sidebar.css
+++ b/static/assets/css/sidebar.css
@@ -157,11 +157,28 @@
 /* Mobile Sidebar */
 @media (max-width: 600px) {
     .sidebar {
-        width: 85%;
-        max-width: 350px;
-        top: 110px; /* Adjust for taller mobile navbar */
+        width: 100%;
+        max-width: none;
+        top: auto;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 60vh;
+        border-radius: 20px 20px 0 0;
+        box-shadow: 0 -4px 15px rgba(0,0,0,0.15);
+        transform: translateY(0);
+        transition: transform 0.3s ease-in-out;
     }
     .sidebar.collapsed {
-        transform: translateX(100%);
+        transform: translateY(100%);
+    }
+    .sidebar-toggle {
+        left: 50%;
+        top: -30px;
+        transform: translateX(-50%) rotate(90deg);
+        width: 60px;
+        height: 30px;
+        border-radius: 5px 0 0 5px;
+        box-shadow: -2px 0 5px rgba(0,0,0,0.1);
     }
 }
\ No newline at end of file
diff --git a/static/assets/js/nav.js b/static/assets/js/nav.js
index 8484dce..f40208c 100644
--- a/static/assets/js/nav.js
+++ b/static/assets/js/nav.js
@@ -1,8 +1,19 @@
 document.addEventListener('DOMContentLoaded', () => {
     checkAuthStatus();
     initLogoutListener();
+    initNavToggle();
 });
 
+function initNavToggle() {
+    const navToggle = document.getElementById('nav-toggle');
+    const navLinks = document.getElementById('nav-links');
+    if (navToggle && navLinks) {
+        navToggle.addEventListener('click', () => {
+            navLinks.classList.toggle('active');
+        });
+    }
+}
+
 async function checkAuthStatus() {
     try {
         const res = await fetch('/auth/me');
diff --git a/static/contact.html b/static/contact.html
index 6d58802..480ea8b 100644
--- a/static/contact.html
+++ b/static/contact.html
@@ -14,7 +14,8 @@
             <a href="/" class="brand">
             <img src="/assets/images/spotnotes.png" alt="SpotNotes.app" style="height: 44px;">
             </a>
-            <div class="nav-links">
+            <button class="nav-toggle" id="nav-toggle" aria-label="Toggle Navigation">☰</button>
+            <div class="nav-links" id="nav-links">
             <a href="/login.html" id="link-login">Login</a>
             <a href="/about.html">About</a>
             <a href="/contact.html">Contact</a>
diff --git a/static/index.html b/static/index.html
index 80a1139..9be3d5e 100644
--- a/static/index.html
+++ b/static/index.html
@@ -27,13 +27,14 @@
             <a href="/" class="brand">
             <img src="/assets/images/spotnotes.png" alt="SpotNotes.app" style="height: 44px;">
             </a>
+            <button class="nav-toggle" id="nav-toggle" aria-label="Toggle Navigation" style="display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer;">☰</button>
             <div class="nav-search">
                 <form id="search-form" style="display: flex; width: 100%;">
                     <input type="text" id="search-input" placeholder="Search notes or location...">
                     <button type="submit" id="search-btn">🔍</button>
                 </form>
             </div>
-            <div class="nav-links">
+            <div class="nav-links" id="nav-links">
             <a href="/login.html" id="link-login">Login</a>
             <a href="/about.html">About</a>
             <a href="/contact.html">Contact</a>
diff --git a/static/login.html b/static/login.html
index bf5a0cc..0fa2f58 100644
--- a/static/login.html
+++ b/static/login.html
@@ -14,7 +14,8 @@
             <a href="/" class="brand">
             <img src="/assets/images/spotnotes.png" alt="SpotNotes.app" style="height: 44px;">
             </a>
-            <div class="nav-links">
+            <button class="nav-toggle" id="nav-toggle" aria-label="Toggle Navigation">☰</button>
+            <div class="nav-links" id="nav-links">
             <a href="/login.html" id="link-login">Login</a>
             <a href="/about.html">About</a>
             <a href="/contact.html">Contact</a>
diff --git a/static/register.html b/static/register.html
index 69e30d5..771beea 100644
--- a/static/register.html
+++ b/static/register.html
@@ -14,7 +14,8 @@
             <a href="/" class="brand">
             <img src="/assets/images/spotnotes.png" alt="SpotNotes.app" style="height: 44px;">
             </a>
-            <div class="nav-links">
+            <button class="nav-toggle" id="nav-toggle" aria-label="Toggle Navigation">☰</button>
+            <div class="nav-links" id="nav-links">
             <a href="/login.html" id="link-login">Login</a>
             <a href="/about.html">About</a>
             <a href="/contact.html">Contact</a>