Repository navigation
Phone layout for Topology: filters collapse and overlay the graph - #2335
Merged
Merged
Conversation
The app shell keeps an ~800px content floor so desktop layouts don't squeeze in narrow windows. Its content column clips horizontally, so on a phone every view was laid out at 856px and its right half was unreachable. Below 640px (the width Radar already treats as mobile) the floor no longer applies, and the views that broke without it now reflow there: - PageHeader: actions wrap under the title; the description wraps. - Issue cards: in a narrow container the title row wraps and the per-row action joins the meta line, so the title keeps the full width. - Resource detail: the header stacks (identity, then actions) and the tab-strip controls wrap under the tabs. - Helm: Name (with the namespace under it), Status and Updated. - Home cluster card: the three columns stack. - The floating update prompt spans the width and drops the shell command.
Issue rows mounted their per-row actions twice (one copy hidden by the container query). The header row now wraps instead: in a narrow container the meta chips, actions and chevron move to a line of their own under the title, so actions and chips each render once. Wide rows are unchanged. On phones the Home resource links flow and wrap instead of a fixed two columns, long Helm statuses wrap inside the badge, and the floating update prompt links to the release for package-manager installs whose command it hides.
Radar Cloud hides UpdateNotification when embedded, and this PR's scope is what the hosted app renders on phones.
âĶone layout A phone is now a narrow touch-first screen ((max-width: 639px) and (pointer: coarse)): a desktop window narrowed past 640px keeps the 800px floor and the desktop layout, and dev-tools device mode still gets the phone layout. k8s-ui exports PHONE_MEDIA_QUERY, usePhoneLayout and a phone: Tailwind variant so every surface switches on the same rule. On a phone the shell floor is 360px. Views opt into the phone layout through PHONE_READY_VIEWS; the rest keep their 800px desktop width in a container that scrolls sideways, so nothing is squeezed or clipped. The Issues, Helm and Home layouts move to their own PRs, so each view gets its own design pass; the shared page header and detail shell stay here, on the phone: variant.
On a phone the filter panel starts collapsed to its icon rail, and when expanded it overlays the graph instead of taking two thirds of the width. Topology joins PHONE_READY_VIEWS; the graph itself pans and zooms. Desktop is unchanged: both new wrappers are display: contents outside the phone layout.
# Conflicts: # web/src/App.tsx
PR Summary by QodoOverlay Topology filters on phones without shrinking the graph
AI Description
Diagram
High-Level Assessment
Files changed (1)
|
Code Review by Qodo
1.
|
![qodo-free-for-open-source-projects[bot]](https://avatars.githubusercontent.com/in/1068000?s=60&v=4){kind=small}
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
With Topology opted in to the phone layout there is no sideways scroll, and the overlay row (search, freshness, Policies, grouping, Resources / Network Flow / Fleet) was wider than the canvas, clipping the mode buttons. On phones the controls wrap below the search and within themselves.
# Conflicts: # web/src/App.tsx
Bugbot needs on-demand usage enabledBugbot 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. |
# Conflicts: # web/src/App.tsx
# Conflicts: # web/src/App.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
On a phone, Topology's filter panel took two thirds of the width from the graph.
PHONE_READY_VIEWS.Split out of #2324, which is superseded by this PR and #2328.
Desktop
Unchanged. The initial collapsed state and both new wrappers apply only under the phone rule; outside it the wrappers are
display: contents. Compared against main on an EKS cluster (one namespace, since the whole cluster is too large to graph) at 1440 and 1024px, including collapsing and expanding the filters: differences are at the level of main against itself (1â2%, the graph layout varies between loads).Screenshots
Radar Cloud on a GKE cluster with touch emulation. "Before" is radar main at 390px.