Make sleep phase bars proportional

assets/css/app.css

@@ -926,13 +926,38 @@ body.page-dashboard .content {
     justify-content: center;
     gap: 0.25rem;
     min-width: 0;
-    flex-basis: 0;
+    flex: 0 0 var(--sleep-segment-width, auto);
     padding: 0.35rem 0.65rem;
     color: rgba(255, 255, 255, 0.94);
     font-size: 0.82rem;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    position: relative;
+}
+
+.sleep-phase-bar__segment::after {
+    content: attr(data-tooltip);
+    position: fixed;
+    left: 50%;
+    bottom: calc(1.2rem + env(safe-area-inset-bottom));
+    z-index: 1400;
+    max-width: min(18rem, calc(100vw - 2rem));
+    padding: 0.55rem 0.75rem;
+    border-radius: 999px;
+    background: rgba(6, 16, 28, 0.92);
+    color: #fff;
+    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32);
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(-50%) translateY(0.35rem);
+    transition: opacity 140ms ease, transform 140ms ease;
+}
+
+.sleep-phase-bar__segment:hover::after,
+.sleep-phase-bar__segment.is-tooltip-visible::after {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
 }
 
 .sleep-phase-bar__segment--deep {