fix(styles): Dim highlight box in either DOM order by tanav29 · Pull Request #1278 · layer5io/docs

tanav29 · 2026-10-07T18:04:10Z

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
- Highlight-box shadows are now suppressed when a nearby hidden highlight box is hovered or focused, including focus-visible states and either element order.
- This behavior is consistent across page information and navigation areas.
Style
- Ecosystem callout boxes now share consistent layout, typography, spacing, transitions, and image sizing.

Signed-off-by: tanav29 <tanavposwal939@gmail.com>

welcome · 2026-10-07T18:04:13Z

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 · 2026-10-07T18:05:25Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Source mode: Auto
Repository: Unavailable
Branch: Unavailable
File: No configuration file from this repository applied
Commit: Unavailable
Layers: defaults
Review profile: CHILL
Plan: Advanced
Run ID: 80564458-034b-4325-8589-cee126008d77

📥 Commits

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

📒 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

Navbar and content styles define shared ecosystem callout styling. Hover and focus selectors update highlight-box shadows when a hidden-highlight-box is active, including when either box comes first in the DOM.

Changes: Highlight shadow behavior

Layer / File(s)	Summary
Highlight styling and sibling-order rules `assets/scss/_navbar_project.scss`, `assets/scss/_content_project.scss`	Shared styles define the callout layout and default shadows. Hover and focus selectors hide the highlight-box shadow when a hidden-highlight-box is active, including when the highlight box comes first in the DOM.

Priority: ⬇️ Low

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

Change: Bug fix · Severity of issue fixed: Low

Suggested reviewers: banana-three-join, miacycle

Merge Risk: ⚪ Minimal · up to a7d42

No actionable merge-blocking risk remains in the reviewed styling changes.

Pre-merge checks: 5

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main change: fixing highlight-box dimming for either DOM order.
Linked Issues check		Issue `#1138` is closed and supplies historical context only. No active directly linked issue supplies coding requirements for this pull request.
Out of Scope Changes check		The whole-pull-request diff changes only ecosystem callout styling in `assets/scss/_content_project.scss` and `assets/scss/_navbar_project.scss`. The changes add DOM-order-independent hover and focus …
Docstring Coverage		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…

Full details: Out of Scope Changes check

Explanation

The whole-pull-request diff changes only ecosystem callout styling in assets/scss/_content_project.scss and assets/scss/_navbar_project.scss. The changes add DOM-order-independent hover and focus dimming for .highlight-box and .hidden-highlight-box. These changes directly match the stated /cloud and /kanvas hover fix. No unrelated product behavior or content change is shown.

Full details: Docstring Coverage

Explanation

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 files. (2 skipped: 2 unsupported.)

✨ 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

_{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 · 2026-10-07T18:16:55Z

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 · 2026-10-08T04:17:55Z

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 · 2026-10-08T09:03:20Z

@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✓

marblom007 · 2026-10-23T05:57:28Z

This PR is approved (thanks @tejaswiverma121-byte) and the :has() approach looks right, but it can't merge yet: the branch has fallen behind master and now conflicts, and no CI has run on the current head.

Could you please:

Rebase (or merge master in) and resolve the SCSS conflicts, then push so the build and preview checks run.
Complete the preview validation @vedant21-ctr asked for on the PR preview: the dim behavior on both /cloud and /kanvas, including the navbar, with mouse and keyboard/touch interaction.

Once the branch is green and the preview check is confirmed here, this should be ready to merge. No rush — just reply on this thread when it's updated.

Signed-off-by: Tanav Poswal <63358333+tanav29@users.noreply.github.com>

tanav29 · 2026-10-23T07:44:27Z

@marblom007 @tejaswiverma121-byte Resolved merge conflicts

github-actions · 2026-10-23T12:12:00Z

Preview deployment for PR #1278 removed.

This PR preview was automatically pruned because we keep only the 6 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.

welcome · 2026-10-26T20:18:16Z

Thank you for contributing to the Layer5 community! 🎉 \ \ \ \ ⭐ Please leave a star on the project. 😄

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

d08b7e6

Signed-off-by: tanav29 <tanavposwal939@gmail.com>

github-actions Bot added component/cloud-docs component/kanvas-docs labels Oct 7, 2026

tejaswiverma121-byte reviewed Oct 7, 2026

View reviewed changes

vedant21-ctr reviewed Oct 8, 2026

View reviewed changes

tejaswiverma121-byte approved these changes Oct 8, 2026

View reviewed changes

Merge branch 'master' into fix/ecosystem-hover

2658883

Merge branch 'master' into fix/ecosystem-hover

a7d425f

Signed-off-by: Tanav Poswal <63358333+tanav29@users.noreply.github.com>

marblom007 merged commit 51861df into layer5io:master Oct 26, 2026
5 checks passed

Navigation Menu

Repository navigation

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

fix(styles): Dim highlight box in either DOM order#1278
marblom007 merged 3 commits into
layer5io:masterfrom
tanav29:fix/ecosystem-hover

tanav29 commented Oct 7, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

welcome Bot commented Oct 7, 2026

Uh oh!

coderabbitai Bot commented Oct 7, 2026 •

edited

Loading

Uh oh!

tejaswiverma121-byte left a comment

Uh oh!

tanav29 commented Oct 7, 2026

Uh oh!

vedant21-ctr left a comment

Uh oh!

tejaswiverma121-byte commented Oct 8, 2026

Uh oh!

tanav29 commented Oct 8, 2026 •

edited

Loading

Uh oh!

tejaswiverma121-byte left a comment

Uh oh!

marblom007 commented Oct 23, 2026

Uh oh!

tanav29 commented Oct 23, 2026

Uh oh!

github-actions Bot commented Oct 23, 2026 •

edited

Loading

Uh oh!

Uh oh!

welcome Bot commented Oct 26, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

tanav29 commented Oct 7, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

welcome Bot commented Oct 7, 2026

Uh oh!

coderabbitai Bot commented Oct 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tejaswiverma121-byte left a comment

Choose a reason for hiding this comment

Uh oh!

tanav29 commented Oct 7, 2026

Uh oh!

vedant21-ctr left a comment

Choose a reason for hiding this comment

Uh oh!

tejaswiverma121-byte commented Oct 8, 2026

Uh oh!

tanav29 commented Oct 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tejaswiverma121-byte left a comment

Choose a reason for hiding this comment

Uh oh!

marblom007 commented Oct 23, 2026

Uh oh!

tanav29 commented Oct 23, 2026

Uh oh!

github-actions Bot commented Oct 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

welcome Bot commented Oct 26, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

tanav29 commented Oct 7, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Oct 7, 2026 •

edited

Loading

tanav29 commented Oct 8, 2026 •

edited

Loading

github-actions Bot commented Oct 23, 2026 •

edited

Loading