Skip to content

fix(notifications): stop a preference row overflowing at a phone width - #100

Merged
anilcancakir merged 1 commit into
mainfrom
fix/preference-row-overflow
Aug 21, 2026
Merged

fix(notifications): stop a preference row overflowing at a phone width#100
anilcancakir merged 1 commit into
mainfrom
fix/preference-row-overflow

Conversation

@anilcancakir

@anilcancakir anilcancakir commented Aug 21, 2026

Copy link
Copy Markdown
Contributor

What

The icon-plus-text half of a notification-preference row demanded its intrinsic
width, so any channel carrying the push hint underneath its label pushed the row
wider than its container. Measured at 430px in a consuming app (uptizm), Flutter
painted "RIGHT OVERFLOWED BY 14 PIXELS" across every Push row.

flex-1 min-w-0 on both the half and the text column lets the label and the hint
wrap, and leaves the switch its own space.

Why it was invisible

Every existing case in magic_starter_notification_preferences_view_test.dart
runs at 1280 or 1920, two of them widening the surface further with a comment
saying they do it so untranslated keys fit. So the row was only ever laid out
where it had room to spare.

The new case runs at 430 with pushProvisioned: false, so the hint is present and
the row is two lines tall. Without the fix it fails with a 267-pixel overflow; the
number is larger than the app's 14 because the test font is wider than the shipped
one, which is also why the assertion is "no exception" rather than a pixel count.

Testing

flutter test: 1256 pass. dart format clean, flutter analyze clean.


Correction, added after merge

This PR also carried an analysis_options.yaml change that its description never
mentioned: an analyzer.exclude block for build/** and the six platform
directories. It had been sitting uncommitted in my working tree across several
sessions and a git add -A swept it in.

The content is wanted (it is the same block going into uptizm as its own PR), so
it is not being reverted, but the record should say what actually landed. Measured
in the sibling repo: the block changes nothing today, since the platform
directories hold zero Dart files and the analyzer already leaves build/ alone.
It is a guard for the first time that stops being true.

The preventable part was the staging. Explicit paths from here, not -A.

The icon-plus-text half of a preference row demanded its intrinsic width, so any
channel carrying the push hint underneath its label pushed the row wider than its
container: measured at 430px in a consuming app, Flutter painted "RIGHT
OVERFLOWED BY 14 PIXELS" across every Push row. A two-line text column is wider
than a one-line one, and nothing told it to shrink.

`flex-1 min-w-0` on both the half and the text column lets the label and the hint
wrap instead, and leaves the switch its own space.

Every existing case in this file runs at 1280 or 1920, which is exactly why this
was invisible: the new one runs at 430 with the hint present and asserts no
exception. Without the fix it fails with a 267-pixel overflow (the test font is
wider than the shipped one, so the number is larger than the app's 14).
@codecov

codecov Bot commented Aug 21, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

@anilcancakir

Copy link
Copy Markdown
Contributor Author

@kodizm review

@anilcancakir
anilcancakir merged commit 8cc07b8 into main Aug 21, 2026
2 checks passed
@anilcancakir
anilcancakir deleted the fix/preference-row-overflow branch August 21, 2026 17:43
@anilcancakir

Copy link
Copy Markdown
Contributor Author

@kodizm review

@kodizm

kodizm Bot commented Aug 21, 2026

Copy link
Copy Markdown

Note

Kodizm (AI-generated). May contain mistakes; verify before acting.

The layout fix is correct and narrowly scoped; only two minor housekeeping points, both outside the rendered code.

The flex-1 min-w-0 pair does what the description says: fluttersdk_wind's row composer wraps a flex-1 child in Expanded (w_div.dart:665, flexbox_grid_parser.dart:21) and min-w-0 is a real token in the sizing parser (sizing_parser.dart:229), so the icon-plus-text half now takes bounded width and both WTexts wrap instead of demanding intrinsic width. justify-between on the parent becomes inert once the first child is Expanded, which is harmless here since the switch still sits at the trailing edge. I grepped for sibling rows with the same shape; magic_starter_notification_preferences_view.dart:180 is the only one in the notifications and profile views, so there is no second instance left unfixed.

Minor

CHANGELOG.md — no [Unreleased] entry for this change. CLAUDE.md's post-change checklist asks for one after any source change, and every prior fix in this file carries one. (maintainability)

analysis_options.yaml:6 — the exclude block is unrelated to the overflow fix, as the description now admits. It is inert in this package rather than wrong: there are no android/, ios/, web/, windows/, macos/ or linux/ directories in the repo root, and the analyzer already skips build/. Worth keeping the record straight rather than reverting. (scope)

Tests

The new case at magic_starter_notification_preferences_view_test.dart:157 is the right one: it is the only case in the file below 1280px, and pushProvisioned: false forces the two-line row that triggered the overflow. I did not verify the negative half of the claim (that it fails with a 267-pixel overflow without the fix), because I cannot modify the tree to revert the two classNames.

Checks I ran

  • flutter test test/ui/views/notifications/magic_starter_notification_preferences_view_test.dart → 12 passed, including a push row with its hint fits a phone width.
  • flutter analyze --no-fatal-infosNo issues found! (ran in 18.1s).
  • dart format --output=none --set-exit-if-changed .Formatted 321 files (0 changed), exit 0.
  • grep for flex items-center justify-between across the notifications and profile views → single hit, the changed row.
  • Read the Wind sizing and flexbox parsers to confirm flex-1 and min-w-0 are both honoured rather than silently ignored.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant