[nadaverell]

What

On a phone, the cluster Home health card's three fixed 300px columns clipped. The card now stacks:

1. Cluster info.
2. The Pods, Deployments and Nodes rings, in one row of three, with each ring's status lines stacked under it.
3. Resource utilization.

The secondary resource row stacks and wraps. Home joins PHONE_READY_VIEWS.

Desktop

Unchanged. Every change is behind the phone: variant. Compared against main on an EKS cluster: 0.33% at 1440px against 0.32% for main against itself (live timeline data), and within noise at 1024px.

Screenshots

Radar Cloud on a GKE cluster with touch emulation. "Before" is radar main at 390px.

[qodo-free-for-open-source-projects]

PR Summary by Qodo

Make the Home cluster health card fit phone screens

✨ Enhancement 🕐 10-20 Minutes

AI Description

• Stack cluster details, health rings, and utilization to prevent clipping on phones.
• Wrap secondary resources and mark Home as phone-ready while preserving the desktop layout.

Diagram

graph TD
  A["Phone-ready views"] --> B["Home view"] --> C["Health card"] --> D{"Phone width?"} --> E["Stacked sections"] --> F["Wrapped resources"]
  D --> G["Desktop columns"]

Loading

High-Level Assessment

Keep the breakpoint-specific styles in the existing card and register Home in the existing phone-ready gate. A separate mobile card would duplicate health display and navigation logic without a clear benefit.

Files changed (2) +22 / -21

Enhancement (2) +22 / -21

App.tsxEnable the phone-width layout for Home +1/-1

Enable the phone-width layout for Home

• Adds Home to PHONE_READY_VIEWS so the app no longer gives it the desktop-width, sideways-scrolling content wrapper on phones.

web/src/App.tsx

ClusterHealthCard.tsxStack health sections and wrap resources on phones +21/-20

Stack health sections and wrap resources on phones

• Adds phone-only layout variants that remove fixed column widths and dividers, keep the three health rings in one row, and stack their status lines. The secondary row stacks and its indicators and resources wrap; wider-screen styles remain unchanged.

web/src/components/home/ClusterHealthCard.tsx

[qodo-free-for-open-source-projects]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

Tip of the day

💡 Did you know, you can type 'qodo, fix this' on a finding and the fix lands right on your PR

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗