library: centre the quarter-turn pair on the stage bar

The bar under the picture is the grid it needs to be: equal free tracks either
side of the two buttons land them on the picture's own centre whatever OPEN and
the stars measure, and the pair keeps the ends it does not own. Under 700px the
stage is too narrow for one line, so the bar wraps as it did and the lines it
wraps to are centred.
This commit is contained in:
2026-10-06 18:22:40 +07:00
parent 873d36d70f
commit e5dda006e4
2 changed files with 27 additions and 6 deletions
+8 -6
View File
@@ -1635,34 +1635,36 @@ export function Library() {
angle — the next visit, the next scan and the studio
all read it off the row, so it is never turned
twice. Two buttons and not a dial: a quarter is the
only turn a photo is ever out by. */}
only turn a photo is ever out by. They sit on the
centre of the bar, over the middle of the picture
above them, because they are what the eye comes down
to after it; the score stays out at the edge. */}
<button
type="button"
className="chip lib-icon"
className="chip lib-icon lib-turn"
data-key="lib-turn-left"
aria-label={t('lib.rotateLeft')}
title={t('lib.rotateLeft')}
onClick={() => void turn(frame, -1)}
>
<svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.4">
<svg viewBox="0 0 16 16" width="24" height="24" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.3">
<path d="M3.2 6.2A5.2 5.2 0 1 1 3.5 10" />
<path d="M1.6 3.1v3.4h3.4" />
</svg>
</button>
<button
type="button"
className="chip lib-icon"
className="chip lib-icon lib-turn"
data-key="lib-turn-right"
aria-label={t('lib.rotateRight')}
title={t('lib.rotateRight')}
onClick={() => void turn(frame, 1)}
>
<svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.4">
<svg viewBox="0 0 16 16" width="24" height="24" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.3">
<path d="M12.8 6.2A5.2 5.2 0 1 0 12.5 10" />
<path d="M14.4 3.1v3.4h-3.4" />
</svg>
</button>
<span className="adm-spacer" />
{/* The frame's own score, and the only place one is
given: the star that is lit is the score it has,
and the star under the click is the score it gets —