[nadaverell]

What

On a phone, the Helm release table keeps the two columns that matter for triage:

• Name, with the namespace as a sub-line.
• Status, with long statuses wrapping inside the badge.

Namespace, Chart, Rev and Updated hide on phones; they're all in the release detail. Helm joins PHONE_READY_VIEWS.

Desktop

Unchanged. Every change is behind the phone: variant (narrow, touch-first screens). Compared pixel by pixel against main on an EKS cluster with 23 releases: identical at 1440px, and within a refresh-icon pixel at 1024px, with the list and with a release open.

Screenshots

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

[cursor]

Bugbot needs on-demand usage enabled

Bugbot uses usage-based billing for this team and requires on-demand usage to be enabled.

A team admin can enable on-demand usage in the Cursor dashboard.

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

PR Summary by Qodo

Make Helm release triage readable on phones

✨ Enhancement 🕐 10-20 Minutes

AI Description

• Enable the Helm view to use the app’s phone-width layout instead of scrolling sideways.
• Keep release name, namespace, and status visible while hiding secondary columns on phones.

Diagram

graph TD
  A["Phone layout"] --> B["App view gate"] --> C["Helm table"] --> D["Name namespace"]
  C --> E["Status badge"]

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Use release cards on phones

• ➕ Could give each release more room for secondary information and touch targets.
• ➖ Requires a separate presentation for the same releases and more work to preserve table sorting and row behavior.

Recommendation: Keep the responsive table: it preserves the existing release interactions and desktop layout while exposing the fields most useful for phone triage. Cards are worth considering only if future phone workflows need substantially more release information at once.

Files changed (2) +22 / -17

Enhancement (2) +22 / -17

App.tsxAllow Helm to use the phone-width app layout +1/-1

Allow Helm to use the phone-width app layout

• Adds Helm to PHONE_READY_VIEWS, so the app no longer gives this view the desktop-width sideways-scrolling treatment on phones.

web/src/App.tsx

HelmView.tsxPrioritize release identity and status in the phone table +21/-16

Prioritize release identity and status in the phone table

• Hides Namespace, Chart, Rev, and Updated columns on phones, placing namespace below the release name instead. Gives the name more room, lets adjacent badges wrap, and narrows the Status column so long status text can wrap.

web/src/components/helm/HelmView.tsx

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

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0) 🎨 UX issues (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

1. Phone users cannot reach catalog controls ✓ Resolved

Description

Adding helm to PHONE_READY_VIEWS removes the horizontally scrollable desktop-width wrapper from
the whole Helm view, while ChartBrowser still puts its controls in a single non-wrapping toolbar.
On a phone, the toolbar exceeds the available width and its trailing search and repository controls
are clipped by the Helm content container.

Code

web/src/App.tsx[138]

+const PHONE_READY_VIEWS: ReadonlySet<ExtendedMainView> = new Set<ExtendedMainView>(['issues', 'helm'])

Evidence

The new set membership makes phoneScroll false for the Helm route. That selects a clipped content
wrapper instead of the desktop-width scroll wrapper; Helm's own container also hides overflow. The
catalog toolbar is one flex row without wrapping or horizontal scrolling, with search and other
controls after the source and repository controls.

web/src/App.tsx[135-138]
web/src/App.tsx[667-672]
web/src/App.tsx[2072-2079]
web/src/components/helm/HelmView.tsx[175-184]
web/src/components/helm/ChartBrowser.tsx[125-157]
web/src/components/helm/ChartBrowser.tsx[251-305]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Adding Helm to the phone-ready views removes horizontal scrolling for the catalog, but its single-row toolbar does not fit on a phone.
## Fix Focus Areas
- web/src/App.tsx[135-138]
- web/src/components/helm/ChartBrowser.tsx[127-130]
- web/src/components/helm/ChartBrowser.tsx[250-305]
## Recommended Fix
Give the catalog toolbar a phone layout that wraps or stacks its controls, keeping search, filters, and refresh within the viewport. Preserve the current desktop layout.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Two comments just repeat the code ✓ Resolved

Description

The new comment above ` and the one above the name cell's flex div` mostly restate what the
phone:hidden and phone:flex-wrap classes already show (which columns are hidden, that badges
wrap). They add little about intent beyond what the class names say, so they become stale as soon as
the column set changes.

Code

web/src/components/helm/HelmView.tsx[R304-306]

+                // Phones keep Name (namespace as a sub-line) and Status; the
+                // fixed-width columns otherwise leave Name no room. Revision and
+                // age are in the release detail.

Evidence

The comment lists which columns remain on phones (Name, Status) and where Revision and age live,
which is directly readable from the phone:hidden classes applied to the very next lines; the
second comment at line 542 likewise narrates phone:flex-wrap.

Rule 3036542: Avoid explanatory comments that restate obvious code behavior
web/src/components/helm/HelmView.tsx[304-306]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
New comments in the Helm table restate which columns are shown or hidden on phones, which is already visible from the `phone:` utility classes.
## Fix Focus Areas
- web/src/components/helm/HelmView.tsx[304-306]
- web/src/components/helm/HelmView.tsx[542-542]
## Recommended Fix
Remove the comments that only narrate the class names, or reduce them to the non-obvious rationale (e.g. why fixed-width columns leave Name no room), without listing which columns are visible.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

3. Phone users can't see why the list is ordered ✓ Resolved

Description

The Namespace, Rev and Updated column headers are hidden with the phone variant, but each
SortableTh still receives the shared sort state. A user who sorted by one of those columns on a
wider screen sees an ordered list on a phone with no visible header showing the order or letting
them change it.

Code

web/src/components/helm/HelmView.tsx[311]

+                      <SortableTh label="Namespace" sortKey="namespace" activeKey={sort?.key ?? null} direction={sort?.dir ?? 'asc'} onSort={onSort} className="w-[18%] phone:hidden" />

Evidence

The headers for Namespace, Chart, Rev and Updated are hidden on phones, yet `activeKey={sort?.key ??
null}` is still passed to them. The sort state is shared across the view, so hiding the header hides
only the indicator and not the ordering itself.

web/src/components/helm/HelmView.tsx[311-316]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
On phones the Namespace, Chart, Rev and Updated headers are hidden, but the list can remain sorted by one of them with no visible indicator.
## Fix Focus Areas
- web/src/components/helm/HelmView.tsx[311-316]
## Recommended Fix
When the phone layout is active and the sort key is a phone-hidden column, fall back to the default sort or show a visible sort indicator for it.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

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 ↗

[cursor]

Bugbot needs on-demand usage enabled

Bugbot uses usage-based billing for this team and requires on-demand usage to be enabled.

A team admin can enable on-demand usage in the Cursor dashboard.

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

Code review by qodo was updated up to the latest commit 16a8590

[cursor]

Bugbot needs on-demand usage enabled

Bugbot uses usage-based billing for this team and requires on-demand usage to be enabled.

A team admin can enable on-demand usage in the Cursor dashboard.