Correct height of BitDropdown elements (#12104)

[msynk]

closes #12104

Summary by CodeRabbit

• Style
  • Enhanced dropdown component styling with improved layout structure and refined visual consistency across interactive states.

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

Walkthrough

The BitDropdown component receives styling updates to address height inconsistency with BitNumberField. A flex container layout is introduced to the dropdown root, label and wrapper elements receive adjusted styling for consistent vertical spacing, and minor whitespace normalization occurs in ARIA attributes.

Changes

Cohort / File(s)	Summary
BitDropdown Styling src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss	Introduces flex container with column direction for layout, adjusts label line-height and color, fixes wrapper height, reorganizes disabled-item styling structure, and updates hover/focus interactions.
BitDropdown Markup src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.razor	Normalizes whitespace in ARIA attribute ternaries (aria-owns and aria-controls) by removing space before conditional operators.
BitDropdownClassStyles Encoding src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdownClassStyles.cs	Adds Byte Order Mark (BOM) to file header; no semantic changes to code.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A dropdown once stood rather tall,
Its height would not align at all,
But flex and spacing, oh so fine,
Now every component's in a line!
With labels bright and space just right, ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Correct height of BitDropdown elements (#12104)' directly reflects the main objective of this PR—fixing the height inconsistency in BitDropdown styling to match BitNumberField, which is the core focus of the linked issue.
Linked Issues check	✅ Passed	The PR addresses the linked issue #12104 by modifying BitDropdown.scss to introduce flex layout and height adjustments, directly targeting the height inconsistency and alignment problem described in the issue.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing BitDropdown height: SCSS styling adjustments (flex layout, heights), minor whitespace normalization in Razor, and a BOM insertion in the CS file—all within scope of resolving the height mismatch issue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

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

---

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/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss (1)

695-704: Inconsistent indentation on top-level .bit-drp-itm[disabled] selector.

.bit-drp-itm closes at line 693. The .bit-drp-itm[disabled] block that follows is a top-level selector in SCSS (braces, not indentation, define nesting), yet it carries 4 spaces of leading indentation — unlike every other top-level rule in the file. It compiles correctly, but the indentation visually implies nesting inside .bit-drp-itm.

♻️ Proposed cleanup

-.    .bit-drp-itm[disabled] {
-        cursor: default;
-        color: $clr-fg-dis;
-
-        `@media` (hover: hover) {
-            &:hover {
-                background-color: transparent;
-            }
-        }
-    }
+.bit-drp-itm[disabled] {
+    cursor: default;
+    color: $clr-fg-dis;
+
+    `@media` (hover: hover) {
+        &:hover {
+            background-color: transparent;
+        }
+    }
+}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss` around
lines 695 - 704, The `.bit-drp-itm[disabled]` selector block is indented as if
nested even though it is a top-level SCSS rule; fix by removing the leading
4-space indent so the `.bit-drp-itm[disabled] { ... }` block aligns with other
top-level rules (preserve the existing braces, properties, and the nested
`@media (hover: hover) { &:hover { ... } }` structure inside the block).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss`:
- Line 135: Update the .bit-drp-wrp rule in BitDropdown.scss to use min-height
instead of a fixed height so the wrapper can grow when chips wrap in
multi-select mode; locate the .bit-drp-wrp selector and replace height:
spacing(4) with min-height: spacing(4) to keep the 32px baseline while allowing
expansion for wrapped .bit-drp-tcn/.bit-drp-sch chip rows.

---

Nitpick comments:
In `@src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss`:
- Around line 695-704: The `.bit-drp-itm[disabled]` selector block is indented
as if nested even though it is a top-level SCSS rule; fix by removing the
leading 4-space indent so the `.bit-drp-itm[disabled] { ... }` block aligns with
other top-level rules (preserve the existing braces, properties, and the nested
`@media (hover: hover) { &:hover { ... } }` structure inside the block).