fix: stop case-study hover accent bar overflowing rounded corners - #161
Merged
Conversation
On the /case-studies/ list page, hovering a card promotes it to a compositing layer (transform: translateY), at which point Chrome/Safari stop applying the card's rounded `overflow: hidden` clip to the composited `::before` accent bar. Its square corners then poked past the card's 18px rounded corners on the left edge. Give the bar its own matching left-corner radius (and top-corner radius in the stacked mobile layout) so it traces the card's curve regardless of whether the corner clip fires. No design change, no JS. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012v8GzwqM7tDQ22U2Qjh3U6
✅ Deploy Preview for masterpoint ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
WalkthroughChangesCase-study card styling
Estimated code review effort: 1 (Trivial) | ~5 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
The previous attempt gave the accent bar its own border-radius, but a 4px-wide bar can't trace an 18px corner — the radius clamps to the box width, so the bar's straight left edge still poked past the card's curve near the corners once the hover transform composited the layer and dropped the rounded overflow clip. Inset the bar past the corner radius instead (top/bottom 20px > the 18px corner; left/right 20px in the stacked mobile layout) so it lives only on the straight part of the edge. No clip needed, so the compositing bug can't apply. Rounded inner ends keep it looking intentional. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012v8GzwqM7tDQ22U2Qjh3U6
Restore the full-height left-edge accent bar (the inset version read as an awkward stub) while keeping it from spilling past the rounded corners on hover. Paint the bar as the ::before overlay's OWN background — a 4px vertical gradient stripe on a full-size, border-radius: inherit overlay — instead of a free-standing child rectangle. A background is always clipped to its element's border-radius, even after the hover transform composites the card (the promotion that let the old z-indexed child bar escape the rounded overflow clip). Full height, fade intact, box-shadow untouched (no clip-path, which would have clipped the shadow away). Mobile swaps the stripe to the top edge. Verified in Chromium at desktop + mobile widths. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012v8GzwqM7tDQ22U2Qjh3U6
Thicken the left-edge hover accent from a 4px stripe into a ~50px vertical gradient band (40px on the stacked mobile top edge) so the brand teal->pink color occupies a bold band rather than a thin line. Same technique: the band is the ::before overlay's own background, so it stays clipped to the card's rounded corners even when the hover transform composites the layer. Only background-size changes. Verified in Chromium at desktop + mobile widths. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012v8GzwqM7tDQ22U2Qjh3U6
The preview image is flush to the card's left edge, so any left-edge
accent bar necessarily paints over ("spills" onto) the preview on hover.
Remove the accent bar entirely so a user sees no overlap on hover.
Hover feedback still comes from the lift, brighter border, deeper shadow,
image zoom, and arrow slide -- none of which overlaps the card content.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012v8GzwqM7tDQ22U2Qjh3U6
The Power Digital case-study preview poster had a bright teal->pink gradient rule across its very top edge. With the list-page card using object-fit: cover on a portrait image whose aspect matches the column, the whole poster shows and that strip rendered as a stray accent bar at the top of the card (unlike the other cards' clean brand tiles). Crop the top 13px strip off the image (now 698x890). Removes the bar on the list card and the og image; poster content and footer are untouched. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012v8GzwqM7tDQ22U2Qjh3U6
westonplatter
marked this pull request as ready for review
August 5, 2026 17:58
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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.
Inline comments:
In `@assets/css/custom.scss`:
- Around line 3453-3456: Move the changed case-study custom SCSS from
assets/css/custom.scss into assets/css/style.scss, preserving its selectors and
behavior. Remove the moved rules from custom.scss, then run Trunk to lint and
format the updated SCSS.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 361e4c8d-907d-4400-923f-89b5f745a7d7
⛔ Files ignored due to path filters (1)
static/img/case-studies/power-digital/power-digital-case-study-preview.jpgis excluded by!**/*.jpg
📒 Files selected for processing (1)
assets/css/custom.scss
Comment on lines
+3453
to
+3456
| // No left-edge accent bar: the preview image is flush to the left edge, so | ||
| // any bar would paint over ("spill" onto) the preview on hover. Hover | ||
| // feedback comes from the lift + brighter border + deeper shadow + image | ||
| // zoom + arrow slide instead — nothing overlaps the card content. |
Contributor
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy lift
Keep the custom SCSS in the required file.
The changed case-study styles remain in assets/css/custom.scss. Move this custom SCSS to assets/css/style.scss, then run Trunk for linting and formatting.
As per coding guidelines: assets/css/**/*.scss: Use Bootstrap 5.1.3 as the CSS framework and place custom SCSS in assets/css/style.scss.
Also applies to: 3541-3543
🤖 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 `@assets/css/custom.scss` around lines 3453 - 3456, Move the changed case-study
custom SCSS from assets/css/custom.scss into assets/css/style.scss, preserving
its selectors and behavior. Remove the moved rules from custom.scss, then run
Trunk to lint and format the updated SCSS.
Source: Coding guidelines
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
4 participants
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.
what
/case-studies/list page, hovering a card no longer shows the gradient accent bar poking past the card's rounded corners on the left edge..cs-card::before(the hover accent bar) its ownborder-radiusso it traces the card's curve:18px 0 0 18pxon desktop (left edge) and18px 18px 0 0in the stacked mobile layout (top edge).why
border-radius: 18px+overflow: hiddento clip the accent bar to its rounded corners. On hover the card getstransform: translateY(-3px), which promotes it to a compositing layer — and Chrome/Safari then stop applying the roundedoverflow: hiddenclip to the composited::beforepseudo-element. Its square corners escaped past the card's rounded corners (visible only on hover, since the bar isopacity: 0at rest).mask-image,translateZ(0)).Screenshot (the reported issue)
Hover accent bar's square corners spilling past the card's rounded top-left/bottom-left corners.
Before
After
references
docs/case-studies.md(List page → "Hover accent is a gradient bar on the left edge").overflow: hiddenclip is dropped for composited descendants — long-standing Chromium/WebKit compositing behavior triggered here by the hovertransform.Generated by Claude Code
Summary by CodeRabbit