jerry/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-10-29 13:31:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(desktop-next): wrap the token table into three equal columns

Browse Source 
The value column had been holding a single unbroken gradient literal, which under
the default `auto` layout claimed most of the table's width and pushed the other
two columns into a scroll. Switch to `table-fixed` with an explicit colgroup so
the thirds hold regardless of content, and let cells wrap instead of scrolling —
the horizontal scroll container is gone.

The value uses `break-all` rather than `break-words`: a gradient is one token with
no spaces to break at, so word-boundary wrapping still overflows. The swatch stays
pinned to the first line while the value wraps beside it, so the kind label moves
under the value rather than competing with it for the same line.

Verified equal columns and zero overflowing cells at 380, 480, 700, 1024, and
1280px.

Signed-off-by: morgmart <98432065+morgmart@users.noreply.github.com>
This commit is contained in:
morgmart
2026-09-03 18:43:00 -07:00
parent 69149c7a1b
commit 4c2e417b37
1 changed files with 79 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
desktop-next/src/features/design-system/ui/ColorTablePage.tsx
View File

@@ -122,79 +122,93 @@ function TokenTable({
let lastGroup: string | null = null;
return (
/* Scrolls horizontally rather than wrapping cells: a table of values is
unreadable once a hex breaks across two lines. */
<div className="-mx-1 overflow-x-auto px-1">
<table className="w-full min-w-[34rem] border-collapse text-left">
<caption className="sr-only">
Colour tokens, the base token each resolves through, and the value it
paints
</caption>
<thead>
<tr className="border-tertiary border-b">
<th scope="col" className="py-2 pr-4 text-label text-tertiary">
Token
</th>
<th scope="col" className="py-2 pr-4 text-label text-tertiary">
Base
</th>
<th scope="col" className="py-2 text-label text-tertiary">
Value
</th>
</tr>
</thead>
<tbody>
{rows.map((row) => {
const token = resolved.get(row.variable);
const headingRow =
showGroups && row.group !== lastGroup ? row.group : null;
lastGroup = row.group;
/* `table-fixed` with three equal columns: the natural `auto` layout gives
the value column most of the width, because one gradient literal is longer
than every other cell in the table combined. Fixed makes the thirds hold
regardless of content, and cells wrap instead of scrolling. */
<table className="w-full table-fixed border-collapse text-left">
<caption className="sr-only">
Colour tokens, the base token each resolves through, and the value it
paints
</caption>
<colgroup>
<col className="w-1/3" />
<col className="w-1/3" />
<col className="w-1/3" />
</colgroup>
<thead>
<tr className="border-tertiary border-b">
<th scope="col" className="py-2 pr-4 text-label text-tertiary">
Token
</th>
<th scope="col" className="py-2 pr-4 text-label text-tertiary">
Base
</th>
<th scope="col" className="py-2 text-label text-tertiary">
Value
</th>
</tr>
</thead>
<tbody>
{rows.map((row) => {
const token = resolved.get(row.variable);
const headingRow =
showGroups && row.group !== lastGroup ? row.group : null;
lastGroup = row.group;
return (
<Fragment key={row.variable}>
{headingRow ? (
<tr>
<th
scope="colgroup"
colSpan={3}
className="pt-6 pb-1 text-meta text-tertiary"
>
{headingRow}
</th>
</tr>
) : null}
<tr className="border-tertiary border-b">
<td className="py-2.5 pr-4 align-top whitespace-nowrap">
<code className="text-code text-primary">{row.token}</code>
</td>
<td className="py-2.5 pr-4 align-top whitespace-nowrap">
{token?.pointsAtVariable ? (
<code className="text-code text-secondary">
{humanizeVariable(token.pointsAtVariable)}
</code>
) : (
<span className="text-caption text-tertiary">—</span>
)}
</td>
<td className="py-2.5 align-top">
<span className="flex min-w-0 items-center gap-2">
return (
<Fragment key={row.variable}>
{headingRow ? (
<tr>
<th
scope="colgroup"
colSpan={3}
className="pt-6 pb-1 text-meta text-tertiary"
>
{headingRow}
</th>
</tr>
) : null}
<tr className="border-tertiary border-b">
<td className="py-2.5 pr-4 align-top">
<code className="break-words text-code text-primary">
{row.token}
</code>
</td>
<td className="py-2.5 pr-4 align-top">
{token?.pointsAtVariable ? (
<code className="break-words text-code text-secondary">
{humanizeVariable(token.pointsAtVariable)}
</code>
) : (
<span className="text-caption text-tertiary">—</span>
)}
</td>
<td className="py-2.5 align-top">
<span className="flex min-w-0 items-start gap-2">
<span className="mt-0.5 shrink-0">
<ValueSwatch value={token?.value ?? "transparent"} />
<code className="truncate text-code text-secondary">
</span>
<span className="flex min-w-0 flex-col gap-0.5">
{/* `break-all`, not `break-words`: a gradient literal is
one unbroken token with no spaces to break at, so
word-boundary wrapping would overflow the column. */}
<code className="break-all text-code text-secondary">
{token?.value ?? "…"}
</code>
{token && !isHex(token.value) ? (
<span className="shrink-0 text-meta text-tertiary">
<span className="text-meta text-tertiary">
{describeValueKind(token.value)}
</span>
) : null}
</span>
</td>
</tr>
</Fragment>
);
})}
</tbody>
</table>
</div>
</span>
</td>
</tr>
</Fragment>
);
})}
</tbody>
</table>
);
}