Draw the panel as a panel
Five things a wall panel showed that a wall panel should not. **A tile's body no longer clips.** It scrolled, and a box that scrolls also cuts whatever crosses its edge — which took the glow off a lit button at exactly the width where the button filled its tile, and off a gauge's arc at exactly the height where the dial filled its own. Only what is written or listed asks for a scroller now; everything else is a picture drawn to fit, and what overflows is left to the frame, which clips at the tile's edge where a shadow has already faded out. The slider's phantom scrollbar goes with it. **The selector is a selector.** Named for what it does rather than what it is, and the choice it is holding is held in the dashboard's own primary — a pill that slides between the options rather than a grey one that had to be looked for. The stored type is untouched, so no document changes meaning. **The arrangement is held off the panel's edges**, by the same distance it holds between two widgets. The ground is not held off with it: a background covers the whole panel, and only what is arranged on it has a margin. No stored panel loses a row to it. **The rail is drawn on the panel.** It was chrome bolted to the edge of the screen beside the canvas — in the app's own design rather than the dashboard's, and on a scaled canvas not even lined up with it. It now takes a column out of the canvas the way the margin does, scaled with it and wearing its look. Which cell each widget sits in is unchanged; only how big a cell is. Two of these were the same mistake twice: an unlayered rule stating `position` for everything wearing a class — `.gl-surface` on a rail placed by a utility, and a blanket lift over every child of a pressable on a pill placed by `layoutId`. Both now say it one element at a time.
This commit is contained in:
@@ -51,7 +51,7 @@ export function Button({
|
||||
onClick={onClick}
|
||||
>
|
||||
<span className="gl-glow" aria-hidden />
|
||||
<span className="min-w-0 truncate">{children}</span>
|
||||
<span className="gl-lift min-w-0 truncate">{children}</span>
|
||||
</motion.button>
|
||||
)
|
||||
}
|
||||
@@ -181,11 +181,14 @@ export function Select({
|
||||
className="gl-field gl-pressable justify-between"
|
||||
>
|
||||
<span className="gl-glow" aria-hidden />
|
||||
<span className="min-w-0 truncate">
|
||||
<span className="gl-lift min-w-0 truncate">
|
||||
<SelectPrimitive.Value placeholder="Choose" />
|
||||
</span>
|
||||
<SelectPrimitive.Icon asChild>
|
||||
<ChevronDown className="size-4 shrink-0 opacity-60" aria-hidden />
|
||||
<ChevronDown
|
||||
className="gl-lift size-4 shrink-0 opacity-60"
|
||||
aria-hidden
|
||||
/>
|
||||
</SelectPrimitive.Icon>
|
||||
</SelectPrimitive.Trigger>
|
||||
<SelectPrimitive.Portal>
|
||||
|
||||
Reference in New Issue
Block a user