fix: dropdown width

[adityathebe]

resolves: #2793

Summary by CodeRabbit

• Style
  • Adjusted dropdown menu widths across config filters for improved layout consistency
  • Refined search input width for better UI spacing
  • Removed fixed width constraints from dropdown components to support flexible sizing

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

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
aws-preview	Ready	Preview	Dec 23, 2025 5:55pm
flanksource-ui	Ready	Preview	Dec 23, 2025 5:55pm

[coderabbitai]

Walkthrough

The changes adjust dropdown menu widths and remove fixed width styling from configuration filter components. A new configurable minMenuWidth prop is added to MultiSelectDropdown, with adjustments applied to dropdown menu widths and search input width across multiple filter components.

Changes

Cohort / File(s)	Summary
UI Component Enhancement src/ui/Dropdowns/MultiSelectDropdown.tsx	Added minMenuWidth?: string prop (default "500px") to make dropdown menu width configurable. Applied minWidth styling to menuList and menu.
Configuration Filter Dropdowns src/components/Configs/ConfigsListFilters/ConfigGroupByDropdown.tsx, ConfigHealthyDropdown.tsx, ConfigLabelsDropdown.tsx, ConfigStatusDropdown.tsx, ConfigTypesDropdown.tsx, src/components/Configs/Changes/ConfigChangesFilters/ConfigTypesTristateDropdown.tsx	Adjusted dropdown menu widths via minMenuWidth prop and removed fixed width classes. Specific adjustments: ConfigGroupByDropdown (added minMenuWidth="250px"), ConfigHealthyDropdown (increased to 200px, removed w-[150px]), ConfigLabelsDropdown (reduced to 300px, removed w-[500px]), ConfigStatusDropdown (removed w-[250px]), ConfigTypesDropdown (added minMenuWidth="250px", removed w-[300px]), ConfigTypesTristateDropdown (added minMenuWidth="20rem").
Filter Container Layout src/components/Configs/ConfigsListFilters/ConfigsListFilters.tsx	Reduced search input width from 400px to 250px.

Suggested reviewers

• moshloop

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly addresses the main change: adjusting dropdown widths across multiple dropdown components and the search input field width.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/dropdown-width

---

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.}

[netlify]

❌ Deploy Preview for flanksource-demo-stable failed. Why did it fail? →

Name	Link
🔨 Latest commit	d988c63
🔍 Latest deploy log	https://app.netlify.com/projects/flanksource-demo-stable/deploys/694ad66ce649720008e34148

[netlify]

❌ Deploy Preview for clerk-saas-ui failed. Why did it fail? →

Name	Link
🔨 Latest commit	d988c63
🔍 Latest deploy log	https://app.netlify.com/projects/clerk-saas-ui/deploys/694ad66c3b915100085197ad

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/components/Configs/Changes/ConfigChangesFilters/ConfigTypesTristateDropdown.tsx (1)

54-54: Consider using consistent units across dropdown components.

The width adjustment is correct, but this uses rem units while most other dropdowns in this PR use px units (e.g., 300px, 250px, 200px). Using rem provides better scalability with font-size changes, but inconsistency across components may lead to maintenance confusion.

🔎 Optional: Standardize to rem units

Consider standardizing all dropdown widths to use rem units for better accessibility and responsive behavior:

-minMenuWidth="20rem"
+minMenuWidth="20rem"  // Keep this, but update others to rem as well

Alternatively, if px is preferred, convert this to:

-minMenuWidth="20rem"
+minMenuWidth="320px"

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6d67dac and d988c63.

📒 Files selected for processing (8)

• src/components/Configs/Changes/ConfigChangesFilters/ConfigTypesTristateDropdown.tsx
• src/components/Configs/ConfigsListFilters/ConfigGroupByDropdown.tsx
• src/components/Configs/ConfigsListFilters/ConfigHealthyDropdown.tsx
• src/components/Configs/ConfigsListFilters/ConfigLabelsDropdown.tsx
• src/components/Configs/ConfigsListFilters/ConfigStatusDropdown.tsx
• src/components/Configs/ConfigsListFilters/ConfigTypesDropdown.tsx
• src/components/Configs/ConfigsListFilters/ConfigsListFilters.tsx
• src/ui/Dropdowns/MultiSelectDropdown.tsx

💤 Files with no reviewable changes (1)

• src/components/Configs/ConfigsListFilters/ConfigStatusDropdown.tsx

⏰ Context from checks skipped due to timeout of 900000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Redirect rules
• GitHub Check: Header rules
• GitHub Check: Pages changed

🔇 Additional comments (6)

src/components/Configs/ConfigsListFilters/ConfigLabelsDropdown.tsx (1)

148-148: LGTM!

The width adjustment to 300px makes the labels dropdown more compact and aligns with the broader UI width standardization across filter components.

src/ui/Dropdowns/MultiSelectDropdown.tsx (1)

21-21: LGTM! Clean implementation of configurable menu width.

The new minMenuWidth prop is well-designed:

• Optional with a sensible 500px default
• Non-breaking change
• Consistently applied to both menuList and menu styles

This enables flexible dropdown sizing across the application.

Also applies to: 35-35, 179-180, 187-187

src/components/Configs/ConfigsListFilters/ConfigsListFilters.tsx (1)

36-36: LGTM! Width adjustment aligns with dropdown sizing.

Reducing the search input width from 400px to 250px creates better visual consistency with the adjusted dropdown widths across the filter components.

src/components/Configs/ConfigsListFilters/ConfigHealthyDropdown.tsx (1)

56-56: LGTM! Width increase improves readability.

Increasing the minimum menu width from 150px to 200px provides better spacing for health status options and aligns with the overall width standardization.

src/components/Configs/ConfigsListFilters/ConfigGroupByDropdown.tsx (1)

155-155: LGTM! Consistent width with other filter dropdowns.

Adding minMenuWidth="250px" standardizes the dropdown width and removes the need for fixed width constraints, making the layout more flexible.

src/components/Configs/ConfigsListFilters/ConfigTypesDropdown.tsx (1)

78-78: LGTM! Consistent width with other filter dropdowns.

The 250px minimum width standardizes the config types dropdown with other filter components (ConfigGroupByDropdown, search input), creating a more cohesive UI layout.