fix(settings/ui): style fixes for settings components

[kzamanbd]

Summary

Style fixes for settings UI components — vertical centering of icons/affixes and active-state styling for sidebar menu items.

Changes

• fields.tsx — Replace top-1/2 -translate-y-1/2 centering with inset-y-0 flex items-center for the show/hide toggle button and number-field prefix/postfix spans. More robust vertical centering that doesn't depend on transform.
• settings-sidebar.tsx — Same centering fix for the search icon (inset-y-0 my-auto).
• sidebar.tsx:
  • Drop min-h-svh from the sidebar wrapper so it no longer forces full viewport height.
  • Active menu items now use bg-primary/10 + text-primary (was bg-sidebar-accent) for a clearer selected state.
  • Sub-menu buttons: add w-full, primary-tinted active state, active SVG color, and font-medium on active.

Test plan

• Verify settings sidebar active/selected items render with primary tint
• Verify number field prefix/postfix and show/hide toggle stay vertically centered
• Verify search icon centered in settings sidebar search input

Summary by CodeRabbit

• Style
  • Improved vertical alignment of UI components including toggle buttons and form field adornments
  • Updated active state styling for sidebar menu items with refined visual appearance

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 3bdc281f-55fc-4d68-9aef-b633a3b0f8b8

📥 Commits

Reviewing files that changed from the base of the PR and between c246a1a and 48ce480.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (3)

• src/components/settings/fields.tsx
• src/components/settings/settings-sidebar.tsx
• src/components/ui/sidebar.tsx

---

📝 Walkthrough

Walkthrough

Three files receive CSS styling updates: field component elements transition to inset-y-0-based vertical centering; the sidebar search icon adopts the same centering approach; and the sidebar menu components update active-state colors from sidebar-accent to primary-based values while removing a height constraint.

Changes

UI Styling Refactor

Layer / File(s)	Summary
Vertical alignment improvements src/components/settings/fields.tsx, src/components/settings/settings-sidebar.tsx	Show/Hide toggle, NumberField prefix and postfix spans, and sidebar search icon use inset-y-0 with flex or my-auto for vertical centering, replacing top-1/2 -translate-y-1/2 approaches.
Sidebar component styling updates src/components/ui/sidebar.tsx	SidebarProvider removes min-h-svh from desktop wrapper; SidebarMenuButton and SidebarMenuSubButton active states change from sidebar-accent to primary-based colors with updated SVG and font-weight styling.

🎯 1 (Trivial) | ⏱️ ~3 minutes

A rabbit hops through the styles with glee,
Centering elements—inset, not translate, you see!
Primary colors shine where accents once gleamed,
Refined layouts flow as the designer dreamed. 🐰✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(settings/ui): style fixes for settings components' accurately describes the main changes: CSS styling updates across settings and UI components for vertical centering and active-state styling.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/dokan-settings-style

---

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