CNV-75949: make VM YAML editor take up full height

[adamviktora]

📝 Description

• make VM YAML editor take up full height
• the horizontal-navbar__routes class with height: 100% will always be added to prevent similar bugs if a custom routesClassName is applied

🎥 Demo

Before:

After:

Summary by CodeRabbit

• Style
  • Improved horizontal navbar styling to ensure routes section occupies full height
  • Enhanced class name handling for better component styling consistency

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

[openshift-ci-robot]

@adamviktora: This pull request references CNV-75949 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the bug to target the "4.22.0" version, but no target version was set.

Details

In response to this:

📝 Description

• make VM YAML editor take up full height
• the horizontal-navbar__routes class with height: 100% will always be added to prevent similar bugs if a custom routesClassName is applied

🎥 Demo

Before:

After:

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[coderabbitai]

📝 Walkthrough

Walkthrough

Updates the HorizontalNavbar component by adding CSS styling for full-height layout and refactoring the className handling from conditional fallback to a utility function for improved class name merging.

Changes

Cohort / File(s)	Summary
HorizontalNavbar Component Styling src/utils/components/HorizontalNavbar/HorizontalNavbar.scss, src/utils/components/HorizontalNavbar/HorizontalNavbar.tsx	Adds new CSS rule for .horizontal-navbar__routes with height: 100% for full-height layout. Imports SCSS file and refactors className logic from conditional fallback (routesClassName || 'horizontal-navbar__routes') to classNames() utility function for better class name merging and falsy value handling.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested labels

lgtm, approved

Suggested reviewers

• batyana
• metalice
• upalatucci

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: making the VM YAML editor take up full height, which is the primary objective of this PR.
Description check	✅ Passed	The description includes both required sections (📝 Description and 🎥 Demo) with clear explanations and before/after screenshots demonstrating the layout fix.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bab684d and a3852ab.

📒 Files selected for processing (2)

• src/utils/components/HorizontalNavbar/HorizontalNavbar.scss
• src/utils/components/HorizontalNavbar/HorizontalNavbar.tsx

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-12-09T17:30:56.131Z

Learnt from: rszwajko
Repo: kubevirt-ui/kubevirt-plugin PR: 3235
File: src/views/checkups/self-validation/details/tabs/details/components/CheckupsSelfValidationDetailsDescriptionList.tsx:26-93
Timestamp: 2025-12-09T17:30:56.131Z
Learning: When using the Timestamp component from openshift-console/dynamic-plugin-sdk, you can pass sentinel values like NO_DATA_DASH directly to the timestamp prop without wrapping in conditional rendering. The component handles invalid/missing values gracefully. This applies to all TSX files that render the Timestamp component; ensure you do not add extra conditional logic for such values and rely on the component's internal handling. Reference: OpenShift Console Timestamp.tsx implementation.

Applied to files:

• src/utils/components/HorizontalNavbar/HorizontalNavbar.tsx

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

• GitHub Check: build

🔇 Additional comments (3)

src/utils/components/HorizontalNavbar/HorizontalNavbar.scss (1)

1-4: LGTM! Clean CSS addition for full-height layout.

The new CSS rule correctly sets the routes container to occupy full available height, enabling the YAML editor to expand properly. The inline comment provides helpful context.

src/utils/components/HorizontalNavbar/HorizontalNavbar.tsx (2)

15-15: LGTM! Standard component styling import.

The SCSS import follows best practices and brings in the necessary styles for the full-height layout.

---

112-112: Excellent fix! Ensures base class is always applied.

The refactor from routesClassName || 'horizontal-navbar__routes' to classNames('horizontal-navbar__routes', routesClassName) is a key improvement. Previously, providing a custom routesClassName would completely replace the base class, losing the height: 100% styling. Now the base class is always present, and custom classes are properly merged.

---

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

[openshift-ci-robot]

@adamviktora: This pull request references CNV-75949 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the bug to target the "4.22.0" version, but no target version was set.

Details

In response to this:

📝 Description

• make VM YAML editor take up full height
• the horizontal-navbar__routes class with height: 100% will always be added to prevent similar bugs if a custom routesClassName is applied

🎥 Demo

Before:

After:

Summary by CodeRabbit

• Style
• Improved horizontal navbar styling to ensure routes section occupies full height
• Enhanced class name handling for better component styling consistency

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

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: adamviktora, batyana

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [adamviktora]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment