[WEB-5576] fix: remove optionsClassName from email and workspace forms; add custom scrollbar styles and shadow utility in globals.css

[prateekshourya29]

Description

Type of Change

• Bug fix (non-breaking change which fixes an issue)

Summary by CodeRabbit

• Style
  • Scrollbars now hidden by default with new customizable size variants and utility classes
  • Added shadow and blur effect utility classes for design flexibility
  • Updated dropdown styling in email configuration and workspace creation areas

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

[makeplane]

Linked to Plane Work Item(s)

• [WEB-5576] Dropdown width and scrollbar CSS issue in admin application

This comment was auto-generated by Plane

[coderabbitai]

Walkthrough

This pull request removes a styling prop from CustomSelect components in two forms and enhances the global stylesheet with new scrollbar utilities and custom shadow/blur classes. All changes are presentation-focused with no modifications to application logic or control flow.

Changes

Cohort / File(s)	Summary
CustomSelect prop removal apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx, apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx	Removed optionsClassName="w-full" prop from CustomSelect components. Styling of options dropdown width is now governed by default component behavior.
Global stylesheet utilities apps/admin/styles/globals.css	Added global scrollbar hiding rules (webkit and Firefox), introduced scrollbar size variants (scrollbar-xs, scrollbar-sm, scrollbar-md, scrollbar-lg with fixed dimensions), and added utility classes for shadow-custom and backdrop-blur-custom effects.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Verify that removing optionsClassName="w-full" doesn't introduce unintended width changes or UX regressions in email security and workspace creation dropdowns
• Confirm global scrollbar styling rules don't conflict with existing component-level scrollbar behavior or accessibility features

Poem

🐰 Scrollbars hidden, styles refined,
CustomSelects redesigned,
New utilities in CSS arrays,
Styling tweaks brighten our days! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is incomplete. Only the bug fix checkbox is marked; critical sections like Description, Test Scenarios, and References are empty or contain only template comments.	Fill in the Description section with details about why optionsClassName was removed and what scrollbar changes were made. Add Test Scenarios section with verification steps and References linking issue WEB-5576.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes all three main changes in the PR: removing optionsClassName from forms and adding scrollbar/shadow styles to globals.css.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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-admin-dropdowns

---

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

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 739b1bf and 93c787d.

📒 Files selected for processing (3)

• apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx (0 hunks)
• apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx (0 hunks)
• apps/admin/styles/globals.css (2 hunks)

💤 Files with no reviewable changes (2)

• apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx
• apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx

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

• GitHub Check: Build and lint web apps
• GitHub Check: Analyze (javascript)

🔇 Additional comments (3)

apps/admin/styles/globals.css (3)

299-301: Verify global scrollbar hide doesn't break existing components.

Hiding scrollbars globally via ::-webkit-scrollbar { display: none; } is a significant change. While the opt-in utility classes (.vertical-scrollbar, .horizontal-scrollbar, .scrollbar-xs/sm/md/lg) provide a way to re-enable them, confirm that:

• All components that require scrollbars are using one of these utility classes.
• The Firefox equivalent (scrollbar-width: none in the @-moz-document block) is properly scoped.
• No unintended visual regressions occur in dropdown menus or other scrollable UI elements.

---

363-370: Scrollbar utility pattern is consistent and well-structured.

The new .scrollbar-xs variant follows the existing pattern used by .scrollbar-sm/md/lg and integrates cleanly with the global scrollbar handling. No issues identified.

---

372-374: Shadow utility is correctly defined.

The .shadow-custom class applies a valid box-shadow with RGBA values. The inline comment accurately documents the hex-to-RGB conversion.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

Fix incorrect Tailwind syntax in .backdrop-blur-custom.

The correct Tailwind syntax for backdrop blur uses backdrop-blur-* utilities. The current code uses @apply backdrop-filter blur-[9px], which is incorrect: backdrop-filter is a CSS property (not a Tailwind utility), and blur-[9px] is for element blur, not backdrop blur.

Apply this diff to fix the syntax:

-.backdrop-blur-custom {
-  @apply backdrop-filter blur-[9px];
-}
+.backdrop-blur-custom {
+  @apply backdrop-blur-[9px];
+}

Alternatively, use raw CSS if you prefer not to use @apply:

-.backdrop-blur-custom {
-  @apply backdrop-filter blur-[9px];
-}
+.backdrop-blur-custom {
+  backdrop-filter: blur(9px);
+}

🤖 Prompt for AI Agents

In apps/admin/styles/globals.css around lines 376-378, the .backdrop-blur-custom
rule uses incorrect Tailwind syntax (@apply backdrop-filter blur-[9px]); remove
the non-utility backdrop-filter and element blur utility and replace with the
correct backdrop utility, e.g. use @apply backdrop-blur-[9px]; (or, if you
prefer raw CSS, set backdrop-filter: blur(9px); directly) so the class applies a
backdrop blur rather than an element blur.