v1.7: Responsive Layout — Sidebar skaliert (lg/xl), Mobile-Ansicht bis 1024 px, Footer bricht um

kimi.md

@@ -189,6 +189,14 @@ tar -czf mp-dist.tar.gz -C dist .
 
 ## 8. Verlauf / offene Punkte
 
+**Erledigt 02.10. (v1.7):** Responsive Layout repariert. Sidebar skaliert jetzt in zwei
+Stufen (`w-64` ab `lg`, `xl:w-72`) statt fixer 288 px. Mobile Ansicht (Top-Bar +
+horizontal scrollende Nav) gilt jetzt bis 1024 px (`md:hidden` → `lg:hidden`) – vorher
+stand zwischen 768–1024 px die volle Sidebar und quetschte Inhalt + Fußzeile.
+Sidebar-Fußzeile bricht um (`flex-wrap`, `truncate`-sichere Buttons), `main`-Padding
+folgt dem `lg`-Breakpoint. Tailwind war bereits das CSS-Framework (kein Wechsel nötig).
+Screenshots: `preview/09-mobile-900px.png`, `preview/10-desktop-1280px.png`.
+
 **Erledigt 02.10. (v1.6):** Login-Race behoben: `setMe` läuft jetzt erst nach
 `ladeAlles()` (Start/Login/Registrierung) – vorher rendereten die Seiten gegen
 noch leere Daten → Absturz → schwarzer Bildschirm, erst Reload half. Zusätzlich

src/components/AppLayout.tsx

@@ -41,7 +41,7 @@ export default function AppLayout() {
   return (
     <div className="flex min-h-screen bg-slate-50 dark:bg-slate-950">
       {/* Sidebar */}
-      <aside className="hidden w-72 flex-col bg-[#22333b] text-white md:flex">
+      <aside className="hidden w-64 flex-col bg-[#22333b] text-white lg:flex xl:w-72">
         <div className="flex items-center gap-3 px-6 py-6">
           <img src={logo} alt="Logo Hinterstein Immobilien" className="h-12 w-12 rounded-full bg-white/95 object-contain p-1" />
           <div>
@@ -86,16 +86,16 @@ export default function AppLayout() {
         </nav>
 
         <div className="border-t border-white/10 p-4">
-          <div className="mb-2 flex items-center gap-2 px-2 text-xs text-slate-300/70">
+          <div className="mb-2 flex flex-wrap items-center gap-x-2 gap-y-1 px-2 text-xs text-slate-300/70">
-            <Building2 className="h-3.5 w-3.5" />
+            <Building2 className="h-3.5 w-3.5 shrink-0" />
-            3 Häuser · 50 Wohnungen
+            <span>3 Häuser · 50 Wohnungen</span>
           </div>
           <div className="flex items-center gap-2">
             <button
               onClick={abmelden}
-              className="flex flex-1 items-center gap-3 rounded-xl px-4 py-2.5 text-sm text-slate-200/80 transition hover:bg-white/10 hover:text-white"
+              className="flex min-w-0 flex-1 items-center gap-3 rounded-xl px-4 py-2.5 text-sm text-slate-200/80 transition hover:bg-white/10 hover:text-white"
             >
-              <LogOut className="h-4 w-4" /> Abmelden
+              <LogOut className="h-4 w-4 shrink-0" /> <span className="truncate">Abmelden</span>
             </button>
             <ThemeToggle dunkelStil />
           </div>
@@ -104,12 +104,12 @@ export default function AppLayout() {
 
       {/* Mobile top bar */}
       <div className="flex min-h-screen flex-1 flex-col">
-        <header className="sticky top-0 z-20 flex items-center gap-3 border-b bg-white/90 px-4 py-3 backdrop-blur dark:bg-slate-900/90 md:hidden">
+        <header className="sticky top-0 z-20 flex items-center gap-3 border-b bg-white/90 px-4 py-3 backdrop-blur dark:bg-slate-900/90 lg:hidden">
           <img src={logo} alt="Logo Hinterstein Immobilien" className="h-9 w-9 rounded-full bg-white object-contain p-0.5 ring-1 ring-slate-200" />
           <div className="flex-1 font-bold text-[#22333b] dark:text-amber-100">Hinterstein Immobilien</div>
           <ThemeToggle />
         </header>
-        <nav className="sticky top-[57px] z-10 flex gap-1 overflow-x-auto border-b bg-white px-2 py-2 dark:bg-slate-900 md:hidden">
+        <nav className="sticky top-[57px] z-10 flex gap-1 overflow-x-auto border-b bg-white px-2 py-2 dark:bg-slate-900 lg:hidden">
           {alleNavItems.map(({ to, label, icon: Icon, end }) => (
             <NavLink
               key={to}
@@ -127,7 +127,7 @@ export default function AppLayout() {
           ))}
         </nav>
 
-        <main className="flex-1 p-4 md:p-8">
+        <main className="flex-1 p-4 lg:p-8">
           <Outlet />
         </main>
       </div>