Fix: Prevent Modal Dropdown Truncation on Mobile #2085
Conversation
…tent area, preventing them from being clipped or truncated.
|
The preview deployment is ready. 🟢 Open Preview | Open Build Logs Last updated at: 2025-07-09 06:42:30 CET |
|
The preview deployment is ready. 🟢 Open Preview | Open Build Logs Last updated at: 2025-07-09 06:42:26 CET |
There was a problem hiding this comment.
Pull Request Overview
A CSS-only fix to allow dropdowns and overlays inside modals to overflow their container, preventing truncation on mobile devices.
- Added a global CSS rule to make modal sections overflow visible
- Reverted all previous JS/logic-based dropdown size handling
- Ensures dropdowns are fully visible and scrollable across all devices
src/lib/components/confirm.svelte
Outdated
There was a problem hiding this comment.
the component ColumnSelector uses Popover which supports a portal option, that should be a better solution. A prop to portal should be good for mobile modals because we don't need portal by default.
| @@ -35,7 +36,7 @@ | |||
| {#if !hideColumns && $columns?.length} | |||
| <Layout.Stack gap="xs"> | |||
| <Typography.Text>Columns</Typography.Text> | |||
| <ColumnSelector {columns} {isCustomCollection}> | |||
| <ColumnSelector {columns} {isCustomCollection} portal={$isSmallViewport}> | |||
There was a problem hiding this comment.
can just pass true here, already inside a modal which is rendered due to responsiveContainerHeader > $isSmallViewport > #snippet settingsButton.
| @@ -16,7 +17,7 @@ | |||
| </script> | |||
|
|
|||
| {#if !hideColumns && view === View.Table} | |||
| <ColumnSelector {columns} {isCustomCollection} {allowNoColumns}> | |||
| <ColumnSelector {columns} {isCustomCollection} {allowNoColumns} portal={$isSmallViewport}> | |||
There was a problem hiding this comment.
this might not be needed unless the ViewSelector itself is not in a modal or dialog some other upper layered component. Please check and verify.
Fix: Prevent Modal Dropdown Truncation on Mobile
Problem
On mobile devices, dropdowns (such as the Columns dropdown in the Adjustments modal) were being truncated or clipped due to the modal’s content area having restricted overflow.
Solution
CSS-only fix:
src/lib/components/confirm.svelteReverted Changes
Result
Before and After