Repository navigation
[3307 by Claude Opus 5.5] Prevent mobile task PR badge from overlapping review actions at 320px - #3309
Conversation
![propr-dev[bot]](https://github.githubassets.com/images/gravatars/gravatar-user-420.png){kind=avatar}
…eir own line, and the review actions wrap below them. `#28` no longer slides under `/review`. The new browser test fails on the untouched code at 320px and passes with the fix. The 390px and desktop control cases pass both before and after. The fix (three class changes, in the component shared by web, native and mobile): - `index.tsx` (`MobileSummary`): the row holding the Git links and the actions can now wrap onto a second line instead of squeezing the Git links. - `ContextStrip.tsx` (`MobileGitContext`): the Git links stay beside the actions only if they get at least 9rem. Otherwise they take the whole line. The repository name inside the PR badge can still truncate, but the PR number and link icon stay inside the link. The badge can't grow wider than the line. - `ActionBar.tsx` (expanded mobile summary only): the actions stay right-aligned and can wrap instead of running off the screen. The one-line compact bar is unchanged. Nothing else changes: the owner-above-repository header, the PR and issue destinations, the `/review` button and its command menu, Follow Up, the overflow menu, and assignment and runtime info are all as before. At 390px with this long repository name, the actions now also sit on a second line under the Git links. The regression test is `propr-ui/e2e/task-header-git-actions-mobile.pw.ts`. It uses fixed fixture data: owner `propr-ultrafix`, repository `propr-desktop-acceptance-20260909`, PR #28 with linked issue #27, and an unmerged PR so the follow-up actions appear. Every API call is answered by the fixture, so nothing is sent to providers or GitHub. It checks five phone layouts: 320×844, 390×844, 320×568, 568×320, and 320px with enlarged text and zoom. A sixth case checks desktop. For each layout it checks that: - `#28` and every child element, icons included, stay inside the PR link's box. - hit tests on the PR link, the issue link, `#28` and each action land on the right element. - no two controls overlap. - the links go to the correct URLs. - Tab moves from the PR link to the issue link to `/review`. - there is no horizontal overflow on the page or the task panel. On the untouched code: the 320px, short portrait and enlarged-text cases failed because `#28` ran 25–41px past its link. The 390px, landscape and desktop cases passed. With the fix: - The new test passes 6/6. - I also ran 18 existing task-header, mobile and follow-up Playwright files: 186 tests, all passing. - The 426 TaskDetails unit tests pass, and so do ESLint with zero warnings and `tsc --noEmit`. - `index.tsx` was over the 400-line lint limit, so I kept its new comment to one line. I saved preview screenshots of all five phone layouts.
|
/review codex-astra Independently review exact head 4d28ce7 against issue #3307 and the full intended mobile/native/web header behavior. Operator actual authenticated 320px evidence on base a926 shows a24.06px Git group, repository text zero-width, and the '#28' span at x38 hit-testing to '/review'.390px control is correctly hit-tested; both have zero document horizontal overflow. This is a genuine wrong-action target, not just cosmetic truncation. Check the wrapping/flex sizing changes across 320/390, short portrait, landscape, enlarged text/native zoom and desktop. Preserve visible PR/issue identity and correct link URLs, touch/focus/keyboard access, existing review/command/follow-up/overflow actions, assignment/runtime rows, owner-over-repository full-width header and compact variants. Ensure this shared implementation fixes the cause rather than hiding controls or treating zero overflow as sufficient. Inspect the new test's descendant containment, hit targets, control intersections, keyboard ordering and viewport assumptions. Device scale does not itself prove native zoom; report coverage honestly. Assess no regressions from min-width/wrap/right-alignment classes and no missing touch target or clipping implications. Author claims and screenshots are not operator qualification. Independent exact-head browser positive and untouched-base negative controls plus shared native integration will be evaluated separately. Navigation PR #3308 is independent and still undergoing full browser/unit/CI validation; neither PR authorizes publication or waives any original28 Linux/mobile release requirements. No provider/model invocation, API writes, GitHub permission changes or credential access is needed for validation. Require green CI and exact tested/reviewed head before merge. |
|
✅ AI Code Review Complete requested by @integry Posted 1 review: |
🔍 AI Code Review — codex-astraOverall EvaluationThe layout change addresses the reported cause: competing Git and action groups can wrap instead of squeezing the PR badge beneath ✅ Fixes the sizing interaction — The wrapping parent, Git group’s ✅ Preserves existing behavior — The production changes affect layout classes only. Link destinations, action handlers, assignment/runtime rendering, full repository identity, and the separate desktop and collapsed-action branches remain intact. ✅ Tests the actual failure mode — The new tests check PR-number containment, control intersections, link destinations, and hit testing—including the number itself—rather than relying solely on document overflow. This review used the supplied complete diff and surrounding excerpts; no commands or browser tests were run. The supplied issue body is truncated, but the detailed review request supplies the relevant behavior expectations. Current checks report no failures and six pending; merge should require green CI and qualification of the exact reviewed head, Merge blockersNo merge blockers. SuggestionsThese are optional follow-ups and are not sent to S1: 🟢 Describe zoom coverage accuratelyIn S2: 🟢 Extend interaction and state coverageThe new tests establish useful geometry and initial keyboard ordering, but do not exercise touch input, open the command menu or action sheet, activate Follow Up, or scroll into the compact header. Their fixture also does not establish populated assignment/runtime behavior. Additional cases would strengthen regression protection after wrapping changes, especially in short landscape layouts. These are optional test improvements, not evidence of broken controls. S3: 🟢 Clarify containment helper guaranteesThe ScoreThe implementation is focused and statically consistent with the objective, with meaningful regression assertions. The material remaining gap is independent exact-head browser positive, untouched-base negative, and native integration evidence—not the pending checks alone. Score: 7/10 🤖 Review Details
Copy and edit to choose records from this review: 🤖 Review by ProPR |
AI Implementation Summary
Closes #3307
Branch:
3307/claude-opus-5-5-prevent-mobile-task-pr-ba-20261021-0437-o8wCommits: ✅ Changes committed (4d28ce7)
AI Processing Completed
Execution Details:
Summary:
At 320px, the PR and issue links in the mobile task header now get their own line, and the review actions wrap below them.
#28no longer slides under/review. The new browser test fails on the untouched code at 320px and passes with the fix. The 390px and desktop control cases pass both before and after.The fix (three class changes, in the component shared by web, native and mobile):
index.tsx(MobileSummary): the row holding the Git links and the actions can now wrap onto a second line instead of squeezing the Git links.ContextStrip.tsx(MobileGitContext): the Git links stay beside the actions only if they get at least 9rem. Otherwise they take the whole line. The repository name inside the PR badge can still truncate, but the PR number and link icon stay inside the link. The badge can't grow wider than the line.ActionBar.tsx(expanded mobile summary only): the actions stay right-aligned and can wrap instead of running off the screen. The one-line compact bar is unchanged.Nothing else changes: the owner-above-repository header, the PR and issue destinations, the
/reviewbutton and its command menu, Follow Up, the overflow menu, and assignment and runtime info are all as before. At 390px with this long repository name, the actions now also sit on a second line under the Git links.The regression test is
propr-ui/e2e/task-header-git-actions-mobile.pw.ts. It uses fixed fixture data: ownerpropr-ultrafix, repositorypropr-desktop-acceptance-20260909, PR #28 with linked issue #27, and an unmerged PR so the follow-up actions appear. Every API call is answered by the fixture, so nothing is sent to providers or GitHub. It checks five phone layouts: 320×844, 390×844, 320×568, 568×320, and 320px with enlarged text and zoom. A sixth case checks desktop. For each layout it checks that:#28and every child element, icons included, stay inside the PR link's box.#28and each action land on the right element./review.On the untouched code: the 320px, short portrait and enlarged-text cases failed because
#28ran 25–41px past its link. The 390px, landscape and desktop cases passed.With the fix:
tsc --noEmit.index.tsxwas over the 400-line lint limit, so I kept its new comment to one line.I saved preview screenshots of all five phone layouts.
Detailed Logs:
8ed2744c-cc72-4f65-814c-b58d3e4f7816Log files stored at:
/usr/src/app/logs/executions/issue-3307-2026-10-21T04-54-13-699Z-conversation.json/usr/src/app/logs/executions/issue-3307-2026-10-21T04-54-13-699Z-output.txtLatest Conversation Messages
This PR was created automatically by ProPR after processing issue #3307.
💡 Need changes?
Comment on this PR to request refinements — the AI agent monitors comments and will update the implementation based on your feedback. Keep iterating until you're satisfied!
Visual preview
Mobile task header at 320px
Long repository, PR #28 and linked issue #27 keep their own line; /review, command menu, Follow Up and overflow wrap below without overlap
Original unavailable: managed storage is unavailable or the upload has expired.
Mobile task header at 390px
Control width: PR and issue badges on one line, actions right-aligned below
Original unavailable: managed storage is unavailable or the upload has expired.
Enlarged text at 320px
125% root text size at device scale 4; badges and actions still separate
Original unavailable: managed storage is unavailable or the upload has expired.
Landscape 568x320
Phone landscape below the sm breakpoint
Original unavailable: managed storage is unavailable or the upload has expired.
Short portrait 320x568
Same header in a short portrait viewport
Original unavailable: managed storage is unavailable or the upload has expired.