Layout

coach-admin is a desktop-first tool that coaches also open on a phone between sessions. Layouts start from a single column and add columns and a fixed sidebar as the screen grows.

Breakpoints

Mobile first: a utility with a prefix applies from that width up.

• xs: 480px and upLarge phones. Replaces coach-admin's 375/425/480px phone rules.
• sm: 640px and upSmall tablets in portrait. Two-column forms become possible.
• md: 768px and upTablets. Grid goes from 4 to 8 columns. coach-admin's max-width: 768px rules become "below md".
• lg: 1024px and upLaptops. The sidebar is always visible; grid has 12 columns.
• xl: 1280px and upDesktops. Side panels sit next to the content.
• 2xl: 1536px and upWide screens. Content stops growing; margins absorb the rest.

Grid

4 columns on phones, 8 from md, 12 from lg. Gutters are gap-4 (16px), and gap-6 (24px) from lg. Resize the window to see it change.

App frame

• Sidebar on the start side: always visible from lg, in a sheet below it. It mirrors to the right in RTL.
• Header with the page title, primary action and search.
• Content with px-4 page margins on phones, px-6 from sm and px-10 from lg.

Page templates

Four templates cover nearly every screen in coach-admin. Each is drawn with the sidebar, so switch to RTL to see them mirror.

• Dashboard: summary first. Stats in a row, then the one chart or list that needs attention today.
• List: search and filters above the table, the primary action at the end of that row, pagination below.
• Detail: a header with the client or program name and its actions, tabs for the sections, an optional side panel from xl.
• Form: one column, at most two from sm for short related fields (first and last name). Actions at the end: the primary action last.

Related: Spacing, RTL.