Grids

All grids live in src/lib/ui/grids/. Each is a full-screen-capable MUI Dialog wrapping a masonry layout. They share a common pattern: adaptive column count (single centred card → responsive multi-column), empty-state illustration, and a fullscreen toggle.

Responsive behavior (see responsive-design.md): all grid items use responsive size objects — size={{ xs: 12, sm: 6, md: <count-based cols> }} — so cards render one per row on phones and two per row on small tablets; the count-based column logic below applies from md (900px) up. The dialogs force fullScreen below sm (600px) via useIsMobile("sm"), and their manual fullscreen toggle is hidden there.

Component	File	Purpose
ActivitiesGrid	ActivitiesGrid.tsx	Masonry grid of ActivityCaption cards. Not a dialog — renders inline on the home page. Adapts layout based on count (from md up): 1 activity → single card at 75% width; 2–3 → 4-column grid; 4+ → 3-column grid; below md the count-based width tricks give way to full-width single/double columns. Shows a NoActivityToShow empty state and includes ActivitiesGridButtons (full-width, stacked buttons on phones).
OrganizationSettingsGrid	OrganizationSettingsGrid.tsx	Dialog rendering a grid of OrgSettingsCaption tiles for org-level settings: edit languages, partners, contracts, defaults, and templates; export and import org data (JSON or ZIP); reset to demo data. Accepts server actions as props for each data operation. Includes a FilePicker for imports and a radio group for export format selection.
PartnersGrid	PartnersGrid.tsx	Dialog showing all org partner entities as PartnerCaption cards. The self-organisation (ID 0) is always listed first; remaining entries are sorted alphabetically. Includes a VAT lookup form for adding new partners and a fullscreen toggle.
ContractsGrid	ContractsGrid.tsx	Dialog showing all org contracts as ContractCard items in a masonry layout. Supports inline contract editing via a ContractDetails modal, adding new contracts, and fullscreen toggle. Displays contract count in the header.