Update Label styling to match ActionButton design

[Mr-Rahul-Paul]

Resolves #3568

Proposed change

The labels displayed via the LabelList component are now consistent with the design of other interactive elements, like ActionButton and are responsive.

Visual Comparison

Before:

After:

File changed

• frontend/src/components/LabelList.tsx

Checklist

• Required: I followed the contributing workflow
• Required: I verified that my code works as intended and resolves the issue as described
• Required: I ran make check-test locally: all warnings addressed, tests passed
• I used AI for code, documentation, tests, or communication related to this PR

[coderabbitai]

Summary by CodeRabbit

• Style
  • Updated label visuals: centered layout with improved spacing and gap, stronger borders and refined color palette, smoother transitions, and clearer hover interactions. Enhanced dark-mode appearance for labels. These changes affect only visual presentation—no functional or data-flow behavior was altered.

Walkthrough

Updates the LabelList Label component's root className to change visual styling (layout, spacing, border/colors, transitions, and hover/dark-mode styles) without modifying data flow or exported APIs. (Under 50 words.)

Changes

Cohort / File(s)	Summary
Label Component Styling frontend/src/components/LabelList.tsx	Replaced compact inline-block styling with a flex-centered layout, adjusted gap/padding, updated border and text colors (including dark-mode), and added transition/hover styles. Visual-only change; no logic or API edits.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Suggested reviewers

• arkid15r

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Update Label styling to match ActionButton design' clearly and specifically describes the main change in the PR, which is updating the Label component styling to be consistent with ActionButton design.
Description check	✅ Passed	The PR description is directly related to the changeset, explaining the proposed changes, providing visual comparisons, and referencing the resolved issue #3568.
Linked Issues check	✅ Passed	The PR successfully addresses issue #3568 by updating the Label component's root element styling to match ActionButton design with improved borders, colors, transitions, and responsive hover/dark-mode styles.
Out of Scope Changes check	✅ Passed	All changes in the PR are directly related to the scope of issue #3568, updating only the Label component styling in LabelList.tsx without introducing unrelated modifications.
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 docstrings

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

[cubic-dev-ai]

No issues found across 1 file

Confidence score: 5/5

• Automated review surfaced no issues in the provided summaries.
• No files require special attention.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 90.24%. Comparing base (4643156) to head (a8fcfb4).
⚠️ Report is 102 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3806      +/-   ##
==========================================
+ Coverage   85.61%   90.24%   +4.63%     
==========================================
  Files         461      463       +2     
  Lines       14254    14410     +156     
  Branches     1905     1936      +31     
==========================================
+ Hits        12203    13005     +802     
+ Misses       1672      987     -685     
- Partials      379      418      +39     

Flag	Coverage Δ
backend	90.97% <ø> (+6.49%)	⬆️
frontend	88.22% <ø> (-0.52%)	⬇️

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

Files with missing lines	Coverage Δ
frontend/src/components/LabelList.tsx	84.61% <ø> (ø)

... and 87 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4643156...a8fcfb4. Read the comment docs.

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

[kasya]

@Mr-Rahul-Paul thanks for working on this 👍🏼

I updated your code a little bit:

• changed color on some of those bg and text colors you update to decrease contrast (imo, having pure white and black colors is not the best idea),
• decreased paddings a little bit just to make use labels are not too big

[Mr-Rahul-Paul]

Thanks for the changes and feedback!! @kasya