RHL-043 refactor(layout): remove sidebar placeholder and use 75% shell

app/(protected)/layout.jsx

@@ -6,7 +6,7 @@ import AuthGate from "@/components/auth/AuthGate";
  * Protected layout
  *
  * UX goal:
- * - Keep the AppShell visible at all times (TopNav + Sidebar).
+ * - Keep the AppShell visible at all times (TopNav + main content frame).
  * - Render auth/loading/error states inside the main content area via AuthGate.
  *
  * This avoids "blank spinner" screens on slow connections.

components/app-shell/AppShell.jsx

@@ -1,38 +1,13 @@
 import React from "react";
 import TopNav from "@/components/app-shell/TopNav";
-import SidebarPlaceholder from "@/components/app-shell/SidebarPlaceholder";
 
 export default function AppShell({ children }) {
 	return (
 		<div className="min-h-screen flex flex-col">
 			<TopNav />
 
-			{/* 
-				Layout strategy (2xl+):
-				- Center column is exactly 45% width.
-				- Left/right gutters are flexible.
-				- Sidebar is placed in the left gutter and aligned to the right edge,
-				  so it “docks” to the centered content without consuming its width.
-
-				Below 2xl:
-				- Keep the app wide (single-column flow).
-				- Sidebar is hidden (it would otherwise reduce main content width).
-			*/}
 			<div className="flex-1 px-4 py-4">
-				<div className="mx-auto grid w-full gap-4 2xl:grid-cols-[1fr_minmax(0,45%)_1fr]">
-					<aside className="hidden 2xl:col-start-1 2xl:block 2xl:justify-self-end">
-						{/* 
-							Sidebar width policy:
-							- Fixed width keeps it stable and prevents “percentage jitter”.
-							- Adjust these widths if you want a bigger/smaller left rail.
-						*/}
-						<div className="w-96">
-							<SidebarPlaceholder />
-						</div>
-					</aside>
-
-					<main className="min-w-0 2xl:col-start-2">{children}</main>
-				</div>
+				<main className="mx-auto w-full min-w-0 lg:w-3/4">{children}</main>
 			</div>
 		</div>
 	);

components/app-shell/AppShell.test.js

@@ -101,10 +101,10 @@ describe("components/app-shell/AppShell", () => {
 
 		const html = renderToString(element);
 
-		// Sidebar placeholder heading (German)
-		expect(html).toContain("Seitenleiste");
-
 		// Rendered children
 		expect(html).toContain("Child content");
+
+		// Sidebar placeholder must be gone.
+		expect(html).not.toContain("Seitenleiste");
 	});
 });

components/app-shell/SidebarPlaceholder.jsx

@@ -1,31 +0,0 @@
-import React from "react";
-
-/**
- * SidebarPlaceholder
- *
- * Reserved sidebar area for future navigation/filter UI.
- *
- * UX rule:
- * - All user-facing text must be German.
- */
-export default function SidebarPlaceholder() {
-	return (
-		<div className="rounded-lg border bg-card p-4 text-card-foreground shadow-sm">
-			<div className="space-y-3">
-				<div>
-					<p className="text-sm font-medium">Seitenleiste</p>
-					<p className="text-xs text-muted-foreground">
-						Navigation und Filter werden hier später angezeigt.
-					</p>
-				</div>
-
-				<ul className="space-y-1 text-xs text-muted-foreground">
-					<li>• Niederlassung (Label oder Auswahl)</li>
-					<li>• Explorer-Navigation (Jahr/Monat/Tag)</li>
-					<li>• Suchfilter (Archiv, Zeitraum, …)</li>
-					<li>• Schnellzugriffe (Zuletzt geöffnet, Favoriten)</li>
-				</ul>
-			</div>
-		</div>
-	);
-}

components/app-shell/TopNav.jsx

@@ -15,8 +15,8 @@ export default function TopNav() {
 		<header className="sticky top-0 z-50 w-full border-b bg-background">
 			<TooltipProvider delayDuration={TOOLTIP_DELAY_MS}>
 				<div className="px-4">
-					<div className="mx-auto grid h-14 w-full items-center 2xl:grid-cols-[1fr_minmax(0,45%)_1fr]">
-						<div className="flex items-center justify-between gap-4 2xl:col-start-2">
+					<div className="mx-auto h-14 w-full lg:w-3/4">
+						<div className="flex h-full items-center justify-between gap-4">
 							<div className="flex items-center gap-2">
 								<Link
 									href="/"