Fix mobile card layout polish

assets/css/app.css

@@ -4712,6 +4712,10 @@ input[type="range"] {
 }
 
 @media (max-width: 760px) {
+    .dashboard-topbar {
+        display: none;
+    }
+
     body {
         -webkit-tap-highlight-color: transparent;
     }
@@ -4727,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 {
@@ -4750,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 {
@@ -4796,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,
@@ -4811,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 {