fix(answer): clear mobile footer overlap for table expansion#431
Conversation
Reserve more bottom scroll room when follow-up suggestion chips are shown so the table expand control stays above the fixed composer dock. Harden ui-smoke scrolling and use direct DOM clicks for reliable expansion. Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
![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: c40c110e72
ℹ️ 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".
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThis PR adjusts mobile clinical table fullscreen expansion so the trigger scrolls differently, the table button reserves safe-area space, answer-mode bottom spacing changes with follow-up suggestions, and the smoke tests follow the updated scroll and click behavior. ChangesMobile Table Expansion Scroll Fixes
Estimated code review effort: 2 (Simple) | ~10 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
tests/ui-smoke.spec.ts (1)
590-609: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDOM-level
.click()bypasses Playwright's hit-testing, weakening the overlap regression check.Switching from a native/forced Playwright click to
element.evaluate(el => el.click())skips actionability checks (visibility, not-obscured-by-another-element). Since the bug this PR fixes is specifically about the expand control being covered by a fixed footer/chip dock, this test can now pass even if residual overlap remains afterscrollMobileTableExpandClearOfFooter's best-effort scroll — silently defeating the smoke test's ability to catch this exact regression.Consider retrying with a real (non-forced) Playwright
.click()after scrolling clear, and only falling back to the DOM click if that genuinely fails for an unrelated reason, so the test still verifies real click-target reachability.Also applies to: 1219-1228, 1819-1821
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@tests/ui-smoke.spec.ts` around lines 590 - 609, The `openMobileTableFullscreen` helper is bypassing Playwright’s actionability checks by using `evaluate(...click())` on `table-expand-button` and `accessible-table-surface`, which weakens the overlap regression coverage. Update this flow to use a real Playwright click on those elements after `scrollMobileTableExpandClearOfFooter` so visibility and obscured-by-another-element are still verified, and only fall back to a DOM click if a genuine non-overlap-related issue prevents interaction. Apply the same pattern to the other smoke-test helpers that use the same click approach.src/components/AccessibleTable.tsx (1)
450-465: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winScroll margin isn't scoped to mobile/answer context.
scroll-mb-[calc(18rem+env(safe-area-inset-bottom))]applies unconditionally at all breakpoints and in every mode that usesexpandOnMobile, not just the mobile answer view with a fixed composer/suggestion dock. This risks an unnecessary large scroll offset on desktop/tablet or in modes without that fixed footer.💡 Suggested scoping
- className="relative z-50 mt-2 inline-flex min-h-11 w-full items-center justify-center gap-2 scroll-mb-[calc(18rem+env(safe-area-inset-bottom))] rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-raised)] px-3 text-xs font-semibold text-[color:var(--text)] shadow-[var(--shadow-tight)] transition hover:border-[color:var(--border-strong)] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[color:var(--focus)]/25" + className="relative z-50 mt-2 inline-flex min-h-11 w-full items-center justify-center gap-2 max-sm:scroll-mb-[calc(18rem+env(safe-area-inset-bottom))] rounded-lg border border-[color:var(--border-lux)] bg-[color:var(--surface-raised)] px-3 text-xs font-semibold text-[color:var(--text)] shadow-[var(--shadow-tight)] transition hover:border-[color:var(--border-strong)] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[color:var(--focus)]/25"Also worth extracting the
18remvalue shared withClinicalDashboard.tsxinto a common Tailwind theme token/CSS variable to avoid the two staying in sync manually.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/AccessibleTable.tsx` around lines 450 - 465, The Expand table button in AccessibleTable should not always use the large scroll margin, since it is only needed for the mobile answer/composer dock layout. Update the button’s scroll-mb utility in the AccessibleTable rendering path so it’s conditionally applied only in that context (for example when the mobile answer view is active), and leave desktop/tablet or other expandOnMobile modes without the extra offset. Also consider replacing the hardcoded 18rem value with a shared Tailwind token or CSS variable used by AccessibleTable and ClinicalDashboard so both stay aligned.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/components/AccessibleTable.tsx`:
- Around line 450-465: The Expand table button in AccessibleTable should not
always use the large scroll margin, since it is only needed for the mobile
answer/composer dock layout. Update the button’s scroll-mb utility in the
AccessibleTable rendering path so it’s conditionally applied only in that
context (for example when the mobile answer view is active), and leave
desktop/tablet or other expandOnMobile modes without the extra offset. Also
consider replacing the hardcoded 18rem value with a shared Tailwind token or CSS
variable used by AccessibleTable and ClinicalDashboard so both stay aligned.
In `@tests/ui-smoke.spec.ts`:
- Around line 590-609: The `openMobileTableFullscreen` helper is bypassing
Playwright’s actionability checks by using `evaluate(...click())` on
`table-expand-button` and `accessible-table-surface`, which weakens the overlap
regression coverage. Update this flow to use a real Playwright click on those
elements after `scrollMobileTableExpandClearOfFooter` so visibility and
obscured-by-another-element are still verified, and only fall back to a DOM
click if a genuine non-overlap-related issue prevents interaction. Apply the
same pattern to the other smoke-test helpers that use the same click approach.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 173da862-5c34-41b0-b7e8-cb511af72e12
📒 Files selected for processing (3)
src/components/AccessibleTable.tsxsrc/components/ClinicalDashboard.tsxtests/ui-smoke.spec.ts
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
2 participants
Summary
Fixes mobile answer view layout where the fixed composer dock and follow-up suggestion chips covered the clinical table Expand table control, making fullscreen expansion unreliable in UI smoke and on real devices.
Cross-mode link deduplication was already merged to
mainvia #419; this PR is the remaining mobile table expansion follow-up.Changes
ClinicalDashboard: Reserve18rembottom scroll margin on mobile when follow-up suggestion chips are visible (was5.25rem, insufficient for the tall composer dock).AccessibleTable: Addscroll-margin-bottomon the expand button; usescrollIntoView({ block: "nearest" })to avoid over-scrolling.ui-smoke: Targetmain#main-contentwith iterative scroll-until-clear helper; use direct DOM.click()for reliable handler invocation after scroll.Verification
npm run verify:cheap— passedclinical table mobile expansion(390/768/1440) — passedanswer results surface cross-mode quick links— passed (single strip,toHaveCount(1))Screenshots
The failure mode showed the expand button sitting under the follow-up suggestion row; taps hit suggestion chips instead of opening the fullscreen table dialog.
Summary by CodeRabbit