enh(frontend) Make readiness tags scrollable

[grolu]

What this PR does / why we need it:

Which issue(s) this PR fixes:
Fixes #

Special notes for your reviewer:

Release note:

Shoot and seed status tags in the cluster list are now horizontally scrollable when they overflow the available space

Summary by CodeRabbit

• New Features

  • Added horizontal scrolling support to list components for better content visibility
  • Added option to hide scrollbars for a cleaner interface

• Improvements

  • Enhanced status badge display in seed and shoot management lists with improved overflow handling

[coderabbitai]

Warning

Rate limit exceeded

@grolu has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 47 minutes and 42 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 47 minutes and 42 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: bbb09b82-0917-4ca4-9ca7-40da3957269a

📥 Commits

Reviewing files that changed from the base of the PR and between 1c6c1b3 and cfd4ac3.

📒 Files selected for processing (3)

• frontend/src/components/GScrollContainer.vue
• frontend/src/components/GSeedListRow.vue
• frontend/src/components/GShootListRow.vue

📝 Walkthrough

Walkthrough

The scroll container component now supports direction-aware fade masking for both horizontal and vertical scrolling. New direction and hideScrollbar props control scroll axis and scrollbar visibility. This capability is applied to status tag displays in list row components for horizontal overflow handling.

Changes

Cohort / File(s)	Summary
Scroll Container Enhancement frontend/src/components/GScrollContainer.vue	Replaced CSS variable-based vertical fade overlay with direction-aware inline gradient masks. Added direction prop ('x'/'y') and hideScrollbar prop. Refactored fade computation logic to derive size from scroll position and container dimensions, with conditional mask application and updated overflow handling.
List Row Integration frontend/src/components/GSeedListRow.vue, frontend/src/components/GShootListRow.vue	Wrapped status tag components (GSeedStatusTags, GStatusTags) in g-scroll-container with direction="x" and hide-scrollbar attributes to enable horizontal scrolling with hidden scrollbars for the readiness and seedReadiness columns.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

• holgerkoser
• klocke-io

Poem

🐰 A scroll that knows which way to go,
Left and right, or high and low!
With fading edges smooth and neat,
The status tags now find their beat—
Hop, scroll, and fade away! 🎀

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is incomplete. The 'What this PR does / why we need it' section is blank, and the linked issue reference is missing.	Fill in the 'What this PR does / why we need it' section to explain the motivation and implementation details, and add the related issue number.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and concisely describes the main enhancement: making readiness tags scrollable, matching the primary change across the three modified components.
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 unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch enh/scrollable_tags

---

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]

🧹 Nitpick comments (1)

frontend/src/components/GScrollContainer.vue (1)

46-62: Rename fadeHeight to be axis-agnostic.

Now that the fade supports both axes, fadeHeight is a misnomer in the horizontal case — it actually represents the max fade length along the active axis. Consider renaming for clarity.

♻️ Proposed rename

-const fadeHeight = computed(() => {
+const maxFadeSize = computed(() => {
   const size = isVertical.value ? height.value : width.value
   return Math.max(40, size / 2)
 })

 const fadeSize = computed(() => {
   ...
-  return Math.min(fadeHeight.value, Math.max(0, remaining))
+  return Math.min(maxFadeSize.value, Math.max(0, remaining))
 })

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/src/components/GScrollContainer.vue` around lines 46 - 62, Rename
the computed property fadeHeight to an axis-agnostic name (e.g., fadeLength or
fadeAxisLength) and update all references accordingly: change the computed
declaration from fadeHeight to the new name and replace fadeHeight.value usage
inside the fadeSize computed (and anywhere else it’s used) with the new property
name; ensure you keep the same logic (size = isVertical.value ? height.value :
width.value, Math.max(40, size/2)) and update any template bindings or exports
that referenced fadeHeight so the component compiles.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@frontend/src/components/GScrollContainer.vue`:
- Around line 46-62: Rename the computed property fadeHeight to an axis-agnostic
name (e.g., fadeLength or fadeAxisLength) and update all references accordingly:
change the computed declaration from fadeHeight to the new name and replace
fadeHeight.value usage inside the fadeSize computed (and anywhere else it’s
used) with the new property name; ensure you keep the same logic (size =
isVertical.value ? height.value : width.value, Math.max(40, size/2)) and update
any template bindings or exports that referenced fadeHeight so the component
compiles.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2c7af71b-a14f-405c-988b-2c6ada4a4023

📥 Commits

Reviewing files that changed from the base of the PR and between 3021d66 and 1c6c1b3.

📒 Files selected for processing (3)

• frontend/src/components/GScrollContainer.vue
• frontend/src/components/GSeedListRow.vue
• frontend/src/components/GShootListRow.vue

[petersutter]

/lgtm
/approve

[gardener-prow]

LGTM label has been added.

Details

Git tree hash: 09fc6dfef6fee9c7f996342d8a0a43684e1cfc34

[gardener-prow]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: petersutter

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 [petersutter]

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