fix: prevent filters dropdown from being clipped by dialog overflow

[jaysomani]

What does this PR do?

Fixes dropdown overflow issue in modals where InputSelect dropdowns were getting clipped by modal boundaries. This PR adds a CSS override to allow dropdowns to overflow the modal container, ensuring they remain fully visible when opened.

Changes:

• Added overflow: visible !important; to dialog section elements in src/lib/components/modal.svelte
• This fix applies globally to all modals using the base Modal component
• Addresses the issue where dropdowns (like Status, Column, Operator selectors in filter modals) were cut off at the modal boundaries

Note: This is a temporary workaround for a known issue that is being addressed internally. The override is placed alongside the existing max-width override in the base modal component.

Test Plan

1. Filter Modal Test:

   • Navigate to any table with filters (e.g., Sites > Deployments)
   • Open the Filters modal
   • Click on "Select column" dropdown - verify it opens fully without being clipped
   • Click on "Select operator" dropdown - verify it opens fully without being clipped
   • Click on "Select value" dropdown (for enum columns) - verify it opens fully without being clipped

2. Other Modal Tests:

   • Test InputSelect in other modals:
     • Account > Payments > Add/Edit billing address (Country dropdown)
     • Organization > Settings > Request BAA/SOC-2 (Country and Employees dropdowns)
     • Organization > Members > Invite member (Role dropdown)
   • Verify all dropdowns open fully and are not clipped by modal boundaries

3. Visual Verification:

   • Ensure dropdowns appear above modal content when opened
   • Verify dropdowns are fully visible and accessible
   • Check that modal content remains properly contained

Related PRs and Issues

#2628

Have you read the Contributing Guidelines on issues?

Yes, I have read the contributing guidelines.

Summary by CodeRabbit

• Style
  • Refined modal dialog overflow behavior to improve content display.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[appwrite]

Console (appwrite/console)

Project ID: 688b7bf400350cbd60e9

Sites (1)

Site	Status	Logs	Preview	QR
console-stage 688b7cf6003b1842c9dc	Failed	Authorize	Preview URL

Tip

Dynamic API keys are generated automatically for each function execution

[coderabbitai]

Walkthrough

This change modifies the modal component by adding an overflow: visible !important CSS property to the global dialog section styling. The existing max-width: 100% !important property remains unchanged. This is a CSS-only modification with no logic, error handling, or control flow alterations.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

• Single file change affecting only CSS styling
• Addition of one straightforward CSS property
• No logic, functional, or structural modifications
• Minimal verification needed to confirm styling intent

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding CSS to prevent dropdown clipping in modal dialogs by making overflow visible.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/lib/components/modal.svelte (1)

57-61: Consider more targeted solutions and update the comment.

The comment mentions only the width fix but not the overflow override. Additionally, applying overflow: visible globally may not be the most maintainable approach.

1. Update the comment to document both overrides:

-    /* temporary fix to modal width */
+    /* temporary fixes: prevent width overflow and allow dropdowns to extend beyond modal */
     :global(dialog section) {
         max-width: 100% !important;
         overflow: visible !important;
     }

2. Consider alternative approaches that don't affect all modals:

• Option A: Use a CSS portal/teleport pattern for dropdowns (render them outside the modal DOM hierarchy)
• Option B: Apply overflow: visible only when needed via a prop: export let allowOverflow = false;
• Option C: Use more specific selectors to target only the sections containing dropdowns: :global(dialog section:has(.input-select))
• Option D: Use overflow-y: auto with overflow-x: visible to maintain vertical scrolling while allowing horizontal overflow for dropdowns

These approaches would prevent unintended side effects on modals that need scroll containment.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 237ae93 and 08508ab.

📒 Files selected for processing (1)

• src/lib/components/modal.svelte (1 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{ts,tsx,js,jsx,svelte}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,js,jsx,svelte}: Import reusable modules from the src/lib directory using the $lib alias
Use minimal comments in code; reserve comments for TODOs or complex logic explanations
Use $lib, $routes, and $themes aliases instead of relative paths for module imports

Files:

• src/lib/components/modal.svelte

src/lib/components/**/*.svelte

📄 CodeRabbit inference engine (AGENTS.md)

Use PascalCase for component file names and place them in src/lib/components/[feature]/ directory structure

Files:

• src/lib/components/modal.svelte

**/*.{ts,tsx,js,jsx,svelte,json}

📄 CodeRabbit inference engine (AGENTS.md)

Use 4 spaces for indentation, single quotes, 100 character line width, and no trailing commas per Prettier configuration

Files:

• src/lib/components/modal.svelte

**/*.svelte

📄 CodeRabbit inference engine (AGENTS.md)

Use Svelte 5 + SvelteKit 2 syntax with TypeScript for component development

Files:

• src/lib/components/modal.svelte