fix: make the VPN tab responsive to constrained heights - #9027
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Advanced Run ID: 📒 Files selected for processing (1)
Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review. 📝 WalkthroughWalkthroughThe home screen updates data usage alignment and makes the VPN tab responsive to constrained heights. The Pro banner now renders for all users. Widget tests cover both viewport sizes and user states. ChangesHome layout updates
Priority: ➖ Normal Estimated code review effort: 2 (Simple) | ~10 minutes Sequence Diagram(s)sequenceDiagram
participant VpnTab
participant LayoutBuilder
participant SingleChildScrollView
VpnTab->>LayoutBuilder: read available height
LayoutBuilder->>SingleChildScrollView: provide constrained content
SingleChildScrollView->>VpnTab: render or scroll VPN tab content
Merge Risk: ⚪ Minimal · up to The VPN tab now scrolls in constrained windows while retaining its spacious layout when content fits, and data-usage text avoids horizontal overflow. No concrete merge-blocking risk remains. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
🟡 Changes recommended
The new widget test currently leaks global localization state and sets a simulated window size that conflicts with the intended smoke-test dimensions, which can cause order-dependent or misleading test results.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR improves the desktop VPN tab layout so it remains usable in short windows by allowing vertical scrolling when content doesn’t fit, while preserving the existing spaced layout when it does. It also tightens the data-usage header layout to avoid horizontal overflow and adds a widget test intended to cover the Windows smoke-test window size.
Changes:
- Wrap the VPN tab body in a
SingleChildScrollViewwith a min-height constraint to preservespaceBetweenlayout when content fits. - Prevent the data-usage heading from overflowing horizontally by constraining it and adding ellipsis overflow handling.
- Add a widget test to validate the VPN tab scrolls (instead of overflowing) at a constrained desktop size.
File summaries
| File | Description |
|---|---|
| test/features/home/vpn_tab_test.dart | Adds a widget test to ensure the VPN tab scrolls at a constrained (Windows smoke-test) size. |
| lib/features/home/vpn_tab.dart | Makes the VPN tab vertically scrollable under constrained heights while keeping the spaced layout when possible. |
| lib/features/home/data_usage.dart | Prevents the data-usage heading from overflowing horizontally (ellipsis + flexible layout). |
Review details
- Files reviewed: 3/3 changed files
- Comments generated: 2
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
|
@jigar-f Can you please take a look at this one? |
The VPN tab now scrolls when a window is too short, while keeping its usual spacing when everything fits. Long data-usage labels also truncate cleanly instead of overflowing.
Tests cover Pro and free users at the Windows smoke-test size and a smaller viewport. All 243 Flutter tests, focused analysis, and Linux test CI pass.
Summary by CodeRabbit
Bug Fixes
Tests