fix: Fix Model Provider Counter in Header

[deon-sanchez]

This pull request updates the ModelProviderCount component to improve its visual consistency and interactivity. The main changes focus on adjusting the button and badge styling, as well as icon and text sizing.

UI and Styling Improvements:

• The button now includes the group class to enable group-hover effects, and the icon and text have been resized for better alignment (index.tsx).
• The Badge component within the button now uses smaller text and changes appearance on hover, improving visual feedback (index.tsx).

Code Cleanup:

• The unused cn utility import was removed to clean up the code (index.tsx).

Fix

Summary by CodeRabbit

• Style

  • Refined visual presentation of the model provider component with adjusted icon and text label sizing
  • Enhanced badge styling with improved hover state effects for better visual feedback

• Chores

  • Removed unused utility imports from the component

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

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

Walkthrough

Updated the visual styling of the model provider count component by adjusting icon and text sizes, refining Badge hover effects, and removing unused utilities. No functional or logic changes were introduced.

Changes

Cohort / File(s)	Change Summary
Component UI Refinements src/frontend/src/components/common/modelProviderCountComponent/index.tsx	Button styling: added group class. Icon sizing: BrainCog reduced from w-5 h-5 to w-4 h-4. Text label: changed from text-sm to text-xs. Badge styling: replaced conditional width logic with fixed group-hover styles. Removed unused cn utility import.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~5–10 minutes

• Visual/styling adjustments only; verify CSS class names and hover state behavior render correctly
• Confirm icon and text size reductions maintain appropriate visual hierarchy and accessibility

Pre-merge checks and finishing touches

✅ Passed checks (7 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: styling updates to the ModelProviderCount component in the header for improved visual consistency and interactivity.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Test Coverage For New Implementations	✅ Passed	PR includes comprehensive test file (ModelProviderCount.test.tsx) with extensive coverage validating component functionality remains intact after styling changes.
Test Quality And Coverage	✅ Passed	PR #11096 is a CSS-only styling update to ModelProviderCount component. The existing 267-line test suite adequately covers all component behavior and functionality. No new tests needed for styling-only changes.
Test File Naming And Structure	✅ Passed	Test files for ModelProviderCount component follow all specified patterns and structure requirements with comprehensive coverage.
Excessive Mock Usage Warning	✅ Passed	The test file demonstrates appropriate and well-designed mock usage with three justified mocks isolating external dependencies while allowing core logic testing.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

---

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

[github-actions]

Frontend Unit Test Coverage Report

Coverage Summary

Lines	Statements	Branches	Functions
	16.66% (4694/28163)	9.98% (2177/21792)	10.94% (677/6183)

Unit Test Results

Tests	Skipped	Failures	Errors	Time
1829	0 💤	0 ❌	0 🔥	23.927s ⏱️

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 33.22%. Comparing base (4a3462a) to head (d0ea6a7).

❌ Your project check has failed because the head coverage (39.43%) is below the target coverage (60.00%). You can increase the head coverage or adjust the target coverage.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #11096   +/-   ##
=======================================
  Coverage   33.21%   33.22%           
=======================================
  Files        1391     1391           
  Lines       65849    65847    -2     
  Branches     9745     9744    -1     
=======================================
+ Hits        21873    21875    +2     
+ Misses      42854    42850    -4     
  Partials     1122     1122           

Flag	Coverage Δ
frontend	15.36% <ø> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...nents/common/modelProviderCountComponent/index.tsx	94.44% <ø> (-0.56%)	⬇️

... and 2 files with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.