Skip to content

fix: hide roadmap card behind its open popover (#204) - #176

Merged
BhuvanArn merged 1 commit into
stagingfrom
204-bug-roadmap-popover-overlap
Jul 15, 2026
Merged

fix: hide roadmap card behind its open popover (#204)#176
BhuvanArn merged 1 commit into
stagingfrom
204-bug-roadmap-popover-overlap

Conversation

@BhuvanArn

Copy link
Copy Markdown
Owner

Problem

Opening a roadmap topic card's "Read more" popover left the collapsed card painting underneath it — its bottom border and "Read more" link showed through below the popover.

The popover is absolutely positioned over the card but is wider than it (20rem vs the ~12rem timeline column). The same rationale text therefore wraps into fewer lines, so the popover renders shorter than the card it is meant to cover, and the bottom strip of the card stays visible.

Measured at 1920x1080 on main (Step 3 card):

Card Popover
Size 196x206 320x188

→ 18px of the collapsed card visible below the popover; it also intercepted pointer events aimed at the popover.

Fix

While the popover is open, the card is:

  • invisible — hidden but kept in flow, so the timeline row does not reflow (card height stays 206)
  • aria-hidden + inert — not announced, not focusable, no pointer interception

Focus moves to the panel on open and returns to the card on close, since inert would otherwise drop focus to <body>.

The popover also gets min-w-full so it can never be narrower than the card behind it.

Verification

Driven in a real browser at 1920x1080 against a roadmap fixture reproducing the reported geometry:

Before After
Card visibility visible hidden
Strip below popover collapsed card showing background
Pointer events card intercepts pass through
Row reflow none (206 → 206)

Unit test added — verified red without the fix, green with it. tsc -b, oxlint and prettier all clean.

@vercel

vercel Bot commented Jul 15, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
talk-up-ai-dev Ready Ready Preview, Comment Jul 15, 2026 4:57pm

@railway-app
railway-app Bot temporarily deployed to talk-up-ai / TalkUp.AI-pr-176 July 15, 2026 16:57 Destroyed
@railway-app

railway-app Bot commented Jul 15, 2026

Copy link
Copy Markdown

🚅 Deployed to the TalkUp.AI-pr-176 environment in talk-up-ai

Service Status Web Updated (UTC)
Backend ✅ Success (View Logs) Jul 15, 2026 at 4:58 pm

@BhuvanArn BhuvanArn self-assigned this Jul 15, 2026
@BhuvanArn
BhuvanArn marked this pull request as ready for review July 15, 2026 20:02
Copilot AI review requested due to automatic review settings July 15, 2026 20:02

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@BhuvanArn
BhuvanArn merged commit cef3411 into staging Jul 15, 2026
20 checks passed
@BhuvanArn
BhuvanArn deleted the 204-bug-roadmap-popover-overlap branch July 15, 2026 23:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants