[NAE-2218] Misaligned header on case view when displayed below 1920px

[Kovy95]

Description

fix the issue

Fixes NAE-2218

Dependencies

none

Third party dependencies

• No new dependencies were introduced

Blocking Pull requests

There are no dependencies on other PR

How Has Been This Tested?

manually

Test Configuration

<Please describe configuration for tests to run if applicable, like program parameters, host OS, VM configuration etc. You can use >

Name	Tested on
OS	linux mint 21
Runtime	node 20.18.0
Dependency Manager	npm 10.8.2
Framework version	angular 17.1.0
Run parameters
Other configuration

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• My changes have been checked, personally or remotely, with @...
• I have commented my code, particularly in hard-to-understand areas
• I have resolved all conflicts with the target branch of the PR
• I have updated and synced my code with the target branch
• I have added tests that prove my fix is effective or that my feature works
• New and existing tests pass locally with my changes:
  • Lint test
  • Unit tests
  • Integration tests
• I have checked my contribution with code analysis tools:
  • SonarCloud
  • Snyk
• I have made corresponding changes to the documentation:
  • Developer documentation
  • User Guides
  • Migration Guides

Summary by CodeRabbit

• New Features

  • Improved tabbed case view header responsiveness by enabling responsive headers.
  • Adjusted header layout to show up to 6 columns by default in the tabbed case view.
  • Removed an explicit max header columns limit in one view to use default behavior.

• Bug Fixes

  • Prevented potential runtime errors when header configuration is missing by safely handling undefined headers.

[coderabbitai]

Walkthrough

Templates adjust nc-header parameters in two tabbed case view components, including removing a maxHeaderColumns binding in one and changing max/responsive settings in another. A TypeScript change adds optional chaining when splitting headers to avoid undefined access. No exported APIs changed.

Changes

Cohort / File(s)	Summary
Tabbed case view templates projects/nae-example-app/src/app/doc/tabbed-case-view/tabbed-case-view/tabbed-case-view.component.html, projects/netgrif-components/src/lib/navigation/group-navigation-component-resolver/default-components/tabbed/default-tabbed-case-view/default-tabbed-case-view.component.html	Adjust nc-header bindings: remove [maxHeaderColumns]="7" in example app template; change maxHeaderColumns from 9 to 6 and set [responsiveHeaders]="true" (from false) in default tabbed case view.
Case ref header parsing guard projects/netgrif-components-core/src/lib/data-fields/case-ref-field/model/abstract-case-ref-base-field-component.ts	Add optional chaining on headers before .split(',') to safely handle undefined (properties?.headers?.split(',')).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

bugfix

Pre-merge checks

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Title Check	✅ Passed	The title clearly describes the main purpose of the changes by identifying the issue number and summarizing the fix for header misalignment on the case view below 1920px, matching the adjustments to header column constraints and responsive behavior in the templates.

---

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