fix css

static/css/shared.css

@@ -99,7 +99,7 @@ nav {
     position: fixed; top: 0; left: 0;
     width: 100%; z-index: 20;
     display: grid;
-    grid-template-columns: 1fr auto 1fr;
+    grid-template-columns: auto 1fr auto; /* Left: Auto, Center: Grow, Right: Auto */
     align-items: center;
     gap: 1rem;
     padding: 1.25rem 2.5rem;
@@ -148,6 +148,23 @@ nav {
 }
 .nav-brand:hover { color: var(--accent); border-bottom: none; }
 
+.nav-timer {
+    grid-column: 3;
+    justify-self: end;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--danger-text);
+    border: 1px solid var(--danger);
+    border-radius: 2px;
+    padding: 0.3rem 0.7rem;
+    font-size: 0.72rem;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    background: var(--danger-soft);
+    white-space: nowrap;
+}
+
 .brand-sep {
     font-weight: 300;
     color: var(--ink-dim);

static/css/supporter.css

@@ -7,109 +7,46 @@ html, body {
 }
 
 body {
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
 }
 
+/* ---- Mobile Menu Button (Hidden on Desktop) ---- */
+.mobile-menu-btn {
+    display: none;
+    position: fixed;
+    bottom: 4rem;
+    left: 1.5rem;
+    z-index: 30;
+    background: var(--accent);
+    color: var(--bg);
+    border: none;
+    border-radius: 2px;
+    padding: 0.5rem 1rem;
+    font-size: 0.72rem;
+    font-weight: 500;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    cursor: pointer;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
 /* ---- Layout ---- */
 .layout {
     display: grid;
     grid-template-columns: 280px minmax(0, 1fr);
-    grid-template-rows: 52px minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
     width: 100%;
-    height: calc(var(--app-height, 100dvh) - 40px);
+    flex: 1;
+    min-height: 0;
     overflow: hidden;
 }
 
-/* ---- Topbar ---- */
-.topbar {
-    grid-column: 1 / -1;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    padding: 0 1.5rem;
-    border-bottom: 1px solid var(--border);
-    background: var(--nav-bg);
-    backdrop-filter: blur(12px) saturate(120%);
-    -webkit-backdrop-filter: blur(12px) saturate(120%);
-    min-width: 0;
-    transition: background 0.3s ease;
-}
-
-.menu-button {
-    display: none;
-    background: transparent;
-    color: var(--ink);
-    border: 1px solid var(--border);
-    border-radius: 2px;
-    padding: 0.4rem 0.65rem;
-    font-size: 0.72rem;
-    font-weight: 500;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    cursor: pointer;
-    transition: border-color 0.2s, color 0.2s;
-}
-.menu-button:hover { border-color: var(--ink-muted); }
-
-.topbar-brand {
-    display: inline-flex;
-    align-items: baseline;
-    gap: 0.35rem;
-    white-space: nowrap;
-    font-weight: 700;
-    font-size: 1rem;
-    letter-spacing: -0.02em;
-    color: var(--ink);
-    text-decoration: none;
-}
-.topbar-brand:hover { color: var(--accent); border-bottom: none; }
-
-[data-theme="macchiato"] .topbar-brand {
-    color: #cad3f5;
-    text-shadow: 0 0 8px rgba(138, 173, 244, 0.25);
-}
-
-.topbar-brand .brand-sep {
-    font-weight: 300;
-    color: var(--ink-dim);
-}
-.topbar-brand .brand-sub {
-    font-weight: 400;
-    font-size: 0.72rem;
-    letter-spacing: 0.18em;
-    text-transform: uppercase;
-    color: var(--ink-muted);
-}
-
-.topbar-timer {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: auto;
-    font-size: 0.72rem;
-    font-weight: 500;
-    letter-spacing: 0.08em;
-    color: var(--danger-text);
-    background: var(--danger-soft);
-    padding: 0.3rem 0.7rem;
-    border-radius: 2px;
-    border: 1px solid var(--danger);
-    white-space: nowrap;
-}
-
-.drawer-backdrop {
-    display: none;
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.45);
-    z-index: 40;
-    backdrop-filter: blur(2px);
-}
-
 /* ---- Sidebar ---- */
 .sidebar {
     grid-column: 1;
-    grid-row: 2;
+    grid-row: 1;
     border-right: 1px solid var(--border);
     background: var(--bg-panel);
     backdrop-filter: blur(14px);
@@ -119,6 +56,7 @@ body {
     overflow: hidden;
     min-width: 0;
     transition: background 0.3s ease;
+    padding-top: 65px; 
 }
 
 .sidebar-header {
@@ -232,7 +170,7 @@ body {
 /* ---- Main panel ---- */
 .main-panel {
     grid-column: 2;
-    grid-row: 2;
+    grid-row: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -266,6 +204,7 @@ body {
     border-bottom: 1px solid var(--border);
     min-height: 50px;
     flex-shrink: 0;
+    background: var(--bg); /* Match page bg to eliminate white strip */
 }
 
 .active-copy {
@@ -451,11 +390,11 @@ body {
 @media (max-width: 820px) {
     .layout {
         grid-template-columns: minmax(0, 1fr);
-        grid-template-rows: 52px minmax(0, 1fr);
     }
 
-    .topbar { padding: 0 0.75rem; }
+    .mobile-menu-btn {
-    .menu-button { display: inline-flex; }
+        display: inline-flex;
+    }
 
     .drawer-backdrop.visible { display: block; }
 
@@ -476,7 +415,6 @@ body {
 
     .main-panel {
         grid-column: 1;
-        grid-row: 2;
         padding: 0.65rem;
         align-items: stretch;
         justify-content: stretch;
@@ -495,10 +433,9 @@ body {
 }
 
 @media (max-width: 460px) {
-    .topbar-brand .brand-sub { display: none; }
+    .nav-brand .brand-sub { display: none; }
-    .topbar-brand .brand-sep { display: none; }
+    .nav-brand .brand-sep { display: none; }
     .main-panel { padding: 0.45rem; }
-    .main-header { min-height: 46px; }
     #supporter-messages { padding: 0.75rem; }
     .theme-toggle { width: 20px; height: 20px; bottom: 1rem; right: 0.75rem; }
 }

templates/index.html

@@ -22,16 +22,16 @@
 </head>
 <body>
 
-  <nav>
+<nav>
   <a href="https://fló.fo" class="back-link">← FLÓ.FO</a>
   <a href="/" class="nav-brand">
     FLÓ <span class="brand-sep">/</span> <span class="brand-sub">USER TO SUPPORT CHAT // RUST</span>
   </a>
-  </nav>
+  <span class="nav-timer" hx-get="/reset-countdown" hx-trigger="load, every 1s" hx-swap="innerHTML">Reset in --:--</span>
+</nav>
 
   <main class="page-body">
     <div class="card">
-      <span class="timer" hx-get="/reset-countdown" hx-trigger="load, every 1s" hx-swap="innerHTML">Reset in --:--</span>
       <h1>User to Support Chat</h1>
       <p>Rust-based real-time chat with separate user and supporter views. Conversations, messages, and rate limits reset every 20 minutes.</p>
 

templates/supporter.html

@@ -22,20 +22,20 @@
 </head>
 <body>
 
-<div class="layout">
+  <!-- STANDARD NAV (Same as user.html) -->
-  <header class="topbar">
+  <nav>
-    <button class="menu-button" type="button" onclick="openSidebar()">Chats</button>
+    <a href="https://fló.fo" class="back-link">← FLÓ.FO</a>
-    <a href="/" class="topbar-brand">
+    <a href="/" class="nav-brand">
       FLÓ <span class="brand-sep">/</span> <span class="brand-sub">USER TO SUPPORT CHAT // RUST</span>
     </a>
-    <span class="topbar-timer" hx-get="/reset-countdown" hx-trigger="load, every 1s" hx-swap="innerHTML">Reset in --:--</span>
+    <span class="nav-timer" hx-get="/reset-countdown" hx-trigger="load, every 1s" hx-swap="innerHTML">Reset in --:--</span>
-  </header>
+  </nav>
-
-  <div id="drawer-backdrop" class="drawer-backdrop" onclick="closeSidebar()"></div>
 
+  <div class="layout">
     <aside id="sidebar" class="sidebar">
       <div class="sidebar-header">
         <span class="sidebar-title">Conversations</span>
+        <!-- Chats button moved here for desktop, or use mobile toggle -->
         <button class="close-sidebar" type="button" onclick="closeSidebar()">Close</button>
       </div>
       <div id="session-list"
@@ -74,9 +74,14 @@
         </div>
       </div>
     </section>
-</div>
+  </div>
 
-<footer>
+  <div id="drawer-backdrop" class="drawer-backdrop" onclick="closeSidebar()"></div>
+
+  <!-- Mobile Menu Button (Hidden on Desktop) -->
+  <button class="mobile-menu-btn" onclick="openSidebar()" aria-label="Open conversations">Chats</button>
+
+  <footer>
     <span>&copy; <script>document.write(new Date().getFullYear())</script> FLÓ.FO | ØLL RÆTTINDI TILSKILAÐ</span>
     <a href="https://www.facebook.com/people/FL%C3%93/61593006613799/" target="_blank" rel="noopener" class="footer-icon" aria-label="Facebook">
       <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
@@ -87,11 +92,11 @@
     <a href="https://www.linkedin.com/in/bartal-l%C3%A6arsson-63793895/" target="_blank" rel="noopener" class="footer-icon" aria-label="LinkedIn">
       <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
     </a>
-</footer>
+  </footer>
 
-<button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme"></button>
+  <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme"></button>
 
-<script src="/static/js/shared.js"></script>
+  <script src="/static/js/shared.js"></script>
-<script src="/static/js/supporter.js"></script>
+  <script src="/static/js/supporter.js"></script>
 </body>
 </html>

templates/user.html

@@ -22,14 +22,13 @@
 </head>
 <body>
 
-  <nav>
+<nav>
   <a href="https://fló.fo" class="back-link">← FLÓ.FO</a>
   <a href="/" class="nav-brand">
     FLÓ <span class="brand-sep">/</span> <span class="brand-sub">USER TO SUPPORT CHAT // RUST</span>
   </a>
-  </nav>
+  <span class="nav-timer" hx-get="/reset-countdown" hx-trigger="load, every 1s" hx-swap="innerHTML">Reset in --:--</span>
-
+</nav>
-  <span class="page-timer" hx-get="/reset-countdown" hx-trigger="load, every 1s" hx-swap="innerHTML">Reset in --:--</span>
 
   <div class="chat-wrapper">
     <div id="chat-container">