From 612959dcb223d544f6e6aeb33fa561d6efa20b22 Mon Sep 17 00:00:00 2001
From: fleizean <eyagiz@student.42kocaeli.com.tr>
Date: Sun, 20 Sep 2026 14:29:33 +0300
Subject: [PATCH] fix(home): rest the timer controls on the bottom nav

The Home page did not fill the scrolling area, so flex-1 did nothing and the
controls sat mid-screen above a 128px dead zone (pb-32). The page now fills the
area (min-h-full), the dial takes the leftover height and centres its ring, and
the controls group is pushed to the bottom with mt-auto. The bottom padding is
sized to the fixed nav (about 85px) instead of the old oversized one.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/renderer/src/features/timer/TimerPage.tsx                | 5 +++--
 src/renderer/src/features/timer/components/TimerControls.tsx | 3 ++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/features/timer/TimerPage.tsx b/src/renderer/src/features/timer/TimerPage.tsx
index 88f27f6..1fe5da7 100644
--- a/src/renderer/src/features/timer/TimerPage.tsx
+++ b/src/renderer/src/features/timer/TimerPage.tsx
@@ -218,7 +218,7 @@ export default function TimerPage(): ReactElement {
     };
 
     return (
-        <div className="flex flex-col">
+        <div className="flex min-h-full flex-col">
             <HomeHeader
                 date={selectedDate}
                 mode={mode}
@@ -226,7 +226,8 @@ export default function TimerPage(): ReactElement {
                 onToggleMode={() => { setMode.mutate(mode === 'pomodoro' ? 'work' : 'pomodoro'); }}
             />
 
-            <div className="flex flex-1 flex-col gap-4 px-6 pt-4 pb-32">
+            {/* pb-[5.5rem] clears the fixed bottom nav (about 85px), so the controls rest just above it at any window height. */}
+            <div className="flex flex-1 flex-col gap-4 px-6 pt-4 pb-[5.5rem]">
                 <StatCards
                     dailyTargetSeconds={settings.data?.dailyTargetSeconds ?? DEFAULT_SETTINGS.dailyTargetSeconds}
                     loggedSeconds={loggedSeconds}
diff --git a/src/renderer/src/features/timer/components/TimerControls.tsx b/src/renderer/src/features/timer/components/TimerControls.tsx
index 13811f6..b0480de 100644
--- a/src/renderer/src/features/timer/components/TimerControls.tsx
+++ b/src/renderer/src/features/timer/components/TimerControls.tsx
@@ -35,7 +35,8 @@ interface TimerControlsProps {
 
 export default function TimerControls(props: TimerControlsProps): ReactElement {
     return (
-        <div className="flex flex-col gap-3">
+        // mt-auto: whatever height the screen has left goes above the controls, so they rest on the bottom nav.
+        <div className="mt-auto flex flex-col gap-3">
             <div className="flex items-center justify-between gap-4">
                 <button
                     type="button"