Dashboard: Kalender naechster Eintrag mit TT.MM. HH:MM, Schnellzugriff 4 pro Reihe zentriert

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'});