In the DataPoint editor, the Data Type radio-button row and the Retention chip row overflowed past the right screen edge, partially clipping options and — in narrow panel layouts — causing text elements to overlap.
HorizontalOptionSelector wraps its radio buttons in a Row with
horizontalScroll. In DataPointView.kt, this Row was placed inside a Column
with no fillMaxWidth() modifier, so the Column sized to the width of its widest
sibling — the “Data Type” SectionHeading text (~80 dp). The scrollable Row’s
visible viewport was therefore constrained to that narrow width rather than the full
editor width, making most options visually inaccessible without horizontal scrolling.
RetentionPicker’s Row had fillMaxWidth() alongside horizontalScroll(), which
is better, but still hides chips behind a non-obvious horizontal scroll with no
visible scrollbar.
Replaced both overflow layouts with FlowRow (Compose 1.6+ stable):
DataPointView.kt: removed the Row { Column { HorizontalOptionSelector } } wrapper and
inlined a FlowRow with fillMaxWidth() and Arrangement.spacedBy(SPACING_SMALL) for
both horizontal and vertical axes. Items now wrap naturally to the next line when they
exceed the available width.RetentionPicker.kt: replaced the Row with horizontalScroll with a FlowRow using
the same spacing tokens, removing the horizontalScroll dependency entirely.When placing a scrollable child inside a Column or Row, ensure the scrollable
container (or its parent Column) carries fillMaxWidth() — otherwise the visible
scroll viewport is constrained to the narrowest sibling’s width. Better: prefer
FlowRow over horizontalScroll for short option chip/radio groups where the number
of items is bounded and wrapping is more discoverable than scrolling.