#247
Phone width
The same record list inside a narrow slot, to show it stacking because the list reads its own width.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Phone width" pattern (@codeatlasdev/ui demo #247, layout/record-list) in my app.
Call get_demo({ ids: ["#247"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Checking how a dense record list reads on a phone before shipping it, without resizing the browser.
Keep these library parts, with the props and tokens the demo uses:
- Avatar, DropdownMenu, DropdownMenuItem, IconButton, RecordCell, RecordList, RecordRow from "@codeatlasdev/ui"
Behaviour to keep:
- Wrapper `<div class="slot">` with `inline-size: min(100%, 21.5rem)`
- `<RecordList` with `columns="minmax(0,1.3fr) minmax(0,1fr) 7rem 7rem 2.75rem"`
- `labels={['Key', 'Prefix', 'Last used', 'Created']}` and `aria-label="API keys"`
- 2 rows from `keys` (Production key, CI pipeline) with `<Avatar alt={key.name} size="sm" />` in `{#snippet identity()}`
- `<RecordCell label="Prefix">`, `<RecordCell label="Last used">` and `<RecordCell label="Created">`; `{#snippet actions()}` holds a `<DropdownMenu align="end">` with a `Revoke` item
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Avatar
@codeatlasdev/ui - DropdownMenu
@codeatlasdev/ui - DropdownMenuItem
@codeatlasdev/ui - IconButton
@codeatlasdev/ui - RecordCell
@codeatlasdev/ui - RecordList
@codeatlasdev/ui - RecordRow
@codeatlasdev/ui
How it is built
- Wrapper `<div class="slot">` with `inline-size: min(100%, 21.5rem)`
- `<RecordList` with `columns="minmax(0,1.3fr) minmax(0,1fr) 7rem 7rem 2.75rem"`
- `labels={['Key', 'Prefix', 'Last used', 'Created']}` and `aria-label="API keys"`
- 2 rows from `keys` (Production key, CI pipeline) with `<Avatar alt={key.name} size="sm" />` in `{#snippet identity()}`
- `<RecordCell label="Prefix">`, `<RecordCell label="Last used">` and `<RecordCell label="Created">`; `{#snippet actions()}` holds a `<DropdownMenu align="end">` with a `Revoke` item
Related
Loading source.