From 4eed74b8bbe27ed6f9f3aae03f8bac538cb3bea7 Mon Sep 17 00:00:00 2001
From: Florian Heinz <mail@hnz.io>
Date: Thu, 21 May 2026 18:36:06 +0200
Subject: [PATCH] Make sleep fill a normal block

---
 assets/css/app.css            | 19 ++++---------------
 templates/pages/dashboard.php |  4 ++--
 2 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 4aaf5f2..45434ef 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -1004,26 +1004,15 @@ body.page-dashboard .content {
     background: rgba(255, 255, 255, 0.08);
 }
 
-.sleep-phase-bar::before {
-    content: "";
-    position: absolute;
-    inset: 0 auto 0 0;
-    width: var(--sleep-actual-width, 0);
-    min-width: 0.2rem;
-    border-radius: inherit;
-    background: linear-gradient(135deg, rgba(90, 188, 242, 0.9), rgba(44, 126, 190, 0.9));
-}
-
 .sleep-phase-bar__fill {
-    position: absolute;
-    inset: 0 auto 0 0;
-    width: var(--sleep-actual-width, 0);
-    min-width: 0.18rem;
+    display: block;
+    height: 100%;
+    min-width: 0.28rem;
+    max-width: 100%;
     overflow: hidden;
     border-radius: inherit;
     background: linear-gradient(135deg, rgba(90, 188, 242, 0.92), rgba(44, 126, 190, 0.92));
     box-shadow: 0 10px 22px rgba(44, 126, 190, 0.22);
-    z-index: 1;
 }
 
 .sleep-phase-bar__target {
diff --git a/templates/pages/dashboard.php b/templates/pages/dashboard.php
index 9f55ca6..0203365 100644
--- a/templates/pages/dashboard.php
+++ b/templates/pages/dashboard.php
@@ -221,8 +221,8 @@ $formatBalanceValue = static function (?array $entry) use ($settings): string {
                                 <?php endif; ?>
 
                                 <?php if ($eventType === 'sleep' && $sleepActualTotal > 0): ?>
-                                    <div class="sleep-phase-bar" aria-label="Schlafdauer" style="--sleep-optimal-left: <?= e((string) $sleepOptimalPercent) ?>%; --sleep-actual-width: <?= e((string) $sleepActualPercent) ?>%">
-                                        <span class="sleep-phase-bar__fill" aria-hidden="true"></span>
+                                    <div class="sleep-phase-bar" aria-label="Schlafdauer" style="--sleep-optimal-left: <?= e((string) $sleepOptimalPercent) ?>%">
+                                        <span class="sleep-phase-bar__fill" style="width: <?= e((string) $sleepActualPercent) ?>%" aria-hidden="true"></span>
                                         <span class="sleep-phase-bar__target"><span><?= e(format_duration_hours($optimalSleepHours)) ?></span></span>
                                         <?php if ($sleepPhaseRemainder > 0): ?>
                                             <span class="sleep-phase-bar__rest-label">noch <?= e(format_duration_hours($sleepPhaseRemainder)) ?> bis Skalenende</span>