Timer Card — Wide Layout Exploration

How should the card use horizontal space on larger screens?

Works fine on mobile, but on a wide monitor this wastes space — cards are tall, scannable info is buried, and you can only see a few at a time in a list.

Everything on one line. Maximum density — great for power users scanning a long list. Trade-off: description gets truncated hard, and it can feel cramped. Best for: table-like views, dashboards, "active timers" panels.

Row 1: matter identity + timer (the two things you need to scan). Row 2: description + tags (the context you read when you need it). This preserves hierarchy while using width. Timer anchored to the right creates a consistent scan column.

Left: identity + tags (who/what). Center: description (context). Right: timer (action). Creates clear columns that align across multiple cards. Excellent for scannability in a list. Trade-off: needs ~700px minimum to breathe.

Same card adapts from narrow stacked layout to wide grid layout. Drag the bottom-right corner to resize. Below ~600px it stacks; above it spreads out. This is probably the right answer if you need to support both mobile and desktop.

The real test: how do these look stacked as a list? Variant 2 (two-row) balances density with readability. Variant 1 (single row) is densest. Variant 3 (three-zone) creates the best column alignment.