Selaa lähdekoodia

Keep admin sidebar fixed to the window height

The sidebar stretched with the document, so on long pages the logout
button sat at the bottom of the content and was only reachable after
scrolling. Make it a sticky, viewport-tall column that scrolls
internally if it ever gets taller than the window.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
sebastian 3 viikkoa sitten
vanhempi
sitoutus
9f70eb8799
1 muutettua tiedostoa jossa 1 lisäystä ja 1 poistoa
  1. 1 1
      admin/layout.php

+ 1 - 1
admin/layout.php

@@ -26,7 +26,7 @@ function admin_head(string $title, string $active = ''): void {
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
 body{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;display:flex;min-height:100vh;}
 /* sidebar */
-.sidebar{width:200px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:1.5rem 0;}
+.sidebar{width:200px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:1.5rem 0;position:sticky;top:0;align-self:flex-start;height:100vh;height:100dvh;overflow-y:auto;}
 .sidebar-logo{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;color:var(--accent);letter-spacing:.05em;padding:0 1.25rem .5rem;}
 .sidebar-sub{font-size:.7rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;padding:0 1.25rem 1.5rem;}
 .nav-link{display:block;padding:.55rem 1.25rem;color:var(--muted);text-decoration:none;font-size:.85rem;font-weight:500;border-left:3px solid transparent;transition:color .15s,border-color .15s,background .15s;}