style(web): fix overlapping details metadata, genre chips, and overview text - #494
Conversation
![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: 8f6a2ac873
ℹ️ 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".
| } | ||
|
|
||
| .detail-body p.detail-overview, | ||
| .detail-body p:not(.eyebrow) { |
There was a problem hiding this comment.
When a detail page includes TV episode rows or review cards, this broad selector matches every non-eyebrow paragraph inside .detail-body, not just the moved overview. Because it appears after the existing .episode-info p and .review-card p rules, it overrides their margin/color/line-height and makes nested summaries/reviews inherit overview spacing and contrast, which can bloat those cards and undo their muted/clamped styling. Targeting only .detail-overview would keep this layout fix scoped to the hero copy.
Useful? React with 👍 / 👎.
style(web): stop the new screen padding stacking on non-hero pages The top padding added to .screen is cancelled for heroes, but Watchlist, Browse and Addons open with a .section-heading that already carries clamp(112px, 14.3vh, 154px) of its own. Both applied, so those pages rendered roughly double the intended gap above the first heading — measured in the browser at 232px against 112px before the change, and up to 314px at wide viewports. Exclude the shapes that already provide their own offset: a leading .section-heading, and .livetv-shell which sets its own. Verified in the browser across all four screen shapes — hero 0, section-heading 0 (child supplies 154), livetv 0, plain 160. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> @
a999f7c to
3f9a23b
Compare
Himanth-reddy
added
gssoc:approved
|
/pr-status |
2 participants
Summary
Fixes visual overlapping in the details drawer layout where long overview paragraphs collided into genre pills (
ADVENTURE,ACTION,FANTASY) and wrapped metadata rows collapsed into each other.Changes Included
DetailsDrawer.tsx):globals.css):gap: 6px 0andline-height: 1.5to.detail-metadataand.detail-overviewso multi-line wrapped metadata rows do not collide vertically.