fix: sticky top

frontend/src/components/Layout/AppLayout.tsx

@@ -151,7 +151,7 @@ function AppLayoutShell({
         }}
       >
         <Sidebar isAdmin={isAdmin} onSelectCategory={onSelectCategory} />
-        <Box component="main" sx={{ flex: 1, p: 2 }}>
+        <Box component="main" sx={{ flex: 1, p: 2, pt: 0 }}>
           {apiUp === false && (
             <Alert severity="error" sx={{ mb: 1.5 }}>
               {t("shell.apiUnreachable")}

frontend/src/components/Layout/BackToTopButton.tsx

@@ -9,7 +9,7 @@ import { useImportJob } from "./ImportJobContext";
 
 // Appears once enough of the page has scrolled past that "a bit down" reads as true, not on the
 // first pixel of scroll -- matches the threshold feel of most scroll-to-top buttons.
-const SCROLL_SHOW_THRESHOLD = 300;
+const SCROLL_SHOW_THRESHOLD = 200;
 
 function scrollToTop() {
   window.scrollTo({ top: 0, behavior: "smooth" });

frontend/src/components/Layout/TopBar.tsx

@@ -72,7 +72,14 @@ export default function TopBar({
         alignItems: "center",
         gap: 1.5,
         flexWrap: "wrap",
-        mb: 2,
+        // Both of these used to live on `main` (pt) / as this bar's own margin (mb) -- moved to
+        // padding on this box itself so they're part of what's actually pinned. As margin/an
+        // ancestor's padding, that space isn't covered by this bar's own background, so it either
+        // visibly disappeared once scrolling clipped it out from under `main`'s padding (the top
+        // one) or left a seam between this bar and the content below it that isn't really "this
+        // bar" (the bottom one) -- padding keeps both included in its own painted, sticky box.
+        pt: 2,
+        pb: 2,
         // Pinned to the top of the window (the app scrolls at that level, not inside `main` --
         // see AppLayout's own comment on why overflow was removed from main) so the title, back
         // button, and the Add/Notifications/User cluster stay reachable no matter how far a long

frontend/src/pages/ModelDetailPage/ModelSidePanel.tsx

@@ -66,10 +66,12 @@ export default function ModelSidePanel({ print, onSelectCategory, onUnauthorized
         borderRadius: "12px",
         position: { xs: "static", md: "sticky" },
         // TopBar is sticky too (see its own doc comment) and sits above this in stacking order --
-        // sticking at a fixed 16px from the viewport top would land this panel right underneath
+        // sticking at a fixed offset from the viewport top would land this panel right underneath
         // it once both are pinned simultaneously. --topbar-height (set by TopBar itself, since it
-        // can wrap taller on narrow widths) keeps this just below it instead.
-        top: "calc(var(--topbar-height, 64px) + 16px)",
+        // can wrap taller on narrow widths) keeps this just below it instead -- no extra gap added
+        // on top, since TopBar's own pb: 2 already is that gap, now that it's real padding on the
+        // sticky element itself rather than a separate margin outside it.
+        top: "var(--topbar-height, 80px)",
       }}
     >
       <Stack spacing={2}>