PostHog / PostHog/posthog

Bug Report: Horizontal scrollbar invoked on hover model by long series names

Open
#23,243 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug feature/insights team/product-analytics
Dominant language
Python
Stars
39.9k
Forks
3.4k
Avg merge
7h 27m
Merged PRs (30d)
222

Description

Bug Description

Bug description

Long series names invoke a horizontal scrollbar on the Click to view people modal displayed when overing over the graph, but the horizontal scrollbar cannot be used because the modal is dismissed when the mouse cursor moves toward the scrollbar.

Repro steps:

  1. Create a new insight
  2. Add two graph series
  3. Rename both series with relatively long names
  4. Enable Compare to previous period
  5. Hover over the charts
  6. Note the horizontal scrollbar at the bottom of the modal, and try to use it

019049c7-9cdc-0000-78c8-cf930a177044
019049c8-e3a1-0000-607f-43bea6bffb72

https://eu.posthog.com/project/2161/insights/new

Additional context

From: https://posthoghelp.zendesk.com/agent/tickets/15033 (moved to PostHog: https://us.posthog.com/project/2/support/tickets/17620)

Debug info
Session: https://us.posthog.com/project/sTMFPsFhdP1Ssg/replay/019050f1-4d20-770c-898f-f17a0a05baf5?t=1116 
Admin: http://go/adminOrgEU/0186099a-625a-0000-d96d-c58b13e58985 (Project: 2161)
Sentry: http://go/sentryEU/2161

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue by creating an insight with two graph series, giving them long names, enabling “Compare to previous period,” and hovering over the charts. Start by tracing the “Click to view people” hover modal and its dismissal behavior, then verify that the scrollbar remains usable when the cursor moves toward it. Done means long series names no longer prevent horizontal scrolling.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.