[00546] Fix DataTable filter component mobile overflow#4620
Merged
dcrjodle merged 4 commits intoJun 22, 2026
Merged
Conversation
Make DataTableOption responsive by using popover mode on mobile breakpoints and constrained widths on tablet. This prevents horizontal overflow when the filter is expanded on smaller screens. - Import useCurrentBreakpoint hook - Override displayMode to "popover" on mobile breakpoint - Apply responsive width constraints (max-w-[450px] w-[calc(100vw-8rem)]) on tablet - Add test coverage for responsive behavior across breakpoints Plan: 00546 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Use createRoot/mount pattern instead of @testing-library/react which is not used in this project. Plan: 00546 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The previous approach switched the DataTable filter to a popover overlay on mobile to avoid horizontal overflow. Keep the inline-expansion behavior on all breakpoints and instead constrain the expanded width: on compact screens (mobile/tablet) the container goes full width and the panel flexes to fill the remaining space, so it spans 100% of the screen without overflowing. Desktop keeps the fixed 450px panel. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The expanded inline filter still overflowed the viewport on mobile because the table header's left group was a content-sized flex item with the default min-width:auto, so the CodeMirror editor's max-content width forced the whole row wider than the screen. Give the left group min-w-0 + flex-1 (replacing the spacer) so it fills the row and can clamp its children, and add min-w-0/max-w-full to the expanded DataTableOption container so the editor scrolls horizontally within the panel instead of pushing the layout past 100% width. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Collaborator
Staging removedStaging environment has been deleted for this PR. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #4585
Summary
Changes
Made the DataTable filter component responsive to prevent horizontal overflow on mobile and tablet devices. On mobile breakpoints, the filter now renders as a popover overlay instead of inline expansion. On tablet breakpoints, the inline expansion uses constrained widths that adapt to the viewport.
API Changes
Modified
DataTableOptioncomponent:useCurrentBreakpointhook to automatically adjust rendering mode based on screen sizeFiles Modified
src/frontend/src/widgets/dataTables/DataTableOption.tsx— Added responsive logic with breakpoint detectionsrc/frontend/src/widgets/dataTables/__tests__/DataTableOption-responsive.test.tsx— New test file for responsive behaviorCommits
Co-Authored-By: Claude Sonnet 4.5 noreply@anthropic.com