fix(styles): Dim highlight box in either DOM order

[tanav29]

Notes for Reviewers

This PR fixes #1138

Fixed the inconsistent hover effect on /kanvas and /cloud

before	after

Signed commits

• Yes, I signed my commits.

Summary by CodeRabbit

• Bug Fixes
  • Updated highlight-box styling so its shadow is suppressed when a nearby hidden highlight box is hovered or focused, including when the elements appear in either order.
  • This keeps the highlight-box appearance consistent across both page information and navigation areas.

[welcome]

Yay, your first pull request! 👍 A contributor will be by to give feedback soon. In the meantime, please review the Layer5 Community Welcome Guide and sure to join the community Slack.
Be sure to double-check that you have signed your commits. Here are instructions for making signing an implicit activity while peforming a commit.

[coderabbitai]

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 6e510fa2-946e-47f6-acd0-7d7f2419df00

📥 Commits

Reviewing files that changed from the base of the PR and between d08b7e6 and 2658883.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 739859dd-f378-4357-b9f7-23bb428e726b

📥 Commits

Reviewing files that changed from the base of the PR and between 4350edb and d08b7e6.

📒 Files selected for processing (2)

• assets/scss/_content_project.scss
• assets/scss/_navbar_project.scss

Included review availability: This review used your included allowance. Your plan provides up to 2 included reviews per hour; 1 remain after this review.

---

📝 Walkthrough

Walkthrough

The content and navbar styles update highlight-box shadow behavior when a hidden-highlight-box is hovered or focused. New .pageinfo:has(...) rules cover cases where the highlight box precedes the hidden box.

Changes

Highlight shadow behavior

Layer / File(s)	Summary
Hidden highlight sibling-order rules assets/scss/_content_project.scss, assets/scss/_navbar_project.scss	Existing following-sibling rules remain. New .pageinfo:has(...) rules hide the highlight-box shadow when a hidden-highlight-box is hovered, focused, or focus-visible, including when it precedes the highlight box.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to d08b7

The styles now handle hover and focus consistently in either box order on both pages. No material merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: fixing highlight-box dimming for either DOM order. It matches the reported styling issue and PR objective.
Linked Issues check	✅ Passed	Issue #1138 requires the Kanvas and Cloud pages to use the same highlight behavior. The reviewed SCSS keeps the hovered or focused .hidden-highlight-box highlighted and removes the .highlight-box …
Out of Scope Changes check	✅ Passed	The reviewed changes are limited to ecosystem highlight styling in assets/scss/_content_project.scss and assets/scss/_navbar_project.scss. The selectors and comments directly implement the consist…
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[tejaswiverma121-byte]

the missing items are:
Browser support check for :has()

This is the only real compatibility concern.
:has() is broadly supported in modern Chromium-based browsers, Safari, and current Firefox, but if the docs site has a requirement to support older browsers, this could be an issue.
If compatibility matters, this PR should either:
confirm modern browser support, or
include a fallback pattern (if feasible).
No automated regression coverage

The issue is visual/interaction-based, and there is no automated test for the hover/focus states.
For a CSS bug like this, a quick visual smoke test or browser-based check is the usual minimum validation.

[tanav29]

The .has() is handled by scss so scss builds it into css on build time and browser only sees the generated valid css not the scss. And for checks should i attach a video.

[vedant21-ctr]

Thanks for the fix. The approach looks good and the screenshots show the intended behavior.

could you please do a quick validation on the PR preview:

• Verify the fix on both /cloud and /kanvas, including mouse-out, to ensure the glow returns correctly.
• Please also check the navbar/ecosystem area, since _navbar_project.scss is changed as well, and confirm the new .pageinfo:has(...) selector actually applies there.

A short video showing these states would be enough.

[tejaswiverma121-byte]

Hi @tanav29,
Just a quick heads-up: SCSS doesn't transpile :has() into fallback CSS at build time—it passes standard CSS pseudo-classes directly through to the output stylesheet for browser evaluation. That said, :has() is widely supported across all modern browsers (Chrome, Safari, Firefox, Edge), so browser compatibility shouldn't be an issue unless the docs site explicitly targets older legacy browsers.

A short screen recording covering the preview validation points mentioned by @vedant21-ctr above (testing both /cloud and /kanvas, checking mouse-out recovery, and confirming the header ecosystem dropdown) would be great to verify everything visually!

[tanav29]

@vedant21-ctr @tejaswiverma121-byte

The use of .has() is fixing the order problem in assets/scss/_content_project.scss:370 and assets/scss/_navbar_project.scss:270:

• Old: .hidden-highlight-box:hover ~ .highlight-box only matches a highlight box after the hovered box. Works on /kanvas (hidden first), fails on /cloud (highlight first).
• New: .pageinfo:has(.hidden-highlight-box:hover) .highlight-box means "if the .pageinfo container has a hovered hidden box anywhere inside, dim its highlight box" — works in both orders.

The video showing the hover removing as the mouse leaves the div. below.

Screen.Recording.2026-10-08.141827-compressed.mp4

[tejaswiverma121-byte]

Using .has() is the correct solution — it checks if the .hidden-highlight-box is hovered anywhere inside the parent .pageinfo, then dims the highlight box. DOM order no longer matters. LGTM✓