Layout and responsive structure

Dashboard layout

The dashboard header is fixed at 24px from both top corners. Main content starts at 112px, uses 24px horizontal padding and a max-width of 1024px. The search composer is capped at 672px. The central stack uses 40px gaps.

The bookmark grid uses repeat(auto-fit,minmax(4.5rem,5.5rem)) with 24px horizontal/vertical gaps. Tiles are 64px square. The grid gains or loses columns without changing the icon size. Board chips wrap; the first five boards appear directly and subsequent boards move to an overflow menu.

Settings layout

Settings has a centered logo header and a 672px maximum card, with 40px inner padding and 28px corners. Inner panels generally use 24px padding. These dimensions remain generous on phones and reduce the usable form width; the captures preserve that behavior.

Dialog layout

Dashboard editors use a fixed centered overlay with 24px viewport gutters, max-width 576px, 32px card padding and 24px corners. They do not have a height cap or scrolling container. Small-height screens and long open icon lists can overflow the viewport. This is documented as an implementation limitation rather than hidden by capture CSS.

Layering

Source references