From fe899f528764bf69eb3d8d5aa430bd51815cfcdc Mon Sep 17 00:00:00 2001
From: Dicken <webmaster@sermerpartydorf.de>
Date: Tue, 2 Jun 2026 21:02:18 +0200
Subject: [PATCH] Dashboard: Kalender naechster Eintrag mit TT.MM. HH:MM,
 Schnellzugriff 4 pro Reihe zentriert

---
 frontend/src/App.jsx      | 21 ++++++++-------------
 frontend/src/calendar.jsx |  2 +-
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index dc2a61c..f0cb773 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -437,19 +437,17 @@ function BottomNav({ active, setActive, user, onLogout, updateInfo, onUpdateClic
 // ── Dashboard Widgets ─────────────────────────────────────────────────────────
 // ── QuickLinks Carousel (Mobile) ─────────────────────────────────────────────
 function QuickLinksCarousel({ links }) {
-  const iconW = 58; const gap = 6;
-  const containerW = window.innerWidth - 28;
-  const perRow = Math.max(3, Math.floor((containerW + gap) / (iconW + gap)));
+  const perRow = 4;
+  const gap = 6;
   const pageSize = perRow * 2;
   const pageCount = Math.ceil(links.length / pageSize);
 
   const [page, setPage] = useState(0);
   const scrollRef = useRef(null);
 
-  // Sync scroll position → page indicator
   const onScroll = () => {
     if (!scrollRef.current) return;
-    const p = Math.round(scrollRef.current.scrollLeft / containerW);
+    const p = Math.round(scrollRef.current.scrollLeft / scrollRef.current.offsetWidth);
     setPage(p);
   };
 
@@ -457,18 +455,17 @@ function QuickLinksCarousel({ links }) {
   const canRight = page < pageCount - 1;
 
   const scrollTo = (p) => {
-    scrollRef.current?.scrollTo({ left: p * containerW, behavior:'smooth' });
+    scrollRef.current?.scrollTo({ left: p * scrollRef.current.offsetWidth, behavior:'smooth' });
   };
 
   if (pageCount <= 1) return (
-    <div style={{ display:'grid', gridTemplateColumns:`repeat(${perRow}, 1fr)`, gap }}>
+    <div style={{ display:'grid', gridTemplateColumns:`repeat(${perRow}, 1fr)`, gap, justifyItems:'center' }}>
       {links.map(l => <QuickLinkIcon key={l.id} l={l}/>)}
     </div>
   );
 
   return (
     <div style={{ position:'relative' }}>
-      {/* Scroll container – overflow hidden so nothing peeks */}
       <div ref={scrollRef} onScroll={onScroll} style={{
         display:'flex', overflowX:'auto', scrollSnapType:'x mandatory',
         scrollbarWidth:'none', WebkitOverflowScrolling:'touch',
@@ -479,8 +476,9 @@ function QuickLinksCarousel({ links }) {
             display:'grid',
             gridTemplateColumns:`repeat(${perRow}, 1fr)`,
             gridTemplateRows:'repeat(2, auto)',
+            justifyItems:'center',
             gap, flexShrink:0, scrollSnapAlign:'start',
-            width: containerW,
+            width:'100%', minWidth:'100%',
           }}>
             {links.slice(pi*pageSize, (pi+1)*pageSize).map(l => <QuickLinkIcon key={l.id} l={l}/>)}
           </div>
@@ -2383,10 +2381,7 @@ export default function App() {
   const [user,setUser]=useState(null);
   const [active,setActiveRaw]=useState('dashboard');
   const setActive = (page) => {
-    if (window.__newBuildAvailable) {
-      window.location.reload();
-      return; // kein Rendern mehr, Reload läuft
-    }
+    import('./main.jsx').then(m => m.reloadIfNewBuild?.()).catch(()=>{});
     setActiveRaw(page);
   };
   const [toastMsg,setToastMsg]=useState({msg:'',type:'success'});
diff --git a/frontend/src/calendar.jsx b/frontend/src/calendar.jsx
index 6511f0f..0b40518 100644
--- a/frontend/src/calendar.jsx
+++ b/frontend/src/calendar.jsx
@@ -172,7 +172,7 @@ export default function CalendarWidget() {
                 <span style={{ color:'rgba(255,255,255,0.35)', fontFamily:'monospace', fontSize:9, flexShrink:0 }}>
                   {nextEvent.allDay
                     ? nextEvent.dtstart.toLocaleDateString('de-DE',{day:'numeric',month:'short'})
-                    : nextEvent.dtstart.toLocaleTimeString('de-DE',{hour:'2-digit',minute:'2-digit'})
+                    : nextEvent.dtstart.toLocaleString('de-DE',{day:'2-digit',month:'2-digit',hour:'2-digit',minute:'2-digit'})
                   }
                 </span>
               </div>