fix: restore timer controls visibilityHEADmaster

2 files changed, 19 insertions, 3 deletions

diff --git a/src/components/AmbientControl.tsx b/src/components/AmbientControl.tsx
index dd58235..56a2340 100644
--- a/src/components/AmbientControl.tsx
+++ b/src/components/AmbientControl.tsx
@@ -56,16 +56,21 @@ export function AmbientControl() {
         onChange={handleSoundChange}
         disabled={!available}
         style={{
+          appearance: 'none',
+          WebkitAppearance: 'none',
+          MozAppearance: 'none',
+          colorScheme: 'dark',
           fontFamily: 'var(--font-sans)',
           fontSize: '13px',
           color: available ? 'var(--fg-1)' : 'var(--fg-4)',
-          background: 'var(--ink-3)',
+          background: 'var(--ink-2)',
           border: '1px solid var(--line-2)',
           borderRadius: 'var(--r-2)',
-          padding: '6px 10px',
+          padding: '8px 32px 8px 10px',
           outline: 'none',
           minWidth: '132px',
           flex: '0 0 auto',
+          lineHeight: 1.3,
         }}
       >
         {SOUND_OPTIONS.map((option) => (
diff --git a/src/components/TimerView.tsx b/src/components/TimerView.tsx
index b43973c..47c104a 100644
--- a/src/components/TimerView.tsx
+++ b/src/components/TimerView.tsx
@@ -2,6 +2,7 @@ import type { CSSProperties } from 'react';
 import { invoke } from '@tauri-apps/api/core';
 import { useTimerStore, TimerPhase } from '../store/timerStore';
 import { useTaskStore } from '../store/taskStore';
+import { AmbientControl } from './AmbientControl';
 
 const RING_SIZE = 280;
 const STROKE = 8;
@@ -78,6 +79,10 @@ export function TimerView() {
     await invoke('reset_timer');
     await syncFromBackend();
   };
+  const handleClearSessions = async () => {
+    await invoke('clear_session_count');
+    await syncFromBackend();
+  };
 
   return (
     <div
@@ -88,9 +93,14 @@ export function TimerView() {
         justifyContent: 'center',
         gap: '20px',
         flex: 1,
-        padding: '24px 20px',
+        padding: '24px 20px 32px',
+        overflow: 'auto',
       }}
     >
+      <div style={{ width: 'min(100%, 520px)' }}>
+        <AmbientControl />
+      </div>
+
       {/* Eyebrow */}
       <span className="eyebrow" style={{ letterSpacing: '0.18em' }}>
         {eyebrowText(phase, sessionCount)}
@@ -204,6 +214,7 @@ export function TimerView() {
 
         <GhostButton onClick={handleSkip}>Skip</GhostButton>
         <GhostButton onClick={handleReset}>Reset</GhostButton>
+        <GhostButton onClick={handleClearSessions}>Clear Streak</GhostButton>
       </div>
     </div>
   );