fix: datastore filter responsiveness#7870
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
|
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review: fix: datastore filter responsiveness
The intent is clear — push the grid's single-row layout to 2xl instead of xl, and use Space.Compact to visually join the search input and regex toggle. The breakpoint change and col-span-4 expansion make sense for the wider two-row layout on mid-size screens.
Issues
display: contents + flex-grow mismatch (functional bug)
The grow class on the first Form.Item (className="!me-0 contents grow") won't work. display: contents removes the element from the flex formatting context, so flex-grow: 1 has nothing to apply to. The SearchInput will not expand to fill available horizontal space as intended. This should be tested at intermediate viewport widths to confirm the search box isn't rendering at a fixed/minimum size when more space is available.
Space.Compact + display: contents interaction
Space.Compact injects compact-mode classes onto its direct children to produce joined borders. When both Form.Item wrappers have display: contents, they are invisible to layout, and whether Ant Design's compact CSS targeting lands on the actual input elements depends on how the class injection works in the version of fidesui/antd in use. Worth a careful visual check that the search input and regex toggle are actually rendering with joined/connected borders rather than appearing as separate elements.
Minor
Redundant responsive class: col-span-1 2xl:col-span-1 — the 2xl:col-span-1 duplicates the base value and can be removed.
PR template not filled in: The description still has the default placeholder text (ticket link, code changes list, steps to confirm). Would be good to fill these in to help reviewers understand what to test.
| <Form.Item name="search" className="!me-0 grow"> | ||
| <Flex className="col-span-4 gap-2 2xl:col-span-1" vertical> | ||
| <Space.Compact> | ||
| <Form.Item name="search" className="!me-0 contents grow"> |
There was a problem hiding this comment.
The grow class (flex-grow: 1) won't have any effect here because contents is also applied. When display: contents is set, the element itself is removed from the flex formatting context — its children participate directly in the parent Space.Compact layout instead. That means flex-grow has no element to apply to, so the SearchInput will not stretch to fill remaining space as intended. Consider removing grow or restructuring so the element that needs to grow actually participates in the flex context.
| <Flex className="gap-2"> | ||
| <Form.Item name="search" className="!me-0 grow"> | ||
| <Flex className="col-span-4 gap-2 2xl:col-span-1" vertical> | ||
| <Space.Compact> |
There was a problem hiding this comment.
Space.Compact renders a div that applies compact-mode styling (joined borders, no gaps) to its children. Since Form.Item has display: contents applied, the Ant Design compact context (which targets direct children) will reach the actual input elements — but it's worth verifying visually that the SearchInput and RegexToggle borders join as expected without any intermediate wrapper breaking the compact chain. Specifically, Space.Compact injects a class on immediate children; with display: contents, the actual rendered children may not receive that class correctly depending on how fidesui re-exports Space.
| icon={<Icons.Keyboard />} | ||
| onClick={shortcutCallback} | ||
| className="col-span-3 xl:col-span-1" | ||
| className="col-span-1 2xl:col-span-1" |
There was a problem hiding this comment.
col-span-1 2xl:col-span-1 — the 2xl:col-span-1 is redundant since col-span-1 is already the base (no breakpoint) value. Safe to drop 2xl:col-span-1.
2 participants
Ticket []
Description Of Changes
Code Changes
Steps to Confirm
Pre-Merge Checklist
CHANGELOG.mdupdatedmaindowngrade()migration is correct and works