Give an icon button its own ring of space, and let that be the spacing

Every gap around a header icon now comes out of the button's own padding:
one ring to the screen edge, two where a button meets its neighbour. The
box was the size of the mark (28dp) and the separation was bolted on
beside it, so on the session header the two marks stood 31dp apart while
the outer one was 14dp from the edge of the screen -- a pair that acts on
one screen reading as two unrelated marks, one of them falling off it.
Measured on the emulator at 40dp: 23dp between the marks, 27dp to the
edge, and the same ring above and below.

The mark was also not square, which is why an arrow looked taller than it
was wide. `Glyph` is a `Text`, and it inherited the body style's 24sp line
height around a 17sp mark; this font's ascent and descent add up to
exactly one em, so a line height of the point size is the square the glyph
draws in. That leading is also what a button's padding had to be measured
through.

40dp is Material's own icon-button state layer, and it is what the
pressed-state ripple draws -- at 28dp that circle was inscribed in the
mark's corners, and beside a title it arrived at the first letter. The
touch target comes up with it, from well under the platform's 48dp
minimum to within 8dp of it; going the rest of the way would put the marks
back 31dp apart.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
irisandClaude Opus 5 committed 2026-08-31 01:51:13 -04:00
1 parent 4edc96de09
commit c5fecb296f
4 files changed
+60 -28

No files matched your search

@@ -1389,10 +1389,12 @@ fun SessionScreen(settings: ServerSettings, summary: SessionSummary, onBack: ()
Column(Modifier.fillMaxSize()) {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxWidth().padding(horizontal = 8.dp, vertical = 4.dp),
modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 4.dp),
) {
GlyphButton(BACK_GLYPH, "Back", onBack)
Spacer(Modifier.width(8.dp))
// A ring's worth, which is what the arrow already keeps on its other three sides --
// the pair of glyph buttons at the far end of this row get theirs from each other.
Spacer(Modifier.width(GLYPH_BUTTON_MARGIN))
Column(Modifier.weight(1f)) {
Text(title, style = MaterialTheme.typography.titleMedium)
// Machine first, then what runs on it -- the same order and the same wording
@@ -1424,7 +1426,7 @@ fun SessionScreen(settings: ServerSettings, summary: SessionSummary, onBack: ()
// yellow or red near a limit -- and the theme's plain control colour whenever there
// is no measurement, since blue is the low end of the scale here and would read as
// "checked, and fine" about a machine nobody could reach.
Row(horizontalArrangement = Arrangement.spacedBy(GLYPH_BUTTON_GAP)) {
Row {
GlyphButton(
USAGE_GLYPH,
"Usage",