Cap modal width to the viewport at narrow screens - #53089
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Advanced Run ID: 📒 Files selected for processing (2)
Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review. WalkthroughModal containers now use a viewport-based maximum width with side padding. Modal tab lists can wrap and resize vertically, while tab labels remain on one line. A changelog entry documents the fix for modals being clipped at 768px viewport widths. Priority: ➖ Normal Severity of issue fixed: Medium Merge Risk: ⚪ Minimal · up to The responsive modal changes meet the stated objective and are ready to merge. 🚥 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 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #53089 +/- ##
========================================
Coverage 76.05% 76.05%
========================================
Files 4122 4122
Lines 249833 249833
Branches 14443 14284 -159
========================================
Hits 190017 190017
- Misses 59638 59639 +1
+ Partials 178 177 -1
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
a2d364f to
ba595e3
Compare
Modal containers use fixed pixel widths (650/800/850px) with no max-width, so at the narrowest supported viewport (768px) large and xlarge modals render wider than the window with their edges and padding off-screen. Cap every modal at the window minus a 24px gutter per side. That leaves 640px of content, which is too narrow for a full tab row, so tabs inside modals now keep their labels on one line and wrap to a second row instead of squeezing "iOS & iPadOS" mid-phrase.
ba595e3 to
4e99e19
Compare
1 participant
Related issue: Resolves #52811
The modal sizes in
Modal/_styles.scssare fixed pixels (650, 800, 850) and nothing stops them, so at a 768px window a large modal is still 800px wide and hangs off both sides.I gave the container a
max-widthof the window minus 24px on each side. That covers all three sizes, not just the software details modal. Bigger windows see no change.That leaves 640px of room inside the modal at 768px, which is a bit tight for the Add hosts tabs, so "iOS & iPadOS" was splitting over two lines. Tabs in modals now stay on one line each and the row wraps if it has to. Tabs on regular pages are the same as before.
Checklist for submitter
changes/,orbit/changes/oree/fleetd-chrome/changes.See Changes files for more information.
Testing
It is a CSS change and Jest does not read stylesheets, so there is nothing useful to assert in a unit test and no visual regression setup here. I ran the suites around it instead (
components/Modal,components/TabNav,components/AddHostsModal, software modals): 44 tests passing.make lint-jsis clean.At 768px, the modal from the issue used to sit from -16 to 784. Now it sits from 24 to 744, so 720px wide with both edges visible. The page never scrolls sideways either way.
I also opened the Add hosts modal at 768px (same position, tabs all on one line now), checked nothing inside either modal overflows, and compared tab rows on Dashboard, Software, Controls and Settings at 768px and 1440px against the current behavior. They measure the same.
AI
AI: Claude Code (claude-opus-5)
Frontend
Software details modal at 768px.
Before
After