From 2b7f6e8e17d6065a33fb014bcf4322b3bc281474 Mon Sep 17 00:00:00 2001
From: "theis.gaedigk" <theis.gaedigk@icloud.com>
Date: Wed, 20 Aug 2025 13:06:22 +0200
Subject: [PATCH] fixed sidebar displaying bug

---
 frontend/src/components/Sidebar.tsx | 95 +++++++++++++++--------------
 frontend/src/layout/Layout.tsx      | 14 ++---
 2 files changed, 57 insertions(+), 52 deletions(-)

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index be15d9e..29c981e 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -22,8 +22,8 @@ const Sidebar: React.FC = () => {
   const sorted = [...items].sort((a, b) => Number(a.inSafe) - Number(b.inSafe));
 
   return (
-    <aside className="w-full md:w-72 md:h-[calc(100vh-2rem)] md:sticky md:top-4 overflow-y-auto rounded-2xl pt-0 px-3 pb-3 sm:pt-0 sm:px-4 sm:pb-4 bg-gradient-to-b from-white to-slate-50 ring-1 ring-slate-200/70 shadow-md">
-      <h2 className="sticky top-0 z-10 -mx-3 sm:-mx-4 px-3 sm:px-4 py-2.5 bg-white/85 backdrop-blur supports-[backdrop-filter]:backdrop-blur border-b border-slate-200/70 text-lg sm:text-xl font-bold mb-3 text-slate-900 tracking-tight flex items-center justify-between gap-2 rounded-t-2xl">
+    <aside className="w-full md:w-72 md:h-full flex flex-col rounded-2xl pt-0 px-3 pb-3 sm:pt-0 sm:px-4 sm:pb-4 bg-gradient-to-b from-white to-slate-50 ring-1 ring-slate-200/70 shadow-md overflow-hidden">
+      <div className="sticky top-0 z-10 -mx-3 sm:-mx-4 px-3 sm:px-4 py-2.5 bg-white/85 backdrop-blur supports-[backdrop-filter]:backdrop-blur border-b border-slate-200/70 text-lg sm:text-xl font-bold mb-3 text-slate-900 tracking-tight flex items-center justify-between gap-2 rounded-t-2xl">
         <span className="flex items-center gap-2 min-w-0 flex-1 truncate">
           <MonitorSmartphone className="w-5 h-5 text-slate-700 shrink-0" />
           <span className="truncate">Geräte</span>
@@ -33,56 +33,61 @@ const Sidebar: React.FC = () => {
             {outCount} außerhalb
           </span>
         )}
-      </h2>
+      </div>
 
-      {/* Mobile: horizontal scroll, Desktop: vertical list */}
-      <div className="flex gap-3 overflow-x-auto snap-x snap-mandatory pb-2 -mr-1 pr-2 md:block md:space-y-3 md:pr-1 md:pb-1">
-        {sorted.map((item: any) => (
-          <div
-            key={item.item_name}
-            className={`group relative bg-white rounded-xl p-3 sm:p-4 ring-1 ring-slate-200/70 uration-200 hover:shadow-md focus-within:ring-slate-300 ${
-              item.inSafe
-                ? "border-l-4 border-emerald-400"
-                : "border-l-4 border-red-400 ring-red-200/60 bg-red-50/40"
-            } shrink-0 snap-start min-w-[240px] md:min-w-0`}
-          >
-            <div className="flex items-start gap-3">
-              <span className="relative mt-0.5 inline-flex" aria-hidden="true">
-                {!item.inSafe && (
-                  <span className="absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75 animate-ping"></span>
-                )}
+      {/* Scroll area */}
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        <div className="flex gap-3 overflow-x-auto snap-x snap-mandatory pb-2 -mr-1 pr-2 md:block md:space-y-3 md:pr-1 md:pb-1">
+          {sorted.map((item: any) => (
+            <div
+              key={item.item_name}
+              className={`group relative bg-white rounded-xl p-3 sm:p-4 ring-1 ring-slate-200/70 uration-200 hover:shadow-md focus-within:ring-slate-300 ${
+                item.inSafe
+                  ? "border-l-4 border-emerald-400"
+                  : "border-l-4 border-red-400 ring-red-200/60 bg-red-50/40"
+              } shrink-0 snap-start min-w-[240px] md:min-w-0`}
+            >
+              <div className="flex items-start gap-3">
                 <span
-                  className={`inline-block w-3 h-3 rounded-full ring-2 ring-white ${
-                    item.inSafe ? "bg-emerald-500" : "bg-red-500"
-                  }`}
-                  title={
-                    item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
-                  }
-                  aria-label={
+                  className="relative mt-0.5 inline-flex"
+                  aria-hidden="true"
+                >
+                  {!item.inSafe && (
+                    <span className="absolute inline-flex h-3 w-3 rounded-full bg-red-400 opacity-75 animate-ping"></span>
+                  )}
+                  <span
+                    className={`inline-block w-3 h-3 rounded-full ring-2 ring-white ${
+                      item.inSafe ? "bg-emerald-500" : "bg-red-500"
+                    }`}
+                    title={
+                      item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
+                    }
+                    aria-label={
+                      item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
+                    }
+                  />
+                </span>
+                <Object
+                  title={item.item_name}
+                  description={
                     item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
                   }
                 />
-              </span>
-              <Object
-                title={item.item_name}
-                description={
-                  item.inSafe ? "Im Schließfach" : "Nicht im Schließfach"
-                }
-              />
+              </div>
             </div>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
 
-      <div className="mt-4 pt-3 border-t border-slate-200/70 text-[10px] sm:text-xs text-slate-500 items-center gap-4 hidden md:flex">
-        <span className="inline-flex items-center gap-1">
-          <span className="inline-block w-3 h-3 bg-emerald-500 rounded-full ring-2 ring-white shadow-sm"></span>
-          Verfügbar
-        </span>
-        <span className="inline-flex items-center gap-1">
-          <span className="inline-block w-3 h-3 bg-red-500 rounded-full ring-2 ring-white shadow-sm"></span>
-          Außerhalb des Schließfachs
-        </span>
+        <div className="mt-4 pt-3 border-t border-slate-200/70 text-[10px] sm:text-xs text-slate-500 items-center gap-4 hidden md:flex">
+          <span className="inline-flex items-center gap-1">
+            <span className="inline-block w-3 h-3 bg-emerald-500 rounded-full ring-2 ring-white shadow-sm"></span>
+            Verfügbar
+          </span>
+          <span className="inline-flex items-center gap-1">
+            <span className="inline-block w-3 h-3 bg-red-500 rounded-full ring-2 ring-white shadow-sm"></span>
+            Außerhalb des Schließfachs
+          </span>
+        </div>
       </div>
     </aside>
   );
diff --git a/frontend/src/layout/Layout.tsx b/frontend/src/layout/Layout.tsx
index ae478e8..e2eb032 100644
--- a/frontend/src/layout/Layout.tsx
+++ b/frontend/src/layout/Layout.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import "../App.css";
 import Header from "../components/Header";
 import Sidebar from "../components/Sidebar";
@@ -10,24 +10,24 @@ type LayoutProps = {
 
 const Layout: React.FC<LayoutProps> = ({ children, onLogout }) => {
   return (
-    <div className="min-h-screen flex bg-slate-50 text-slate-800">
+    <div className="h-screen overflow-hidden flex bg-slate-50 text-slate-800">
       {/* Main */}
-      <main className="flex-1 flex flex-col items-center px-3 sm:px-5 py-4 sm:py-8">
+      <main className="flex-1 min-h-0 overflow-hidden flex flex-col items-center px-3 sm:px-5 py-4 sm:py-8">
         {/* Sidebar on mobile appears inline on top; on desktop it's a sticky column */}
-        <div className="w-full max-w-5xl md:flex md:gap-6">
+        <div className="w-full max-w-5xl md:flex md:gap-6 md:items-stretch md:min-h-0 md:h-full">
           <div className="block md:hidden mb-3">
             <Sidebar />
           </div>
 
-          <div className="hidden md:block md:shrink-0 md:w-72">
+          <div className="hidden md:flex md:flex-col md:shrink-0 md:w-72 md:min-h-0 md:h-full">
             <Sidebar />
           </div>
 
-          <div className="flex-1 min-w-0">
+          <div className="flex-1 min-w-0 md:min-h-0 md:h-full flex flex-col overflow-hidden">
             <div className="w-full">
               <Header onLogout={onLogout} />
             </div>
-            <div className="w-full bg-white shadow-md md:shadow-lg rounded-2xl p-4 sm:p-6 ring-1 ring-slate-200">
+            <div className="w-full bg-white shadow-md md:shadow-lg rounded-2xl p-4 sm:p-6 ring-1 ring-slate-200 flex-1 min-h-0 overflow-y-auto">
               {children}
             </div>
           </div>