Claude tried a second fix

frontend/src/index.css

@@ -58,12 +58,20 @@ summary {
   cursor: pointer;
 }
 
-/* Global dark background */
+/* Global dark background - lock to viewport, no page-level scroll */
+html,
 body {
+  height: 100%;
+  overflow: hidden;
   background-color: var(--bg-primary);
   color: var(--text-primary);
 }
 
+#root {
+  height: 100%;
+  overflow: hidden;
+}
+
 /* Scrollbar styling */
 ::-webkit-scrollbar {
   width: 8px;

frontend/src/layout/MainLayout.jsx

@@ -4,11 +4,11 @@ import Sidebar from "./Sidebar";
 
 export default function MainLayout() {
   return (
-    <div className="flex min-h-screen" style={{ backgroundColor: "var(--bg-primary)" }}>
+    <div className="flex h-screen overflow-hidden" style={{ backgroundColor: "var(--bg-primary)" }}>
       <Sidebar />
-      <div className="flex-1 flex flex-col">
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
         <Header />
-        <main className="flex-1 p-6">
+        <main className="flex-1 p-6 overflow-y-auto min-w-0">
           <Outlet />
         </main>
       </div>

frontend/src/layout/Sidebar.jsx

@@ -50,7 +50,7 @@ export default function Sidebar() {
   const canManageStaff = hasRole("sysadmin", "admin");
 
   return (
-    <aside className="w-56 min-h-screen p-4 border-r flex flex-col" style={{ backgroundColor: "var(--bg-sidebar)", borderColor: "var(--border-primary)" }}>
+    <aside className="w-56 h-screen flex-shrink-0 p-4 border-r flex flex-col overflow-y-auto" style={{ backgroundColor: "var(--bg-sidebar)", borderColor: "var(--border-primary)" }}>
       <div className="mb-8 px-2">
         <img
           src="/logo-dark.png"

frontend/src/melodies/MelodyList.jsx

@@ -971,7 +971,7 @@ export default function MelodyList() {
   const selectClass = "px-3 py-2 rounded-md text-sm cursor-pointer border";
 
   return (
-    <div className="w-full min-w-0 max-w-full overflow-hidden">
+    <div className="w-full min-w-0 max-w-full">
       <div className="w-full min-w-0 relative" style={{ zIndex: 30 }}>
       <div className="flex items-center justify-between mb-6 w-full min-w-0">
         <h1 className="text-2xl font-bold" style={{ color: "var(--text-heading)" }}>Melodies</h1>
@@ -1215,7 +1215,7 @@ export default function MelodyList() {
         </div>
       ) : (
         <div
-          className="rounded-lg border max-w-full"
+          className="rounded-lg border max-w-full overflow-hidden"
           style={{
             backgroundColor: "var(--bg-card)",
             borderColor: "var(--border-primary)",