Fix mobile card layout polish

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 {
@@ -4723,6 +4712,10 @@ input[type="range"] {
 }
 
 @media (max-width: 760px) {
+    .dashboard-topbar {
+        display: none;
+    }
+
     body {
         -webkit-tap-highlight-color: transparent;
     }
@@ -4738,12 +4731,14 @@ input[type="range"] {
         gap: 0.25rem;
         min-height: 4.8rem;
         padding: 0.48rem;
-        border: 1px solid rgba(255, 255, 255, 0.18);
-        border-radius: 1.9rem;
-        background: rgba(20, 31, 46, 0.72);
-        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
-        backdrop-filter: blur(24px) saturate(1.35);
-        -webkit-backdrop-filter: blur(24px) saturate(1.35);
+        border: 1px solid rgba(255, 255, 255, 0.28);
+        border-radius: 2rem;
+        background:
+            linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)),
+            rgba(16, 25, 38, 0.58);
+        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22);
+        backdrop-filter: blur(32px) saturate(1.6);
+        -webkit-backdrop-filter: blur(32px) saturate(1.6);
     }
 
     .ios-tabbar a {
@@ -4761,9 +4756,10 @@ input[type="range"] {
     }
 
     .ios-tabbar a.active {
-        background: rgba(255, 255, 255, 0.14);
+        background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.1));
         color: #fff;
         transform: translateY(-1px);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
     }
 
     .ios-tabbar__icon {
@@ -4807,6 +4803,116 @@ input[type="range"] {
         padding: 1.05rem;
     }
 
+    .timeline-card {
+        grid-template-columns: 1fr;
+        overflow: visible;
+    }
+
+    .timeline-card--with-image {
+        padding: 0.9rem;
+    }
+
+    .timeline-card__body {
+        min-width: 0;
+    }
+
+    .timeline-card__body h3 {
+        padding-right: 5.2rem;
+        overflow-wrap: anywhere;
+    }
+
+    .timeline-card__comment,
+    .timeline-card__value {
+        overflow-wrap: anywhere;
+    }
+
+    .timeline-media-button {
+        height: auto;
+        min-height: 0;
+        max-height: none;
+        margin: 0 0 0.9rem;
+        aspect-ratio: auto;
+        background: rgba(255, 255, 255, 0.08);
+    }
+
+    .timeline-media-button .timeline-card__image {
+        width: 100%;
+        height: auto;
+        max-height: min(28rem, 68vh);
+        object-fit: contain;
+        object-position: center;
+    }
+
+    .timeline-card .signal-row,
+    .timeline-card--with-image .signal-row {
+        position: static;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        margin-top: 1rem;
+    }
+
+    .timeline-card .signal-pill {
+        width: auto;
+        min-width: 0;
+        height: auto;
+        min-height: 2.55rem;
+        padding: 0.42rem 0.72rem;
+        justify-content: center;
+    }
+
+    .timeline-card .signal-pill strong,
+    .timeline-card .signal-pill span {
+        display: inline;
+    }
+
+    .timeline-card .signal-pill__icon {
+        display: block;
+        width: 1rem;
+        height: 1rem;
+    }
+
+    .timeline-card__time-chip {
+        position: absolute;
+        top: 0.85rem;
+        right: 4.8rem;
+        left: auto;
+        display: inline-flex;
+        min-height: 2.35rem;
+        padding: 0 0.78rem;
+        border-radius: 999px;
+        background: rgba(8, 18, 30, 0.42);
+        border: 1px solid rgba(255, 255, 255, 0.16);
+        color: rgba(255, 255, 255, 0.86);
+    }
+
+    .timeline-card__delete,
+    .timeline-card--with-image .timeline-card__delete {
+        top: 0.75rem;
+        right: 0.75rem;
+    }
+
+    .timeline-card--with-image .timeline-card__time-chip {
+        top: 1.25rem;
+        right: 4.9rem;
+    }
+
+    .timeline-card--with-image .timeline-card__delete {
+        top: 1.05rem;
+        right: 1.05rem;
+    }
+
+    .sleep-phase-bar {
+        margin-top: 1rem;
+    }
+
+    .sleep-phase-bar__rest-label {
+        max-width: calc(100% - 5.8rem);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
     button,
     input,
     select,
@@ -4822,8 +4928,10 @@ input[type="range"] {
 @media (max-width: 760px) and (prefers-color-scheme: light) {
     .ios-tabbar {
         border-color: rgba(120, 146, 172, 0.22);
-        background: rgba(248, 251, 255, 0.78);
-        box-shadow: 0 20px 56px rgba(78, 105, 130, 0.18);
+        background:
+            linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.56)),
+            rgba(248, 251, 255, 0.7);
+        box-shadow: 0 24px 64px rgba(78, 105, 130, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
     }
 
     .ios-tabbar a {

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>