fix: fixed style for label and description

[JamalAlabdullah]

Description

Related Issue(s)

• closes #{issue number}

Verification/QA

• Manual functionality testing
  • I have tested these changes manually
  • Creator of the original issue (or service owner) has been contacted for manual testing (or will be contacted when released in alpha)
  • No testing done/necessary
• Automated tests
  • Unit test(s) have been added/updated
  • Cypress E2E test(s) have been added/updated
  • No automatic tests are needed here (no functional changes/additions)
  • I want someone to help me make some tests
• UU/WCAG (follow these guidelines until we have our own)
  • I have tested with a screen reader/keyboard navigation/automated wcag validator
  • No testing done/necessary (no DOM/visual changes)
  • I want someone to help me perform accessibility testing
• User documentation @ altinn-studio-docs
  • Has been added/updated
  • No functionality has been changed/added, so no documentation is needed
  • I will do that later/have created an issue
• Support in Altinn Studio
  • Issue(s) created for support in Studio
  • This change/feature does not require any changes to Altinn Studio
• Sprint board
  • The original issue (or this PR itself) has been added to the Team Apps project and to the current sprint board
  • I don't have permissions to do that, please help me out
• Labels
  • I have added a kind/* and backport* label to this PR for proper release notes grouping
  • I don't have permissions to add labels, please help me out

Summary by CodeRabbit

• Style
  • Option descriptions in the multi-select dropdown now render as distinct block text with improved spacing and subtle, muted color for better readability.
  • Description text is consistently styled across dropdown items, improving visual hierarchy and legibility when additional option details are present.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a CSS module class for option descriptions and updates the MultipleSelect component to wrap rendered option.description in a styled <span> using that class.

Changes

Cohort / File(s)	Change Summary
Option description styling + component update src/layout/MultipleSelect/MultipleSelectComponent.module.css, src/layout/MultipleSelect/MultipleSelectComponent.tsx	Adds .optionDescription CSS class (display: block; margin-top: var(--ds-size-1); color: var(--ds-color-neutral-text-subtle);). Imports the CSS module in the component and wraps option.description output in a <span> using classes.optionDescription while preserving existing Lang rendering when option.description exists.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify the CSS module import path and build resolves CSS modules correctly.
• Confirm the new wrapper does not change accessibility, layout, or text rendering (including Lang rendering) in dropdown items.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description follows the required template structure but lacks critical implementation details in the Description section and has an incomplete issue reference.	Add a detailed description of the styling changes made to MultipleSelectComponent (CSS class and visual impact). Complete the 'Related Issue(s)' section by replacing '{issue number}' with the actual issue number being fixed.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title describes style fixes for label and description in MultipleSelect, which aligns with the CSS styling additions and rendering enhancements made to the component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch 3787-multipleselect-label-og-description-ifra-kodeliste-legges-etter-hverandre-uten-skilletegn

---

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: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 41959ab and 8834e56.

📒 Files selected for processing (2)

• src/layout/MultipleSelect/MultipleSelectComponent.module.css (1 hunks)
• src/layout/MultipleSelect/MultipleSelectComponent.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (2)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Avoid using any and unnecessary type casts (as Type) in TypeScript; prefer precise typings and refactor existing casts/anys
For TanStack Query, use objects to manage query keys and functions, and centralize shared options via queryOptions

Files:

• src/layout/MultipleSelect/MultipleSelectComponent.tsx

**/*.module.css

📄 CodeRabbit inference engine (CLAUDE.md)

Use CSS Modules for component styling and follow existing patterns in *.module.css files

Files:

• src/layout/MultipleSelect/MultipleSelectComponent.module.css

🧠 Learnings (2)

📚 Learning: 2025-08-22T13:53:28.252Z

Learnt from: CR
Repo: Altinn/app-frontend-react PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-08-22T13:53:28.252Z
Learning: Applies to **/*.module.css : Use CSS Modules for component styling and follow existing patterns in `*.module.css` files

Applied to files:

• src/layout/MultipleSelect/MultipleSelectComponent.tsx
• src/layout/MultipleSelect/MultipleSelectComponent.module.css

📚 Learning: 2025-08-22T13:53:28.252Z

Learnt from: CR
Repo: Altinn/app-frontend-react PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-08-22T13:53:28.252Z
Learning: Applies to **/*.test.{ts,tsx} : In tests, use `renderWithProviders` from `src/test/renderWithProviders.tsx` to supply required form layout context

Applied to files:

• src/layout/MultipleSelect/MultipleSelectComponent.tsx

🧬 Code graph analysis (1)

src/layout/MultipleSelect/MultipleSelectComponent.tsx (1)

src/features/language/Lang.tsx (1)

• Lang (15-23)

⏰ 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). (3)

• GitHub Check: Analyze (javascript)
• GitHub Check: Install
• GitHub Check: Type-checks, eslint, unit tests and SonarCloud

🔇 Additional comments (1)

src/layout/MultipleSelect/MultipleSelectComponent.tsx (1)

17-17: LGTM!

The CSS module import follows the project convention and coding guidelines correctly.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud