Fix proportional sleep bar and image overlays

assets/css/app.css

@@ -890,7 +890,7 @@ body.page-dashboard .content {
     display: flex;
     min-height: 2.35rem;
     margin-top: 1.55rem;
-    overflow: hidden;
+    overflow: visible;
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, 0.14);
     background: rgba(255, 255, 255, 0.08);
@@ -898,13 +898,14 @@ body.page-dashboard .content {
 
 .sleep-phase-bar__target {
     position: absolute;
-    left: var(--sleep-optimal-left, 100%);
+    left: min(var(--sleep-optimal-left, 100%), calc(100% - 2px));
     top: -1.28rem;
     bottom: 0;
     width: 0;
     border-left: 2px solid rgba(255, 255, 255, 0.92);
     filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
     pointer-events: none;
+    z-index: 2;
 }
 
 .sleep-phase-bar__target span {
@@ -924,7 +925,8 @@ body.page-dashboard .content {
     align-items: center;
     justify-content: center;
     gap: 0.25rem;
-    min-width: max-content;
+    min-width: 0;
+    flex-basis: 0;
     padding: 0.35rem 0.65rem;
     color: rgba(255, 255, 255, 0.94);
     font-size: 0.82rem;
@@ -934,6 +936,7 @@ body.page-dashboard .content {
 }
 
 .sleep-phase-bar__segment--deep {
+    border-radius: 999px 0 0 999px;
     background: linear-gradient(135deg, rgba(44, 82, 180, 0.92), rgba(38, 52, 124, 0.92));
 }
 
@@ -948,9 +951,14 @@ body.page-dashboard .content {
 .sleep-phase-bar__segment--rest {
     min-width: 0;
     padding: 0;
+    border-radius: 0 999px 999px 0;
     background: rgba(255, 255, 255, 0.1);
 }
 
+.sleep-phase-bar__segment:last-of-type {
+    border-radius: 0 999px 999px 0;
+}
+
 .media-lightbox[hidden] {
     display: none;
 }
@@ -2297,7 +2305,7 @@ body.page-dashboard .content {
 
     .timeline-card--with-image .timeline-card__time-chip,
     .timeline-card--with-image .timeline-card__delete {
-        top: 0.75rem;
+        top: 2.05rem;
     }
 
     .timeline-card--with-image .timeline-card__time-chip {
@@ -2310,7 +2318,7 @@ body.page-dashboard .content {
     }
 
     .timeline-card--with-image .timeline-card__delete {
-        right: 0.75rem;
+        right: 1.6rem;
     }
 
     .timeline-card__delete .ghost-button {
@@ -2333,8 +2341,8 @@ body.page-dashboard .content {
     }
 
     .timeline-card--with-image .signal-row {
-        top: 0.75rem;
-        left: 0.75rem;
+        top: 2.05rem;
+        left: 2.05rem;
     }
 
     .timeline-card .signal-pill {