Claude fixed (hopefully) the top bars clipping outside the screen

This commit is contained in:
2026-02-23 18:06:26 +02:00
parent cf9fa91238
commit 6ed3b4bbe6
3 changed files with 6 additions and 6 deletions

View File

@@ -4,11 +4,11 @@ import Sidebar from "./Sidebar";
export default function MainLayout() { export default function MainLayout() {
return ( 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 /> <Sidebar />
<div className="flex-1 flex flex-col"> <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
<Header /> <Header />
<main className="flex-1 p-6"> <main className="flex-1 p-6 overflow-y-auto min-w-0">
<Outlet /> <Outlet />
</main> </main>
</div> </div>

View File

@@ -50,7 +50,7 @@ export default function Sidebar() {
const canManageStaff = hasRole("sysadmin", "admin"); const canManageStaff = hasRole("sysadmin", "admin");
return ( 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"> <div className="mb-8 px-2">
<img <img
src="/logo-dark.png" src="/logo-dark.png"

View File

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