# The Problem of Rows Breaking with Large Text

DevFeed: [The Problem of Rows Breaking with Large Text](<https://devfeed.tech/articles/the-problem-of-rows-breaking-with-large-text-38516.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2025-12-16/the-problem-of-rows-breaking-with-large-text/>)

Author: Eevis Panula

Published: 2025-12-16T03:39:05.686000Z

Content type: tutorial

Language: en

Sources: [Eevis Blog](<https://devfeed.tech/sources/eevis-blog.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Android](<https://devfeed.tech/topics/android.md>), [Compose](<https://devfeed.tech/topics/compose.md>), [User interface design](<https://devfeed.tech/topics/ui-design.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [android](<https://devfeed.tech/tags/android.md>), [code](<https://devfeed.tech/tags/code.md>), [compose](<https://devfeed.tech/tags/compose.md>), [developers](<https://devfeed.tech/tags/developers.md>), [devices](<https://devfeed.tech/tags/devices.md>), [layout](<https://devfeed.tech/tags/layout.md>)

## AI overview

This tutorial explains why Android Compose Row layouts can overflow or cut off buttons when users increase text size. It recommends replacing Row with FlowRow, avoiding fixed heights, and testing with large text and small screens.

## Source excerpt

This was originally sent as Issue #1 of my newsletter. Subscribe here to get future issues in your inbox first. I was fixing an Android app and found buttons in a row getting cut off when I increased the font size. After diving into the code, the problem became clear: it was using Row when FlowRow was needed. The Problem of Rows Breaking with Large Text Let's say we have this code: Row( modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy( space = 16.dp, alignment = Alignment.CenterHorizontally ) ) { Button(onClick = {}) { Icon( painter = painterResource(R.drawable.ic_arrow_back), contentDescription = null ) Text("Previous year") } Button(onClick = {}) { Text("Next year") Icon( painter = painterResource(R.drawable.ic_arrow), contentDescription = null ) } } Which, in turn, looks like this with the default font size: However, when we turn the font size up to 200%, things start breaking: Who This Hurts People with low vision who need larger text to read comfortably Elderly users (a huge and growing demographic) Anyone using large system font sizes--whether for accessibility or personal preference Users on smaller screens, where even default text can cause issues Why Developers Do This Developers often test on their own devices with default settings, and everything looks fine. They don't realize that Row treats its children as a non-wrapping container, so if the content doesn't fit, it just overflows or gets cut off. There's no automatic wrapping behavior. It's not a bug in Row. It's just not designed to handle dynamic content that might change size. The Solution The most straightforward solution would be to use FlowRow: FlowRow( // Changed from Row modifier = Modifier.fillMaxWidth(), itemVerticalAlignment = Alignment.CenterVertically, // Changed from verticalAlignment verticalArrangement = Arrangement.spacedBy(8.dp), // NEW: spacing between wrapped rows horizontalArrangement = Arrangement.spaced