Layout and responsive behavior

Workspace widths

Responsive contracts

Components use sm and larger Tailwind variants to change text, insets, menu positions, and control sizes. The theme does not define custom breakpoints. The screenshots verify representative desktop and 390px phone layouts; they do not establish that every intermediate width and zoom combination has passed.

Creating a new screen

• Reuse AppHeader and AppFooter, then PageHero for the page title and contextual help. Put the workspace within the relevant existing width.
• Use min-width: 0 for flexible text containers; permit task labels to wrap and retain visible controls.
• On a phone, prioritize the task content and the immediate action. Keep filtering and navigation discoverable.
• Preserve contextual clearances around sticky toolbars. CurrentTimeMarker uses 146px clearance below 640px and 158px otherwise when positioning the agenda.
• A calendar remains a time-based spatial view on phones. Do not silently replace it with an unrelated information hierarchy.

Overflow boundaries

Test menus at the edges of the viewport, long titles in flex rows, two overlapping agenda entries, and fixed notifications above phone safe areas. The capture harness adds room around isolated specimens solely to show an open popover; that extra padding is not an application spacing rule.