Fix total time layout in landscape and desktop modes

Remove flex: 1 from .time so the play button and total time form a tight
centered group instead of being spread apart. Increase font sizes, adjust
desktop grid to 45/55 split, and scale desktop play+time up 10%.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: johnmathews

journal/260425-total-time-layout-fix.md

@@ -0,0 +1,28 @@
+# Fix total time positioning in landscape and desktop layouts
+
+## What changed
+
+The total time display on the home screen had an awkward layout in landscape
+(mobile) and desktop modes: a large gap between the play button and the total
+time text, with the time pushed to the far right edge and rendered too small.
+
+### Root cause
+
+`.time` had `flex: 1` which made it expand to fill all remaining row space,
+and the inherited `text-align: right` pushed the text to the far edge of
+that expanded container.
+
+### Fix
+
+**Landscape mobile** (`orientation: landscape, max-height: 500px`):
+- `.time`: `flex: 1` -> `flex: none` (content width, not full row)
+- Font size increased: `min(13vw, 7rem)` -> `min(15vw, 8rem)`
+- Added `text-align: center`
+- Play button slightly smaller, row gap tightened
+
+**Desktop** (`min-width: 1024px`):
+- Same `flex: none` + `text-align: center` fix
+- Grid columns changed from 50/50 to 45/55 (cards / total-time)
+- Play button and time both scaled up 10%
+
+The play button and total time are now a tight centered group in both layouts.

src/routes/+page.svelte

@@ -878,7 +878,7 @@
 
   .home {
    display: grid;
-   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+   grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
    grid-template-rows: auto 1fr;
    gap: 0 clamp(40px, 5vw, 80px);
    flex: 1;
@@ -926,13 +926,13 @@
   }
 
   .home :global(.total-time-display .play-btn) {
-   width: clamp(80px, 10vw, 160px);
+   width: clamp(88px, 11vw, 176px);
   }
 
   .home :global(.total-time-display .time) {
-   flex: 1;
-   min-width: 0;
-   font-size: clamp(7rem, 12vw, 20rem);
+   flex: none;
+   font-size: clamp(7.7rem, 13.2vw, 22rem);
+   text-align: center;
   }
 
   .toolbar :global(svg) {
@@ -1002,17 +1002,17 @@
 
   .home :global(.total-time-display .row) {
    justify-content: center;
-   gap: 20px;
+   gap: 16px;
   }
 
   .home :global(.total-time-display .play-btn) {
-   width: min(10vw, 5rem);
+   width: min(8vw, 4.5rem);
   }
 
   .home :global(.total-time-display .time) {
-   flex: 1;
-   min-width: 0;
-   font-size: min(13vw, 7rem);
+   flex: none;
+   font-size: min(15vw, 8rem);
+   text-align: center;
   }
  }
 </style>