fix(AppHeader): wrap title when it exceeds screen/container width

[framitdavid]

Description

Before:

After:

Related Issue(s)

• closes Horisontal scrollbar vises altinn-studio#16414

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
  • Improved header responsiveness by enabling flex items to wrap. On narrow viewports, header elements now move to the next line instead of overflowing, preserving layout integrity and readability. No changes to interactions or navigation; existing behavior remains the same. This delivers a cleaner presentation across a wider range of screen sizes.

[coderabbitai]

📝 Walkthrough

Walkthrough

Added flex-wrap: wrap to the .container selector in src/components/presentation/AppHeader/AppHeader.module.css.

Changes

Cohort / File(s)	Summary of changes
AppHeader styles src/components/presentation/AppHeader/AppHeader.module.css	Updated .container to include flex-wrap: wrap.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly describes the primary change by specifying that the AppHeader title will wrap when it exceeds the container width, accurately reflecting the CSS update made in this pull request.
Linked Issues Check	✅ Passed	The change directly addresses the horizontal scrollbar issue described in issue #16414 by adding flex-wrap to the AppHeader container, preventing title overflow and eliminating the unwanted scrollbar.
Out of Scope Changes Check	✅ Passed	The only modification in this pull request is the addition of flex-wrap to the AppHeader container CSS, and there are no unrelated or extraneous changes beyond the scope of the linked issue objectives.
Description Check	✅ Passed	The pull request description follows the required template by including a summary with before and after screenshots, linking to the related issue, and detailing verification steps across manual, automated, and accessibility testing as well as status for documentation, support, sprint board, and labels.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/app-header-responsive

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 432ee85 and 9b71fa9.

📒 Files selected for processing (1)

• src/components/presentation/AppHeader/AppHeader.module.css (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.module.css

📄 CodeRabbit inference engine (CLAUDE.md)

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

Files:

• src/components/presentation/AppHeader/AppHeader.module.css

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

• GitHub Check: Install
• GitHub Check: Cypress Run Internal (5)
• GitHub Check: Cypress Run Internal (4)
• GitHub Check: Cypress Run Internal (3)
• GitHub Check: Cypress Run Internal (1)
• GitHub Check: Cypress Run Internal (6)
• GitHub Check: Cypress Run Internal (2)

🔇 Additional comments (1)

src/components/presentation/AppHeader/AppHeader.module.css (1)

1-14: Header container wrap looks good.

Allowing the flex row to wrap resolves the overflow without breaking the existing layout.

---

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

[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

[github-actions]

✅ Automatic backport successful!

A backport PR has been automatically created for the release/v4.22 release branch.

A new release branch release/v4.22 was created from release v4.22.0.

The cherry-pick was clean with no conflicts. Please review the backport PR when it appears.