1 files changed, 18 insertions, 19 deletions
diff --git a/src/components/TimerView.tsx b/src/components/TimerView.tsx
index 973f09f..896c03a 100644
--- a/src/components/TimerView.tsx
+++ b/src/components/TimerView.tsx
@@ -1,3 +1,4 @@
+import type { CSSProperties } from 'react';
 import { invoke } from '@tauri-apps/api/core';
 import { useTimerStore, TimerPhase } from '../store/timerStore';
 import { useTaskStore } from '../store/taskStore';
@@ -7,6 +8,18 @@ const STROKE = 8;
 const RADIUS = (RING_SIZE - STROKE) / 2;
 const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
 
+const TASK_LABEL_STYLE: CSSProperties = {
+  fontFamily: 'var(--font-sans)',
+  fontSize: '14px',
+  color: 'var(--fg-3)',
+  maxWidth: '320px',
+  textAlign: 'center',
+  minHeight: '20px',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+};
+
 function phaseLabel(phase: TimerPhase): string {
   switch (phase) {
     case 'work': return 'Focus';
@@ -60,9 +73,9 @@ export function TimerView() {
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
-        gap: '24px',
+        gap: '20px',
         flex: 1,
-        padding: '32px',
+        padding: '24px 20px',
       }}
     >
       {/* Eyebrow */}
@@ -142,25 +155,10 @@ export function TimerView() {
       </div>
 
       {/* Current task name */}
-      {currentTask && (
-        <span
-          style={{
-            fontFamily: 'var(--font-sans)',
-            fontSize: '14px',
-            color: 'var(--fg-3)',
-            maxWidth: '320px',
-            textAlign: 'center',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {currentTask.name}
-        </span>
-      )}
+      <span style={TASK_LABEL_STYLE}>{currentTask ? currentTask.name : 'No task selected'}</span>
 
       {/* Controls */}
-      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap' }}>
         <button
           onClick={running ? handlePause : handleStart}
           style={{
@@ -213,6 +211,7 @@ function GhostButton({
         fontSize: '14px',
         fontWeight: 500,
         padding: '8px 16px',
+        minWidth: '72px',
         borderRadius: 'var(--r-1)',
         border: '1px solid var(--line-2)',
         background: 'transparent',