fix: prevent dropdown arrow from centering when Select height increases #22877
Conversation
|
@kartik-212004 is attempting to deploy a commit to the cal Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe change updates the CSS class string for the Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Possibly related PRs
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/ui/components/form/select/Select.tsx (1)
107-111: Double-check the necessity of!items-start+h-full.The new class string forces
items-startwith the!important flag and also stretches the indicators container toh-full.
Both choices look fine for the reported bug, but they also override any consumer-supplied alignment or height coming fromclassNames.indicatorsContainer.Please verify (in both single- and multi-select scenarios, open/closed menu, sm/md sizes) that:
- The full-height container does not create unexpected extra padding above/below the arrow.
- Downstream overrides still apply as expected; if not, consider removing the
!or moving the rule to a higher-specificity selector instead of relying on!important.No blocking issues—just a quick manual sanity check.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/ui/components/form/select/Select.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Always use
t()for text localization in frontend code; direct text embedding should trigger a warning
Files:
packages/ui/components/form/select/Select.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js
.utc()in hot paths like loops
Files:
packages/ui/components/form/select/Select.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: Install dependencies / Yarn install & cache
- GitHub Check: Codacy Static Code Analysis
Graphite Automations"Add community label" took an action on this PR • (08/03/25)1 label was added to this PR based on Keith Williams's automation. |
E2E results are ready! |
What does this PR do?
Fixes the Select component dropdown arrow alignment issue where the arrow would centre vertically when the Select component's height increased, instead of staying positioned at the top.
Visual Demo (For contributors especially)
Image Demo (if applicable):
before:
after:
Mandatory Tasks (DO NOT REMOVE)
How should this be tested?
Checklist