Fix time duration and visuals

frontend/src/components/stats/SleepTimetable.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useStats } from '../../hooks/useStats';
+import { timeToMinutes } from '../../utils/time';
 
 interface TimetableProps {
   from_date: string;
@@ -30,18 +31,26 @@ const Timetable: React.FC<TimetableProps> = ({ from_date, to_date, day_start, da
         {Object.keys(groupedSlots).map((date) => (
           <div key={date} className="mb-6 last:mb-0">
             <h4 className="text-sm font-medium text-gray-500 mb-2">{date}</h4>
-            <div className="grid grid-cols-[repeat(auto-fill,minmax(20px,1fr))] gap-1">
-              {groupedSlots[date].map((slot: any) => (
-<div
-  key={`${date}-${slot.slot_start}`}
-  className={`h-6 w-full rounded-sm ${
-    slot.sleeping ? 'bg-blue-900' : 'bg-gray-100'
-  }`}
-  title={`${slot.slot_start} - ${slot.slot_end}`}
->
-  <span className="text-[10px] text-white/50">{slot.slot_start}</span>
-</div>
-              ))}
+            <div className="flex w-full h-8 gap-1 bg-gray-50 p-1 rounded-lg overflow-hidden">
+              {groupedSlots[date].map((slot: any) => {
+                const duration = Math.max(1, timeToMinutes(slot.slot_end) - timeToMinutes(slot.slot_start));
+
+                return (
+                  <div
+                    key={`${date}-${slot.slot_start}`}
+                    className={`h-full rounded-sm transition-all duration-300 cursor-help ${
+                      slot.sleeping ? 'bg-blue-900' : 'bg-gray-200'
+                    }`}
+                    style={{ flex: duration }}
+                    title={`${slot.slot_start} - ${slot.slot_end} (${duration}m)`}
+                  >
+                    {/* Only show text if there's enough space */}
+                    <div className="overflow-hidden whitespace-nowrap text-[10px] leading-none flex items-center justify-center h-full px-1">
+                       {duration > 40 && <span className="text-white/70">{slot.slot_start}</span>}
+                    </div>
+                  </div>
+                );
+              })}
             </div>
           </div>
         ))}