feat: lay out phone PR actions as a full-width kit action grid - #998
Merged
Conversation
roborev: Combined Review (
|
On a phone, the pull request page showed Approve, Merge, Close and Open Workspace as a wrapped row of buttons with uneven widths and empty gaps. Those buttons now render as one kit-ui AdaptiveActionGrid: a single row when it fits, otherwise equal touch-sized tracks with every action fully inside the viewport. Desktop and desktop-narrow pages keep the existing FitStages row and Actions menu. The grid needs kit-ui at a newer commit, so the pin moves forward. That bump changes two things downstream: autoReposition now takes a list of observed elements, and kit source imports an inline SVG that lives in Bun's global cache, outside the Vite workspace root. The Vite config allows kit's resolved source root so unit and e2e transforms can load it; svelte-check alone does not catch this. The Create Workspace split button hardcoded a 30px wrapper for its options chevron. Phone hit-target rules widen that button to 49px, so inside a grid track it spilled past the screen edge. The wrapper now sizes to its button. Also fixes the docs-assets sync script test so it can run as a pre-commit hook. Git exports GIT_DIR and GIT_INDEX_FILE to hooks, and the test's fixture repositories inherited them, so its commits, orphan docs-assets branch, and checkout landed in the real worktree instead of the temporary directory. The test now strips the repository-locating variables, the same way the context-sync test already does. Generated with Claude Code Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
The first pass rendered the phone actions as separate buttons with gaps inside a frameless grid. On a phone that still read as loose buttons rather than one control, and the right column did not land on the content edge. The grid now uses kit's joined mobile preset: no gaps or padding, square inner corners, and one rounded outer frame, so the actions form a single slab that spans the content width. The Create Workspace split button hardcoded its outer corner radii, so inside the joined slab it kept rounded corners where every other cell was square. Its halves now inherit kit's control radius. Generated with Claude Code Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
…yout On a wider phone the joined action slab still left empty space: kit's AdaptiveActionGrid kept a natural-width row whenever the buttons fit, so they sat at their own widths inside the frame. kit-ui now offers layout="grid" (kenn-io/kit-ui#50), which always fills the container with equal tracks and balanced rows. The phone PR actions use it, so the control spans the content width at 375px (2x2), 620px (2x2 with full labels) and wider (one row of four). minTrackWidth moves to 170 so primary labels such as "Squash and merge" are not truncated to fit four tracks at landscape-phone widths. The kit-ui pin advances to that commit, which sits on kit's latest main. Main adds the hand-rolled-disabled-state usage rule, and kit-ui-check gates frontend-check at zero findings, so the 60 flagged sites move to the shared token in the same change: dimmed disabled controls use var(--opacity-disabled) (0.5) instead of literal opacities between 0.3 and 0.72; two rules that deliberately kept disabled controls undimmed use opacity: unset; and five hover rules written as :hover:not(:disabled) become :hover:enabled on native buttons, which the rule no longer mistakes for a disabled state. Generated with Claude Code Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
The previous pin pointed at the head commit of kenn-io/kit-ui#50. That PR was squash-merged, so the commit is no longer on any branch and would disappear from the upstream repository. The pin now names the merge commit on kit-ui main, which carries the same layout="grid" change. Generated with Claude Code Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
…sers Phone presentation is decided from a coarse pointer, a mobile user agent, or the VITE_KENN_FORGE_FORCE_MOBILE_ROUTES build flag. A desktop browser sized to a phone viewport therefore shows the desktop layout, which makes phone UI impossible to review in an embedded or desktop browser against the dev stack. The launcher sanitizes the frontend environment to an allowlist, so the flag set in the shell never reached Vite. The allowlist now passes that flag through; it is a non-secret dev-server control like the existing KENN_FORGE_VITE_* entries. Generated with Claude Code Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
…abels The column-grid version of the phone action bar sized every row to the same tracks, so a narrow neighbour such as Close forced "Squash and merge" or "Create Workspace" to be cut off, and at some widths the buttons sat at natural width with empty space beside them. Neither is acceptable for the primary actions on a phone. kit-ui's AdaptiveActionGrid now has layout="fill" (kenn-io/kit-ui#51): each row is packed by the buttons' natural widths and then stretched to span the content width, rows are independent of each other, and a button's minimum is its own label, so nothing truncates. On a 414px phone that gives Approve, Squash and merge, and Close on one row and Create Workspace across the next. The gaps between buttons stay; the joined slab and the minimum track width are gone because the layout no longer has tracks. The kit-ui pin advances to the head of that PR and should move to the merge commit once it lands. Generated with Claude Code Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
…er, no status dropdown Three phone header problems on PR and issue pages: - The title actions (edit, star, open on provider) were bare icons with no visible boundary, and Edit was a different size from the icons beside it. They now share one bordered, equal-square treatment on phone layouts. - The inline "#<number>" copy button in the meta row was caught by the phone hit-target rule, which turned a piece of text into a 49px square and made the meta row 77px tall. It is excluded from the minimums and keeps its text size. - The kanban/review-status dropdown is hidden on phone PR pages. Its purpose is not obvious there and it competed with the primary actions for the little space above them. Desktop and desktop-narrow layouts keep it. Generated with Claude Code Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
While a pull request syncs in the background, the detail header shows a "Syncing" item at the end of the meta row. On a phone that row is already full, so the item wraps onto a line of its own and the entire page below it jumps down, then back up when the sync ends. Phone presentation now shows sync as a 2px indeterminate bar pinned to the top of the detail pane. It occupies no layout space, remains a role="status" announcement for screen readers, and is static under prefers-reduced-motion. Desktop and desktop-narrow layouts keep the inline indicator, where the meta row has room for it. Generated with Claude Code Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
mariusvniekerk
force-pushed
the
t3code/use-kit-button-grid-mobile-controls
branch
from
August 31, 2026 02:59
eadea02 to
25cf976
Compare
roborev: Combined Review (
|
… hit target The phone readability check in the full e2e suite required the inline "#<number>" copy button to be at least 44px tall. That is the standalone hit-target rule applied to a control that sits inside a text row, and it is what made the meta row 77px tall before the header tidy-up removed the minimums entirely. The button now keeps text sizing with a 24px minimum, the WCAG 2.5.8 target floor, on both PR and issue pages. The e2e assertion pins that floor instead of the 44px standalone target. Generated with Claude Code Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
roborev: Combined Review (
|
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
1 participant
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.
On a phone, the pull request page laid out Approve / Merge / Close / Open Workspace as a wrapped row of natural-width buttons: uneven widths, empty space beside them, and labels truncated at some widths. Phone-like PR routes now render those actions with kit-ui's
AdaptiveActionGridin its newlayout="fill"mode: each row is packed by the buttons' natural widths and stretched to span the content width, rows are independent of each other, and a button never shrinks below its own label. On a 414px phone that is Approve · Squash and merge · Close on one row and Create Workspace across the next. Desktop and desktop-narrow layouts keep the existingFitStagesrow and Actions menu.Phone-only header changes that came out of the same review:
#123copy button is text-sized again (it was being forced to a 49px square, making the meta row 77px tall).role="status", static under reduced motion).Dependency and tooling:
layout="fill"(and is on top of kit's latest main). Do not merge until feat: inline diff view with file tree, syntax highlighting, and keyboard nav #51 lands; the pin then moves to the merge commit. The bump brings kit'sautoRepositionarray signature, a Viteserver.fs.allowentry for kit's Bun-linked source root, and the newhand-rolled-disabled-stateusage rule: 53 literal disabled opacities becomevar(--opacity-disabled)(0.5), two deliberate no-dim rules becomeopacity: unset, and five:hover:not(:disabled)rules on native buttons become:hover:enabled.make dev-ephemeralforwardsVITE_KENN_FORGE_FORCE_MOBILE_ROUTESso phone presentation can be reviewed from a desktop browser.🤖 Generated with Claude Code
generated by a clanker