Fixed dropbox file removing issue, UI navigation sticky mode

frontend/src/components/Layout.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import { NavLink, useLocation } from "react-router-dom";
 import Icon from "./Icon";
 import { useAdmin } from "./AdminSession";
@@ -14,6 +14,7 @@ const navItems = [
 function Header({ name }) {
   const { isAdmin, checking, openSignIn } = useAdmin();
   const [menuOpen, setMenuOpen] = useState(false);
+  const navigationId = useId();
   const location = useLocation();
 
   useEffect(() => setMenuOpen(false), [location.pathname]);
@@ -27,7 +28,9 @@ function Header({ name }) {
         </NavLink>
 
         <div className="header-actions">
-        <nav className={`nav-shell ${menuOpen ? "is-open" : ""}`} aria-label="Main navigation">
+        <div className="nav-positioner">
+        <div className="container nav-positioner__inner">
+        <nav id={navigationId} className={`nav-shell ${menuOpen ? "is-open" : ""}`} aria-label="Main navigation">
           {navItems.map((item) => (
             <NavLink
               className={({ isActive }) => `nav-link ${isActive ? "is-active" : ""}`}
@@ -40,15 +43,9 @@ function Header({ name }) {
           ))}
         </nav>
 
-        <button type="button" className={`icon-button header-signin ${isAdmin ? "is-admin" : ""}`}
-          aria-label={isAdmin ? "Admin account" : "Admin sign in"} title={isAdmin ? "Admin account" : "Admin sign in"}
-          aria-haspopup="dialog" disabled={checking} onClick={openSignIn}>
-          <Icon name={isAdmin ? "user" : "lock"} />
-          {isAdmin && <span className="admin-indicator" />}
-        </button>
-
         <button
           aria-expanded={menuOpen}
+          aria-controls={navigationId}
           aria-label={menuOpen ? "Close navigation" : "Open navigation"}
           className="menu-button"
           onClick={() => setMenuOpen((open) => !open)}
@@ -57,6 +54,14 @@ function Header({ name }) {
           <Icon name={menuOpen ? "close" : "menu"} />
         </button>
         </div>
+        </div>
+        <button type="button" className={`icon-button header-signin ${isAdmin ? "is-admin" : ""}`}
+          aria-label={isAdmin ? "Admin account" : "Admin sign in"} title={isAdmin ? "Admin account" : "Admin sign in"}
+          aria-haspopup="dialog" disabled={checking} onClick={openSignIn}>
+          <Icon name={isAdmin ? "user" : "lock"} />
+          {isAdmin && <span className="admin-indicator" />}
+        </button>
+        </div>
       </div>
     </header>
   );

frontend/src/styles.css

@@ -128,10 +128,11 @@ button {
 }
 
 .site-header {
+  --header-top: 22px;
   position: relative;
   z-index: 50;
   flex: 0 0 auto;
-  padding-block: 22px 10px;
+  padding-block: var(--header-top) 10px;
 }
 
 .header-inner {
@@ -178,6 +179,12 @@ button {
   backdrop-filter: blur(18px);
 }
 
+/* Only navigation is pinned. Identity and account controls stay in normal flow. */
+.nav-positioner { position: fixed; top: var(--header-top); inset-inline: 0; pointer-events: none; }
+.nav-positioner__inner { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 58px; padding-right: 56px; }
+.nav-positioner .nav-shell, .nav-positioner .menu-button { pointer-events: auto; }
+@media (min-width: 721px) and (max-width: 900px) { .brand-name { display: none; } }
+
 .nav-link {
   padding: 10px 15px;
   border-radius: 13px;
@@ -2383,9 +2390,13 @@ button {
   }
 
   .site-header {
+    --header-top: 14px;
     padding-top: 14px;
   }
 
+  .nav-positioner__inner { padding-right: 0; }
+  .site-header .header-actions { padding-right: 56px; }
+
   .header-inner {
     position: relative;
   }
@@ -2707,6 +2718,7 @@ button {
 
 @media (max-height: 770px) and (min-width: 901px) {
   .site-header {
+    --header-top: 14px;
     padding-top: 14px;
   }