chore(docs): Next tranche of UI/UX refinements#2170
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThis PR updates component and sidebar styling across the ENSNode documentation site. The service card component gains refined hover colors and transitions, navigation example pages add styled back links with icon indicators, and the Starlight sidebar receives comprehensive CSS updates including increased peek width, revised collapsed state behavior, and enhanced interaction styling for links and expandable elements. ChangesUI Styling and Layout Updates
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
There was a problem hiding this comment.
Pull request overview
This PR updates the ensnode.io docs site styling and a few doc pages to refine sidebar behavior and improve link/card hover UX.
Changes:
- Adjust docked sidebar behavior (wider “peek” strip + icon-only collapsed view) and unify hover/expanded styling for sidebar items.
- Upgrade “Back to … overview” links in the enssdk/enskit interactive example pages to a richer icon + hover treatment.
- Strengthen hover styling for
ENSNodeServiceCard.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| docs/ensnode.io/src/styles/starlight.css | Refines docked sidebar + sidebar hover/expanded styling for better discoverability and consistency. |
| docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx | Replaces the plain “Back to …” link with an icon-enhanced link UI. |
| docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx | Replaces the plain “Back to …” link with an icon-enhanced link UI. |
| docs/ensnode.io/src/components/atoms/ENSNodeServiceCard.astro | Updates hover border/shadow and chevron hover color for stronger card affordance. |
Comments suppressed due to low confidence (1)
docs/ensnode.io/src/styles/starlight.css:103
nav.sidebarisposition: fixedbut no longer setsinset-inline-start: 0(or an equivalentleft: 0). On wide layouts where.pageis centered (margin-inline: auto),inset-inline-start:autowill anchor the fixed sidebar to its static (centered) position rather than the viewport edge, which can break the intended “docked peek strip” behavior. Consider restoringinset-inline-start: 0(orinset-inline: 0 auto) so the docked sidebar reliably pins to the viewport’s inline start.
.page[data-sidebar-docked] nav.sidebar {
position: fixed;
inset-block: var(--sl-nav-height) 0;
z-index: var(--sl-z-index-menu);
width: var(--sl-sidebar-docked-peek);
overflow: hidden;
transition: width 0.2s ease;
background-color: var(--sl-color-bg-sidebar);
border-inline-end: 1px solid var(--sl-color-hairline-shade);
}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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
`@docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx`:
- Line 31: The hover color currently sets the Icon component's color to white
via the class fragment group-hover:text-[var(--sl-color-white)], which can make
the arrow invisible on light backgrounds; update the Icon's class (the Icon
element with the class string containing
"group-hover:text-[var(--sl-color-white)]") to use an accessible accent or text
token on hover instead (for example replace
group-hover:text-[var(--sl-color-white)] with a token such as
group-hover:text-[var(--sl-color-accent)] or another semantically named text
token) so the arrow remains visible without changing the link background.
🪄 Autofix (Beta)
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: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: abcfdb0b-fc47-4345-afb4-8a8ea6de1a67
📒 Files selected for processing (4)
docs/ensnode.io/src/components/atoms/ENSNodeServiceCard.astrodocs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdxdocs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdxdocs/ensnode.io/src/styles/starlight.css
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
Greptile SummaryThis PR delivers a set of focused UI/UX refinements to the ensnode.io docs site: docked-sidebar discoverability, unified sidebar hover states, stronger service-card hover feedback, and polished "back to overview" links.
Confidence Score: 5/5All changes are pure CSS and markup; no logic, data, or API surface is touched. Every change is scoped to visual presentation — CSS variable assignments, Tailwind utility classes, and Starlight component usage. The docked-sidebar CSS rewrite replaces a ::after chevron with icon-based visibility rules using well-established selectors already present in the file. The back-link upgrade and service-card hover tweak are isolated to their respective components. No regressions in behaviour are possible from these changes. No files require special attention. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[User visits docs page] --> B{Sidebar docked?}
B -- No --> C[Full sidebar visible]
B -- Yes --> D[Collapsed: 4rem peek strip\nshows topic icons only]
D -- hover / focus --> E[Sidebar expands to full width\nwith box-shadow]
E -- mouse leaves --> D
D --> D1[Current topic icon highlighted\nbg transparent when collapsed]
subgraph Sidebar nav items
F[Normal link] -- hover --> G[bg highlight + translateX\ntext: --sl-color-white]
H[details closed] -- hover --> I[bg highlight + translateX\ntext: --sl-color-white]
J[details open / selected] -- no hover effect --> J
end
subgraph ENSNodeServiceCard
K[Default state\nborder-gray-200\nchevron text-gray-200] -- hover --> L[border #4a5c63\nchevron text #4a5c63\nlarger shadow\ntransition-all 200ms]
end
subgraph Back-link
M[Icon left-arrow\ntext --sl-color-accent] -- hover --> N[Icon + text\ntext --sl-color-white\nunderline-offset shrinks]
end
Reviews (5): Last reviewed commit: "Merge branch 'main' of https://github.co..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| <a href={href} class="not-content group w-full h-fit min-h-[100px] flex flex-row justify-between items-center gap-5 border border-gray-200 hover:border-[#4a5c63] hover:shadow cursor-pointer rounded-2xl overflow-hidden p-4 transition-all duration-200"> | ||
| <div class="w-fit flex flex-row justify-start items-center gap-5"> | ||
| <slot name="icon"/> | ||
| <div class="not-content w-full h-fit flex flex-col justify-start items-start gap-2"> | ||
| <h4 class="not-content text-2xl leading-normal font-semibold text-black">{title}</h4> | ||
| <p class="not-content text-base leading-normal text-[var(--sl-color-text)]">{description}</p> | ||
| </div> | ||
| </div> | ||
| <Icon name="lucide:chevron-right" class="not-content h-10 w-10 shrink-0 text-gray-200 group-hover:text-gray-300" /> | ||
| <Icon name="lucide:chevron-right" class="not-content h-10 w-10 shrink-0 text-gray-200 group-hover:text-[#4a5c63]" /> |
There was a problem hiding this comment.
#4a5c63 is hardcoded in two places on this element. This value won't respond to Tailwind theme changes or dark/light mode switching, and it silently diverges from the design-token system already used elsewhere (e.g. var(--sl-color-text)). The closest existing token—var(--sl-color-accent)—gives the same teal-ish look while staying theme-aware.
| <a href={href} class="not-content group w-full h-fit min-h-[100px] flex flex-row justify-between items-center gap-5 border border-gray-200 hover:border-[#4a5c63] hover:shadow cursor-pointer rounded-2xl overflow-hidden p-4 transition-all duration-200"> | |
| <div class="w-fit flex flex-row justify-start items-center gap-5"> | |
| <slot name="icon"/> | |
| <div class="not-content w-full h-fit flex flex-col justify-start items-start gap-2"> | |
| <h4 class="not-content text-2xl leading-normal font-semibold text-black">{title}</h4> | |
| <p class="not-content text-base leading-normal text-[var(--sl-color-text)]">{description}</p> | |
| </div> | |
| </div> | |
| <Icon name="lucide:chevron-right" class="not-content h-10 w-10 shrink-0 text-gray-200 group-hover:text-gray-300" /> | |
| <Icon name="lucide:chevron-right" class="not-content h-10 w-10 shrink-0 text-gray-200 group-hover:text-[#4a5c63]" /> | |
| <a href={href} class="not-content group w-full h-fit min-h-[100px] flex flex-row justify-between items-center gap-5 border border-gray-200 hover:border-[var(--sl-color-accent)] hover:shadow cursor-pointer rounded-2xl overflow-hidden p-4 transition-all duration-200"> | |
| <div class="w-fit flex flex-row justify-start items-center gap-5"> | |
| <slot name="icon"/> | |
| <div class="not-content w-full h-fit flex flex-col justify-start items-start gap-2"> | |
| <h4 class="not-content text-2xl leading-normal font-semibold text-black">{title}</h4> | |
| <p class="not-content text-base leading-normal text-[var(--sl-color-text)]">{description}</p> | |
| </div> | |
| </div> | |
| <Icon name="lucide:chevron-right" class="not-content h-10 w-10 shrink-0 text-gray-200 group-hover:text-[var(--sl-color-accent)]" /> |
There was a problem hiding this comment.
- We only support light mode, so theme changes are not a concern
- The color was chosen to match the hover colors of the search component
|
|
||
| [Back to enskit overview](/docs/integrate/integration-options/enskit) | ||
| <a class="group w-fit flex flex-row justify-start items-center gap-2 mt-4" href="/docs/integrate/integration-options/enskit"> | ||
| <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-white)] transition-colors duration-200" /> |
There was a problem hiding this comment.
--sl-color-white. In this project --sl-color-white is mapped to var(--color-surface), which in light mode is a very light (near-white) value — the same family of colour as the page background. The icon would effectively disappear on hover in light mode. Using --sl-color-accent-high preserves visibility in both themes. The same issue exists in the enssdk example.
| <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-white)] transition-colors duration-200" /> | |
| <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-accent-high)] transition-colors duration-200" /> |
There was a problem hiding this comment.
- In our current setup,
--sl-color-whiteis a near black color, so the visibility is not an issue. - Additionally, that color matches the hover styles of the text-body links that we want to mimic there
There was a problem hiding this comment.
You're right — I can see in starlight.css that --sl-color-white is remapped to var(--color-surface), and that same token is used consistently throughout the stylesheet for hover states (sidebar items, pagination arrows, heading links, etc.). My concern was based on the standard Starlight convention where --sl-color-white is literally white, but your theme inverts that mapping intentionally. The usage here is consistent with the rest of the design system. My comment was incorrect.
Tip: You can give me more context with [.greptile/rules.md](https://www.greptile.com/docs/code-review/custom-standards) so I get this right next time.
|
|
||
| [Back to enssdk overview](/docs/integrate/integration-options/enssdk) | ||
| <a class="group w-fit flex flex-row justify-start items-center gap-2 mt-4" href="/docs/integrate/integration-options/enssdk"> | ||
| <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-white)] transition-colors duration-200" /> |
There was a problem hiding this comment.
--sl-color-white resolves to a near-white surface colour, making the icon invisible on hover against the light page background.
| <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-white)] transition-colors duration-200" /> | |
| <Icon name="left-arrow" class="h-5 w-5 text-[var(--sl-color-accent)] group-hover:text-[var(--sl-color-accent-high)] transition-colors duration-200" /> |
There was a problem hiding this comment.
- In our current setup,
--sl-color-whiteis a near black color, so the visibility is not an issue. - Additionally, that color matches the hover styles of the text-body links that we want to mimic there
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (1)
docs/ensnode.io/src/styles/starlight.css:103
nav.sidebaris nowposition: fixedbut no longer sets an inline start offset (inset-inline-start: 0). Withleft/rightleft asauto, a fixed-position element uses its static position, which can shift when.pageis centered at wider breakpoints (see the later@media (min-width: 1484px)rule that addsmargin-inline: auto). This can leave the docked sidebar floating away from the viewport edge and make the--sl-sidebar-docked-peekpadding math incorrect. Consider restoringinset-inline-start: 0(or an equivalent logical property) so the docked sidebar is anchored to the viewport edge consistently.
.page[data-sidebar-docked] nav.sidebar {
position: fixed;
inset-block: var(--sl-nav-height) 0;
z-index: var(--sl-z-index-menu);
width: var(--sl-sidebar-docked-peek);
overflow: hidden;
transition: width 0.2s ease;
background-color: var(--sl-color-bg-sidebar);
border-inline-end: 1px solid var(--sl-color-hairline-shade);
}
…/chore/docs-uiux-refinements-pt3
Lite PR → Next tranche of UI/UX refinements
Summary
ENSNodeServiceCard (atdocs/services`)back to (enssdk/enskit) overviewlinksWhy
Testing
typecheck,lint, andtestcommands locally to ensure that the migration didn't break anything, and later confirmed that in our CI workflowNotes for Reviewer (Optional)
Customization of sidebar topics icons
Pre-Review Checklist (Blocking)