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:
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",
|
||||
|
||||
Reference in new issue
Block a user