Draw the colour disc inside its tile rather than past it
The disc was sized against its parents in percentages, and every box between it and the tile is sized by what is in it — so the chain never resolved, the brightness slider grew, and the tile scrolled with half a disc showing. Container units are the tile's own height whatever sits in between, so the widget now fits exactly. Two guards behind it, since both are things a picture can fail silently: nothing on a panel of pictures may overflow its tile, and Touch has to actually make a control bigger while leaving what it publishes alone.
This commit is contained in:
@@ -118,6 +118,29 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* The colour widget: a disc, and brightness beside it.
|
||||
*
|
||||
* Sized in container units rather than percentages. A percentage height only
|
||||
* resolves against a parent whose own height is already known, and every box
|
||||
* between here and the tile is sized by its contents — so the chain never
|
||||
* resolved and the slider grew until the tile scrolled. `cqh` is the tile's
|
||||
* height whatever is in between.
|
||||
*/
|
||||
.dui-color {
|
||||
display: grid;
|
||||
height: 100cqh;
|
||||
min-height: 0;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.dui-color > .dui-slider {
|
||||
height: 100cqh;
|
||||
}
|
||||
|
||||
/*
|
||||
* The colour disc.
|
||||
*
|
||||
@@ -132,6 +155,7 @@
|
||||
position: relative;
|
||||
width: min(100cqh, 100cqw - 3.5rem);
|
||||
max-width: 100%;
|
||||
max-height: 100cqh;
|
||||
aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
touch-action: none;
|
||||
|
||||
@@ -177,7 +177,7 @@ export function ColorDisk({
|
||||
})
|
||||
const [hue, saturation, brightness] = hsv
|
||||
return (
|
||||
<div className="grid h-full min-h-0 grid-cols-[minmax(0,1fr)_auto] items-center justify-items-center gap-3">
|
||||
<div className="dui-color">
|
||||
<div
|
||||
{...discProps}
|
||||
data-testid={TESTID.disc}
|
||||
|
||||
@@ -171,7 +171,7 @@ export function ColorDisk({
|
||||
})
|
||||
const [hue, saturation, brightness] = hsv
|
||||
return (
|
||||
<div className="grid h-full min-h-0 grid-cols-[minmax(0,1fr)_auto] items-center justify-items-center gap-3">
|
||||
<div className="dui-color">
|
||||
<div
|
||||
{...discProps}
|
||||
data-testid={TESTID.disc}
|
||||
|
||||
Reference in New Issue
Block a user