Take the icon square up to the touch target, and let it fill the row

Asked for: more space between the header icons, and a box tall enough to
fill the header rather than sitting inside it. 48dp does both -- the marks
stand 31dp apart and 31dp from the screen edge, measured on the emulator,
where the 40dp square had them 23dp apart and 27dp from it.

It is also the platform's minimum touch target, which the previous size
was short of, and it is taller than any header's text: the session
header's row now takes its height from the button and needs no vertical
padding of its own, for the same reason the rows add no gap between two
buttons. The ring around the mark is still the only spacing rule; every
number here moved because it did.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
irisandClaude Opus 5 committed 2026-08-31 02:02:00 -04:00
1 parent 4dd1e6ed8c
commit c6bb337c60
2 files changed
+7 -5

No files matched your search

@@ -132,11 +132,13 @@ private val GLYPH_EXTENT = GLYPH_SIZE.value.dp
* bolted on beside it, which left the two header icons 31dp apart and the outer one 14dp from the
* edge, so a pair that acts on one screen read as two unrelated marks with one falling off it.
*
* 40dp is Material's own icon-button state layer, and it is also what the pressed-state ripple
* draws: at 28dp that circle was inscribed in the mark's own corners. The touch target grows with
* it, from well under the platform's 48dp minimum to within 8dp of it.
* 48dp is the platform's minimum touch target, so the square is also the whole of what a finger has
* to find. It is what the pressed-state ripple draws, too: at 28dp that circle was inscribed in the
* mark's own corners, and beside a title it arrived at the first letter. And it is taller than any
* header's text, which is what lets the button fill a header row rather than sit in the middle of
* one -- the rows add no vertical padding of their own for the same reason they add no gap.
*/
private val GLYPH_BUTTON_SIZE = 40.dp
private val GLYPH_BUTTON_SIZE = 48.dp
/**
* The ring itself, for putting something that is *not* a glyph button next to one -- a title beside
@@ -1309,7 +1309,7 @@ fun SessionScreen(settings: ServerSettings, summary: SessionSummary, onBack: ()
Column(Modifier.fillMaxSize()) {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp, vertical = 4.dp),
modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
) {
GlyphButton(BACK_GLYPH, "Back", onBack)
// A ring's worth, which is what the arrow already keeps on its other three sides --