From 6ed3b4bbe68c9af2c54ebac28074440728d365c0 Mon Sep 17 00:00:00 2001
From: bonamin <just_big_v@yahoo.com>
Date: Mon, 23 Feb 2026 18:06:26 +0200
Subject: [PATCH] Claude fixed (hopefully) the top bars clipping outside the
 screen

---
 frontend/src/layout/MainLayout.jsx   | 6 +++---
 frontend/src/layout/Sidebar.jsx      | 2 +-
 frontend/src/melodies/MelodyList.jsx | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/layout/MainLayout.jsx b/frontend/src/layout/MainLayout.jsx
index c41851f..11210b1 100644
--- a/frontend/src/layout/MainLayout.jsx
+++ b/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>
diff --git a/frontend/src/layout/Sidebar.jsx b/frontend/src/layout/Sidebar.jsx
index 57199d2..544ffc4 100644
--- a/frontend/src/layout/Sidebar.jsx
+++ b/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"
diff --git a/frontend/src/melodies/MelodyList.jsx b/frontend/src/melodies/MelodyList.jsx
index ca33e64..cc504d5 100644
--- a/frontend/src/melodies/MelodyList.jsx
+++ b/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)",