Make sleep phase bars proportional

assets/js/app.js

@@ -1703,6 +1703,31 @@
         });
     }
 
+    function initSleepPhaseTooltips() {
+        document.querySelectorAll(".sleep-phase-bar__segment[data-tooltip]").forEach(segment => {
+            segment.addEventListener("click", event => {
+                event.preventDefault();
+                event.stopPropagation();
+                document.querySelectorAll(".sleep-phase-bar__segment.is-tooltip-visible").forEach(active => {
+                    if (active !== segment) {
+                        active.classList.remove("is-tooltip-visible");
+                    }
+                });
+                segment.classList.toggle("is-tooltip-visible");
+            });
+        });
+
+        document.addEventListener("click", event => {
+            if (event.target.closest(".sleep-phase-bar__segment[data-tooltip]")) {
+                return;
+            }
+
+            document.querySelectorAll(".sleep-phase-bar__segment.is-tooltip-visible").forEach(segment => {
+                segment.classList.remove("is-tooltip-visible");
+            });
+        });
+    }
+
     function csrfToken() {
         return document.querySelector('meta[name="csrf-token"]')?.getAttribute("content") || "";
     }
@@ -2036,6 +2061,7 @@
     initOptionsPanels();
     initHealthImportStatus();
     initMediaLightbox();
+    initSleepPhaseTooltips();
     initSportTypeManager();
     initPwaShell();
     initPullToRefresh();