fix(#267): add bottom SafeArea insets so the system bar doesn't overlap content - #295
Conversation
…esn't overlap content Most screens didn't account for the bottom safe-area inset, so the phone's gesture / 3-button navigation bar overlapped the bottom of the content (AppSpacing.lg = 16px was not enough for a ~24-48dp bar). There is no global SafeArea wrapper, so each screen must protect itself. Adds MediaQuery.viewPadding.bottom to the bottom padding of the affected screens, matching the pattern the BottomNavBar screens already use. Scrollable content (last item was hidden at max scroll): settings, notification settings, notifications, log report, trade detail, about. Interactive elements pinned at the bottom: dispute chat (message input), walkthrough (Skip/Back/Next/Done controls), add / pay lightning invoice (Cancel/Submit), connect wallet, wallet settings, account (Import/Refresh row). Verified on Linux desktop with a simulated 48px bottom system bar (injected MediaQuery padding): on every affected screen the last item / bottom control now clears the bar instead of being overlapped. flutter analyze clean.
WalkthroughFourteen Flutter screens and a bottom-sheet selector now add bottom system-bar padding. The changes cover lists, forms, bottom controls, chat input, node selection, and walkthrough controls. ChangesBottom Safe-Area Padding
Estimated code review effort: 2 (Simple) | ~10 minutes Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@lib/features/walkthrough/screens/walkthrough_screen.dart`:
- Around line 77-84: Update the controlsPadding value in the walkthrough screen
to preserve the package’s 16.0-point top, left, and right spacing, use 16.0 as
the base bottom padding, and add MediaQuery.of(context).viewPadding.bottom only
to the bottom value.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: f8563ce0-f2d1-4786-bd5e-a5ad5be8442d
📒 Files selected for processing (13)
lib/features/about/screens/about_screen.dartlib/features/account/screens/account_screen.dartlib/features/disputes/screens/dispute_chat_screen.dartlib/features/notifications/screens/notifications_screen.dartlib/features/order/screens/add_lightning_invoice_screen.dartlib/features/order/screens/pay_lightning_invoice_screen.dartlib/features/settings/screens/connect_wallet_screen.dartlib/features/settings/screens/log_report_screen.dartlib/features/settings/screens/notification_settings_screen.dartlib/features/settings/screens/settings_screen.dartlib/features/settings/screens/wallet_settings_screen.dartlib/features/trades/screens/trade_detail_screen.dartlib/features/walkthrough/screens/walkthrough_screen.dart
…ng, inset only bottom CodeRabbit: the package defaults controlsPadding to EdgeInsets.all(16.0); the initial override dropped top/base-bottom to 4.0. Restore 16.0 on all sides and add viewPadding.bottom to the bottom value only.
|
Good catch,you're right. |
![ermeme[bot]](https://avatars.githubusercontent.com/in/3690068?s=60&v=4){kind=small}
There was a problem hiding this comment.
Reviewed the current head (d522167f). The per-screen bottom inset additions are scoped to the affected screens from #267, the prior walkthrough controlsPadding regression is fixed by preserving the package's 16px defaults, and the current CI checks are green. I don't see any blocking issues.
Catrya
left a comment
Catrya
left a comment
There was a problem hiding this comment.
In the Settings screen, in the “Mostro node” section, there’s still some overlapping. This is the only place where I found an issue with it, everything else looks very good. Please fix this so it’s ready to merge.
The selector sheet padded only for viewInsets (the keyboard), so with no keyboard its content ran under the system navigation bar. Add viewPadding.bottom (the system bar) alongside the keyboard inset so the sheet clears both.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@lib/features/settings/widgets/mostro_node_selector.dart`:
- Around line 124-126: Update the bottom inset calculation in the affected
widget to use the maximum of viewInsets.bottom and viewPadding.bottom, then add
AppSpacing.lg, instead of summing both values. Add tests covering both
keyboard-hidden and keyboard-visible states.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 5f2a41d6-94ac-4c30-8c25-d828bbd47e5a
📒 Files selected for processing (2)
lib/features/settings/widgets/mostro_node_selector.dartlib/features/walkthrough/screens/walkthrough_screen.dart
🚧 Files skipped from review as they are similar to previous changes (1)
- lib/features/walkthrough/screens/walkthrough_screen.dart
…stro-node sheet The sheet's bottom inset summed viewInsets (keyboard) and viewPadding (system bar), over-padding when the keyboard is up since both describe the same bottom edge. Use max() of the two plus the base gap so the content clears whichever obstruction is larger. Verified on a physical device (Nokia C31). Adds widget tests for the keyboard-hidden and keyboard-visible states.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@test/features/settings/widgets/mostro_node_selector_test.dart`:
- Around line 56-65: Strengthen the hidden- and visible-keyboard tests around
_pump and MostroNodeSelector by measuring the bottom control or sheet geometry,
not just button presence. Assert a 34 px bottom inset when keyboardInset is 0
and 300 px when it is 300, verifying the selector uses max(viewInsets.bottom,
viewPadding.bottom).
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 322d9e37-e7d5-4d2f-9df3-be7c5f876715
📒 Files selected for processing (2)
lib/features/settings/widgets/mostro_node_selector.darttest/features/settings/widgets/mostro_node_selector_test.dart
🚧 Files skipped from review as they are similar to previous changes (1)
- lib/features/settings/widgets/mostro_node_selector.dart
|
@Catrya 
|
2 participants
Closes #267.
Problem
Most screens don't handle the bottom safe-area inset, so the phone's system navigation bar (gesture bar ~24dp / 3-button bar ~48dp) overlaps the bottom of the content. The largest bottom padding in use was
AppSpacing.lg(16px), which isn't enough for either bar, and there's no globalSafeAreawrapper (noShellRoute/ shared scaffold), so each screen must protect itself.Fix
Add
MediaQuery.of(context).viewPadding.bottomto the bottom padding of each affected screen the same mechanism theBottomNavBarscreens already rely on. Minimal and per-screen: the existing padding is extended, no widget trees are restructured.Scrollable content (last item was hidden at max scroll):
settings, notification settings, notifications, log report, trade detail, about.
Interactive elements pinned at the bottom:
dispute chat (message input), walkthrough (Skip/Back/Next/Done controls), add / pay lightning invoice (Cancel/Submit), connect wallet, wallet settings, account (Import/Refresh row).
Screens already handled by
BottomNavBaror an existingSafeArea(Home, Trades, Chat, Add/My/Take Order, Backup ritual, Rate) are untouched.Testing
Verified on Linux desktop with a simulated 48px bottom system bar (temporarily injecting
MediaQueryviewPadding.bottom: 48at the app root plus a translucent band marking the bar). On every affected screen the last item / bottom control now clears the simulated bar instead of being overlapped.Screenshots below.
flutter analyzeclean across all 13 files.Summary by CodeRabbit