fix(replay): stop playlist loading bar overflowing into player#60480
Merged
Conversation
The `LemonTableLoader` swooping bar sat inside the `DraggableToNotebook` `<span>`, which has `position: relative` in its SCSS. The loader is `position: absolute; width: 100%`, so it sized itself to that span — and since the span contained a `whitespace-nowrap` header, the span could be wider than the playlist column. As a result the loading bar overflowed into the player. Move the loader outside the draggable into a `relative` block-level wrapper that fills the playlist column, so the bar can no longer escape. Also drop the unused `relative` on the header row itself. Generated-By: PostHog Code Task-Id: 84408c2f-bd99-435a-a6d1-0989a5538a51
Contributor
|
Size Change: 0 B Total Size: 80.6 MB ℹ️ View Unchanged
|
ksvat
requested review from
a team,
TueHaulund,
arnohillen,
fasyy612 and
nicowaltz
and removed request for
a team
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
|
Reviews (1): Last reviewed commit: "fix(replay): stop playlist loading bar o..." | Re-trigger Greptile |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On the session replay page during loading, the animated loading bar at the top of the playlist column overflowed horizontally into the player area instead of being constrained to the playlist width.
Changes
The
LemonTableLoader(the swooping bar shown while recordings load) sat inside theDraggableToNotebook<span>, which hasposition: relativein its SCSS. Because the loader isposition: absolute; width: 100%, it sized itself to that span — and the span sized to its content, which included awhitespace-nowrapheader. When the title row was wider than the playlist column, the loader overflowed with it into the player.This PR:
LemonTableLoaderout ofDraggableToNotebookinto a newrelativeblock-level wrapper that fills the playlist column, so the loader can no longer escape the column width.relativeon the header row itself — it had no absolutely-positioned children that depended on it.How did you test this code?
I'm an agent. No manual browser test was run. No automated tests were added or run for this CSS-only change.
Publish to changelog?
no
🤖 Agent context
Created with PostHog Code