From c6bb337c608b42fc7f890338bba629bfb810630e Mon Sep 17 00:00:00 2001 From: iris <2+iris@noreply.localhost> Date: Mon, 31 Aug 2026 02:02:00 -0400 Subject: [PATCH] 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 --- .../src/main/kotlin/com/example/aiapp/NerdIcons.kt | 10 ++++++---- .../src/main/kotlin/com/example/aiapp/SessionScreen.kt | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/app/androidApp/src/main/kotlin/com/example/aiapp/NerdIcons.kt b/app/androidApp/src/main/kotlin/com/example/aiapp/NerdIcons.kt index fa50b37..beaba59 100644 --- a/app/androidApp/src/main/kotlin/com/example/aiapp/NerdIcons.kt +++ b/app/androidApp/src/main/kotlin/com/example/aiapp/NerdIcons.kt @@ -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 diff --git a/app/androidApp/src/main/kotlin/com/example/aiapp/SessionScreen.kt b/app/androidApp/src/main/kotlin/com/example/aiapp/SessionScreen.kt index af6ec12..4123b50 100644 --- a/app/androidApp/src/main/kotlin/com/example/aiapp/SessionScreen.kt +++ b/app/androidApp/src/main/kotlin/com/example/aiapp/SessionScreen.kt @@ -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 --