Repository navigation
fix(gui): stop the mobile topbar and integration cards overflowing - #3174
Conversation
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
|
✅ Deterministic PR hygiene checks passed. |
✅ READY
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 786262c71d
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| in the drawer head, so the version stays one tap away, and the live value is | ||
| also on the dashboard Version stat. Folded into the existing tiny-phone | ||
| breakpoint rather than inventing a 400px one for an unmeasured 375-399 band. */ | ||
| .mobile-topbar .brand .ver { display: none; } |
There was a problem hiding this comment.
In a connected runtime with a shared dashboard session, App.tsx:265-279 renders logout, disconnect, and restart controls, making .mobile-topbar-actions 144px wide rather than the 94px assumed by this breakpoint. Just above 360px the badge therefore returns with very little brand space; normal versions truncate opencodex, while longer supported x.y.z-preview.* versions can make the non-shrinking badge overlap the controls again. Base the breakpoint on the three-button state and preview-version width, or hide the badge conditionally when that state is active.
AGENTS.md reference: AGENTS.md:L267-L272
Useful? React with 👍 / 👎.
리뷰 · 우선순위 61 / 80이 PR은 현재 상단 바 수정은 제품 이름이 실제로 줄어들 수 있도록 Integrations 쪽은
메인테이너의 판단이 필요한 지점
너의 추천 이 댓글은 grok-bot이 작성했습니다 |
Two responsive defects, both found by measuring real geometry through CDP rather than by reading CSS. The mobile topbar overlapped itself. At 320px the version badge ended at x=245 while the action orbs began at x=206, so the power orb sat on top of the badge. A flex item only shrinks below its content size when it carries min-width: 0 itself; .mobile-topbar .brand had it but its children did not, so .name held its intrinsic width and pushed .ver under the actions. Shrinking .name is necessary but not sufficient. The row budget at the narrowest width is 44 (menu) + 26 (logo) + 56 (badge) + 94 (actions) plus gaps, which leaves the name about 38px - it rendered as "op...". The badge is dropped instead: the same brand node is mounted again in the drawer head, and the live version is also on the dashboard Version stat. A review pass caught the first attempt inventing @media (max-width: 400px), which was the only 400px rule in the file and covered an unmeasured 375-399 band. It is folded into the existing 360px tiny-phone breakpoint instead. The integration cards overflowed the page. .integration-cards used repeat(auto-fill, minmax(260px, 1fr)); a bare 260px floor is wider than the content box of a 320px viewport, so the track could not shrink and the card went with it - the Settings button measured left=326, right=409 against a 320px page, and again at 375px and 736px. min(260px, 100%) keeps the multi-column intent while letting a narrow viewport fall back. Verified after the change across 5 viewports x 5 pages: zero elements outside the viewport. Topbar at 320/360/375/414/736: name always ends before the actions begin, badge returns at 375. Both regression tests were driven red against the unfixed CSS first.
…-HEAD restore miss
…ex injection found on a clean host
…itself is gitignored)
786262c to
38b5612
Compare
…idge-jun#3174) * docs(devlog): plan the 3-OS QA sweep, the restore contract, and the GUI pass * docs(devlog): fix the QA evidence layout and scenario id scheme * fix(gui): stop the mobile topbar and integration cards overflowing Two responsive defects, both found by measuring real geometry through CDP rather than by reading CSS. The mobile topbar overlapped itself. At 320px the version badge ended at x=245 while the action orbs began at x=206, so the power orb sat on top of the badge. A flex item only shrinks below its content size when it carries min-width: 0 itself; .mobile-topbar .brand had it but its children did not, so .name held its intrinsic width and pushed .ver under the actions. Shrinking .name is necessary but not sufficient. The row budget at the narrowest width is 44 (menu) + 26 (logo) + 56 (badge) + 94 (actions) plus gaps, which leaves the name about 38px - it rendered as "op...". The badge is dropped instead: the same brand node is mounted again in the drawer head, and the live version is also on the dashboard Version stat. A review pass caught the first attempt inventing @media (max-width: 400px), which was the only 400px rule in the file and covered an unmeasured 375-399 band. It is folded into the existing 360px tiny-phone breakpoint instead. The integration cards overflowed the page. .integration-cards used repeat(auto-fill, minmax(260px, 1fr)); a bare 260px floor is wider than the content box of a 320px viewport, so the track could not shrink and the card went with it - the Settings button measured left=326, right=409 against a 320px page, and again at 375px and 736px. min(260px, 100%) keeps the multi-column intent while letting a narrow viewport fall back. Verified after the change across 5 viewports x 5 pages: zero elements outside the viewport. Topbar at 320/360/375/414/736: name always ends before the actions begin, badge returns at 375. Both regression tests were driven red against the unfixed CSS first. * docs(devlog): record the two responsive defects and what the review changed * docs(devlog): record the macmini deploy, QA classes, and the detached-HEAD restore miss * docs(devlog): record the linux and macbook QA, and the start-time Codex injection found on a clean host * docs(devlog): record the QA verdicts and teardown receipts (evidence itself is gitignored) * docs(devlog): record the windows QA, the version-skew warning, and the EPERM restore * docs(devlog): synthesise the unit - three defects, all found by measurement * docs(devlog): anonymise remote home paths the privacy scan flagged --------- Co-authored-by: jun <jun@lidge.dev>
…idge-jun#3174) * docs(devlog): plan the 3-OS QA sweep, the restore contract, and the GUI pass * docs(devlog): fix the QA evidence layout and scenario id scheme * fix(gui): stop the mobile topbar and integration cards overflowing Two responsive defects, both found by measuring real geometry through CDP rather than by reading CSS. The mobile topbar overlapped itself. At 320px the version badge ended at x=245 while the action orbs began at x=206, so the power orb sat on top of the badge. A flex item only shrinks below its content size when it carries min-width: 0 itself; .mobile-topbar .brand had it but its children did not, so .name held its intrinsic width and pushed .ver under the actions. Shrinking .name is necessary but not sufficient. The row budget at the narrowest width is 44 (menu) + 26 (logo) + 56 (badge) + 94 (actions) plus gaps, which leaves the name about 38px - it rendered as "op...". The badge is dropped instead: the same brand node is mounted again in the drawer head, and the live version is also on the dashboard Version stat. A review pass caught the first attempt inventing @media (max-width: 400px), which was the only 400px rule in the file and covered an unmeasured 375-399 band. It is folded into the existing 360px tiny-phone breakpoint instead. The integration cards overflowed the page. .integration-cards used repeat(auto-fill, minmax(260px, 1fr)); a bare 260px floor is wider than the content box of a 320px viewport, so the track could not shrink and the card went with it - the Settings button measured left=326, right=409 against a 320px page, and again at 375px and 736px. min(260px, 100%) keeps the multi-column intent while letting a narrow viewport fall back. Verified after the change across 5 viewports x 5 pages: zero elements outside the viewport. Topbar at 320/360/375/414/736: name always ends before the actions begin, badge returns at 375. Both regression tests were driven red against the unfixed CSS first. * docs(devlog): record the two responsive defects and what the review changed * docs(devlog): record the macmini deploy, QA classes, and the detached-HEAD restore miss * docs(devlog): record the linux and macbook QA, and the start-time Codex injection found on a clean host * docs(devlog): record the QA verdicts and teardown receipts (evidence itself is gitignored) * docs(devlog): record the windows QA, the version-skew warning, and the EPERM restore * docs(devlog): synthesise the unit - three defects, all found by measurement * docs(devlog): anonymise remote home paths the privacy scan flagged --------- Co-authored-by: jun <jun@lidge.dev>
Summary
Two responsive defects on the dashboard, both found by measuring real geometry through the Chrome DevTools Protocol rather than by reading CSS.
The mobile topbar overlapped itself. At a 320px viewport the version badge ended at x=245 while the action orbs began at x=206, so the power orb sat on top of the badge. A flex item only shrinks below its content size when it carries
min-width: 0itself;.mobile-topbar .brandhad it but its children did not, so.nameheld its intrinsic width and pushed.verunder the actions.Shrinking
.nameis necessary but not sufficient — the row budget at the narrowest width is 44 (menu) + 26 (logo) + 56 (badge) + 94 (actions) plus gaps, leaving the name about 38px, which rendered asop…. The badge is dropped instead: the same brand node is mounted again in the drawer head, and the live value is also on the dashboard Version stat.The integration cards overflowed the page.
.integration-cardsusedrepeat(auto-fill, minmax(260px, 1fr)). A bare 260px floor is wider than the content box of a 320px viewport, so the track could not shrink and the card went with it — the Settings button measured left=326, right=409 against a 320px page, and again at 375px and 736px.min(260px, 100%)keeps the multi-column intent while letting a narrow viewport fall back.UI change
Before — 320px, the version badge sits under the power orb, and the integration cards push their action row off the page:
After — 375px, the brand, badge and orbs each hold their own space (
name.right=179,ver 189-245,actions.left=261):At and below 360px the badge is dropped so the product name stays readable; from 375px up it returns.
What review changed
A read-only review pass caught the first attempt inventing
@media (max-width: 400px)— the only 400px rule in the file, covering an unmeasured 375-399 band. It is folded into the existing 360px tiny-phone breakpoint instead. The measurement confirms the reviewer was right: at 375px the badge is back andver.right=245 < act.left=261, so a 400px rule would have hidden it for no reason.Also in this PR
The devlog unit
260902_multiplatform_qa_and_guirecords a 3-OS deployment QA sweep run alongside this fix:devwas deployed to a macOS source checkout, a Linux npm global, a clean macOS host, and a Windows MINGW64 host, exercised with the adversarial classes, and each host restored to its own original install shape. The runtime contract matched across all three platforms (exit 0/1/4, healthz/readyz 200, 404, GUI 200); the differences were all in the restore procedures.Verification
No full suite, per the no-local-suite policy.
cd gui && bun test tests/mobile-topbar-layout.test.ts tests/integrations-card-overflow.test.ts— 5 pass, 0 fail. Both files were driven red against the unfixed CSS first.name.right <= actions.leftin every case.bun run privacy:scan— passes; remote home paths in the devlog were anonymised after the scan flagged them.Checklist