Bohdan Triapitsyn
68f1c1efe3
Keep always-on instructions concise and route specialized work through focused skills. Split large skills into progressive references and add dedicated change, desktop, sync, and performance guidance.
54 lines
1.9 KiB
Markdown
54 lines
1.9 KiB
Markdown
# Settings Layout
|
|
|
|
## Visual Hierarchy
|
|
|
|
- Prefer spacing and typography over boxed backgrounds.
|
|
- Avoid wrappers that mix unrelated controls.
|
|
- Omit redundant headings when page context already names the controls.
|
|
- Keep controls compact and row chrome minimal.
|
|
- Place checkbox/radio state before its label.
|
|
- Dim inactive option labels subtly; do not use transform jumps.
|
|
|
|
## Typography
|
|
|
|
Use classes from `packages/ui/src/lib/typography.ts`:
|
|
|
|
- Page title: `typography-ui-header font-semibold text-foreground`
|
|
- Section header: `typography-ui-header font-medium text-foreground`
|
|
- Control group: `typography-ui-header font-medium` or `font-normal` when needed
|
|
- Values/labels: `typography-ui-label text-foreground`
|
|
- Helper/meta: `typography-meta text-muted-foreground` or `typography-small text-muted-foreground`
|
|
- Numeric values: add `tabular-nums`
|
|
|
|
## Spacing
|
|
|
|
- Keep section-to-section spacing larger than header-to-content spacing.
|
|
- Typical flat section: header `mb-1 px-1`, content `pt-0 pb-2 px-2`, outer `mb-8`.
|
|
- Group related controls with `space-y-3` and modest internal padding such as `p-2`.
|
|
- Avoid elevated backgrounds, rounded rows, and hover fills without explicit UX value.
|
|
|
|
## Alignment
|
|
|
|
For consistent desktop columns:
|
|
|
|
```tsx
|
|
<div className="flex items-center gap-8 py-1.5">
|
|
<span className="w-56 shrink-0 typography-ui-label">{t(labelKey)}</span>
|
|
<div className="flex w-fit items-center gap-2">...</div>
|
|
</div>
|
|
```
|
|
|
|
- Let narrow layouts stack or wrap.
|
|
- Compare the complete control footprint, including adjacent actions, when matching widths.
|
|
- Disable only the unavailable control; do not dim the entire label row by default.
|
|
|
|
## Responsive Grids
|
|
|
|
Use a one-column base and introduce columns at a deliberate breakpoint:
|
|
|
|
```tsx
|
|
<div className="grid grid-cols-1 gap-2 md:grid-cols-[14rem_auto] md:gap-x-8" />
|
|
```
|
|
|
|
Template fields commonly use `grid grid-cols-1 gap-2 md:grid-cols-2 md:gap-3` with flat `p-2` cells.
|