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-06 09:36:37 CET |
|
The preview deployment is ready. 🟢 Open Preview | Open Build Logs Last updated at: 2025-07-06 09:36:36 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
| @@ -68,3 +68,9 @@ | |||
| </svelte:fragment> | |||
| </Dialog> | |||
| </Form> | |||
|
|
|||
| <style> | |||
| :global(dialog section) { | |||
There was a problem hiding this comment.
The global selector applies to all sections and could unintentionally affect other modals. Consider scoping this rule by adding a specific class or using a more targeted selector.
| :global(dialog section) { | |
| .confirm-dialog section { |
Copilot uses AI. Check for mistakes.
| :global(dialog section) { | ||
| overflow: visible !important; |
There was a problem hiding this comment.
Relying on !important can make future CSS maintenance more difficult. If possible, increase selector specificity or refactor existing styles instead of using !important.
| :global(dialog section) { | |
| overflow: visible !important; | |
| :global(dialog[data-component="confirm"] section) { | |
| overflow: visible; |
Copilot uses AI. Check for mistakes.
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