feat(quick-260916-bwo): Widget-Inhalt skaliert per Container-Queries (Uhr, Stoppuhr, Rechner), Punktgroesse der Uhrzeit einstellbar
- widget-wrapper.tsx: Rumpf ist Groessen-Container (@container-size) fuer cqw/cqh - clock-font-size.ts (neu): Grenzen 8..200, resolveClockTimeFontSizePt nur fuer endliche Zahlen (T-BWO-01) - clock-widget.tsx: Container-Query-Klassen mit clamp(), data-font-mode auto/fixed, Inline-pt nur bei Zahl, keine vw-Formel mehr, p-1 - stopwatch-widget.tsx: Anzeige per Container-Query, p-1.5; calculator-widget.tsx: Anzeige und Tasten skalieren, Tasten h-full min-h-7, p-1 - widget-settings-panel.tsx: Zahlenfeld Schriftgroesse der Uhrzeit (Blur/Enter, leer = automatisch, Fehlermeldung ausserhalb 8..200) - de.json/en.json: widgets.clock.fontSizeLabel/fontSizeAuto/fontSizeHint/fontSizeInvalid (Sie-Form, Waechter gruen) - Tests: Uhr +4, Stoppuhr +1, Rechner +1, widget-settings-panel.test.tsx neu (4) Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018N9CD3ebPKm1b32bPpBknY
This commit is contained in:
@@ -189,13 +189,12 @@ export function StopwatchWidget({ instanceId, config, isEditMode: _isEditMode }:
|
||||
const isRunning = sw.state === 'running';
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col overflow-hidden p-3">
|
||||
{/* Timer display */}
|
||||
<div className="flex h-full flex-col overflow-hidden p-1.5">
|
||||
{/* Timer display — quick-260916-bwo: skaliert per Container-Query mit der Kachel */}
|
||||
<div className="flex flex-1 items-center justify-center">
|
||||
<span
|
||||
data-testid="stopwatch-display"
|
||||
className="font-mono font-semibold tabular-nums text-foreground"
|
||||
style={{ fontSize: 'clamp(24px, 5vw, 48px)' }}
|
||||
className="font-mono font-semibold tabular-nums leading-none text-foreground text-[clamp(14px,min(16cqw,35cqh),400px)]"
|
||||
>
|
||||
{formatMs(displayMs)}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user