I m trying to prototype this diagnostics dump screen in comp

Question

I m trying to prototype this diagnostics dump screen in compose The text is longer than can be shown So I make it scrollable using Modifier but then it decides to make the outline as big as the text and scroll the whole thing You can see the box is cut off at the bottom I d rather have the box all visible but the text scroll inside of the box What is the proper way to configure a sized box of text with vertical scroll code tried in thread

Travis Griggs · Answer

```Column var scrollState = rememberScrollState OutlinedTextField value = Globals diagnosticsExample onValueChange = gt modifier = Modifier fillMaxWidth verticalScroll scrollState weight 1f readOnly = true textStyle = TextStyle fontSize = 10 sp Button onClick = modifier = Modifier fillMaxWidth padding vertical = 16 dp colors = ButtonDefaults buttonColors containerColor = AccentBlue Text text = Share ```

ephemient · Answer

doesn t it just work out of the box if you don t put `Modifier verticalScroll ` on it

Travis Griggs · Answer

Now I feel like an idiot kinda

Travis Griggs · Answer

File this one under the trying too hard I guess

ephemient · Answer

if you do want anything more complex such as controlling where it s scrolled to the current Compose APIs don t really let you do that but as long as this works for you it works

Travis Griggs · Answer

Here s a more complicated question about that screenshot Is there a way to get the IconButton at the top to right align itself by the actual drawn icon Instead of the padded box it puts the icon in

ephemient · Answer

IconButton set its minimum size to 48x48dp which is the recommended minimum touch target size perhaps your icon is smaller than that

Travis Griggs · Answer

I m just using ```Box modifier = Modifier fillMaxWidth IconButton onClick = dismissClick modifier = Modifier align Alignment CenterStart Icon Icons Default ArrowBack contentDescription = Exit Diagnostics tint = AccentBlue ``` And I get that it forces the 48x48 touchable target size And that s fine and appreciated even What I want though is the left edge of the arrow to visually line up with the left edges of the outlined text box and the button at the bottom