Sharon KatzandClaude Opus 4.6
15a4b16939
Closes #43637 ## Summary - Adds `min-width: 0` to `.side-nav__card-container` so the flex child can shrink below its content width, enabling horizontal scroll on data tables inside the side-nav layout at narrow viewports. ## Root cause `.side-nav__container` uses `display: flex`, and its child `.side-nav__card-container` has `width: 100%` but no `min-width` override. Flex children default to `min-width: auto`, which prevents them from shrinking below their content width. This means `overflow-x: auto` on `.data-table__wrapper` never activates because the parent chain stretches to fit the table content instead of constraining it. ## Changes **`frontend/pages/admin/components/SideNav/_styles.scss`** -- added `min-width: 0` to `.side-nav__card-container`. ## Manual testing - [x] Built and ran Fleet server locally (`make fleet && ./build/fleet serve --dev --dev_license`) - [x] Navigated to **Controls > Disk encryption** (https://localhost:8080/controls/os-settings/disk-encryption?fleet_id=2) - [x] Enabled disk encryption for the team and confirmed the table rendered - [x] Resized browser to smallest supported viewport width - [x] **Before fix:** table columns were squished/truncated with no horizontal scrollbar - [x] **After fix:** horizontal scrollbar appeared and table content scrolled correctly - [x] Verified other pages using the SideNav component (e.g., Settings) were not affected ## Unit tests - [x] Ran all related frontend test suites (`SideNav`, `DiskEncryption`, `TableContainer`) -- 39 tests, all passing 🤖 Generated with [Claude Code](https://claude.com/claude-code) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Fixed side navigation layout to properly handle content overflow and enable horizontal scrolling when navigation items exceed available space. * **Documentation** * Added note: Disk Encryption > Disk encryption table now supports horizontal scrolling on narrow viewports. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/fleetdm/fleet/pull/45736?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2 lines
152 B
Plaintext
2 lines
152 B
Plaintext
* Fixed an issue where the disk encryption table on the Controls > Disk encryption page did not support horizontal scrolling at narrow viewport widths.
|