I have a "settings" style screen that I want to pl...

# compose

[Travis Griggs]

I have a "settings" style screen that I want to place an EDIT button at the top left corner of. What I want it to look like is the first graphic (the purple dashed lines are just for alignment illustration).

I'm trying to realize this via a
Column
- Box for the header
- alternating separator lines and rows for the rest

When I place a TextButton for the EDIT button at CenterStart of my header Box, I can't figure out how to avoid adding a bunch of extra padding that then indents it even further. Is there a way to get the TextButton to line based on its text start, rather than the touchable area of the button? (Second graphic is preview with what I'm really getting with outline boxes shown)

[Stylianos Gakis]

Maybe consider not using a TextButton but do it all yourself with Text + clickable modifier so that it doesn't add padding that you can't control?

[Stylianos Gakis]

And with that text being so incredibly close to the edge, you need to conside how do you want the ripple to look like? Will it touch the edges pretty much?
And if you got a padding on the entire card as a whole, you might have to remove that and put it on each of the children individually, since you want that button in particular to break away from those paddings

[Travis Griggs]

That actually worked better, thanks. I get so caught up trying to stay inside the "idiomatic" composables, it's tough to know when it's ok to just drive outside the rails briefly

[dorche]

Consider that if you just have the text clickable it won't meet minimum touch target guidelines

[Stylianos Gakis]

Yes ^^ But you can do that yourself too by using Modifier.minimumInteractiveComponentSize()