fix(docs): round code block frames and remove drop shadow

[notrab]

Lite PR

Tip: Review docs on the ENSNode PR process

Summary

There was a shadow on expressive code that meant we seen the lack of border radius. The shadow also made the box look blurry.

Before

After

---

Why

• Why this change exists. Link to related GitHub issues where relevant.

---

Testing

• How this was tested.
• If you didn't test it, say why.

---

Notes for Reviewer (Optional)

• Anything non-obvious or worth a heads-up.

---

Pre-Review Checklist (Blocking)

• This PR does not introduce significant changes and is low-risk to review quickly.
• Relevant changesets are included (or are not required)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 16ffab3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
enskit-react-example.ensnode.io	Ready	Preview, Comment	Jun 4, 2026 8:47am
ensnode.io	Ready	Preview, Comment	Jun 4, 2026 8:47am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
admin.ensnode.io	Skipped		Jun 4, 2026 8:47am
ensrainbow.io	Skipped		Jun 4, 2026 8:47am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 42047b97-44bf-4f0a-bdaa-81c243061f31

📥 Commits

Reviewing files that changed from the base of the PR and between 0eaa875 and 16ffab3.

📒 Files selected for processing (1)

• docs/ensnode.io/src/styles/starlight.css

---

📝 Walkthrough

Walkthrough

This PR updates CSS styling for Starlight expressive-code frames in the documentation site, broadening the selector to apply rounded corners and overflow clipping to all frames instead of only non-content frames, and explicitly disables box-shadow.

Changes

Expressive Code Frame Styling

Layer / File(s)	Summary
Frame styling update docs/ensnode.io/src/styles/starlight.css	CSS selector for .sl-markdown-content .expressive-code .frame is broadened from .frame:not(.not-content) to .frame while preserving rounded corners and overflow clipping behavior, and box-shadow is set to none.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

• namehash/ensnode#2201: Both PRs touch docs/ensnode.io/src/styles/starlight.css to change styling for Starlight expressive-code snippet frames with rounded/overflow behavior adjustments.

Suggested labels

docs

Poem

🐰 CSS styles so neat,
Frames now dance, complete!
No shadows to fear,
Code samples so clear—
Polish with every tweak!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description provides a clear summary with before/after images but omits details in the Why, Testing, and Notes sections that the template requests.	Complete the Why, Testing, and Notes for Reviewer sections with specific details about the motivation, testing approach, and any implementation notes for reviewers.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: removing drop shadow from code block frames and rounding them, which matches the CSS modifications in the PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/docs-code-block-shadow

---

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 and usage tips.}

[greptile-apps]

Greptile Summary

This PR makes a small cosmetic fix to the documentation site's CSS, improving the appearance of expressive-code blocks by removing an unwanted drop shadow and ensuring rounded corners render correctly.

• Adds box-shadow: none to .sl-markdown-content .expressive-code .frame so code frames no longer appear blurry or elevated.
• Removes the :not(.not-content) qualifier from the selector, applying the border-radius and overflow rules uniformly to all expressive-code frames within the markdown content area.

Confidence Score: 5/5

A two-line CSS change scoped entirely to documentation styling — no runtime logic, data, or auth is touched.

The change only modifies a single CSS rule in the docs site stylesheet, adding box-shadow: none and broadening the selector to remove a :not(.not-content) guard. Both are intentional cosmetic fixes with no side effects outside the docs UI.

No files require special attention.

Important Files Changed

Filename	Overview
docs/ensnode.io/src/styles/starlight.css	Removes drop shadow from expressive-code frames and broadens the selector by dropping the :not(.not-content) qualifier, ensuring rounded corners and no shadow on all code blocks in the markdown content area.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[".sl-markdown-content .expressive-code .frame"] --> B["border-radius: 12px"]
    A --> C["overflow: hidden"]
    A --> D["box-shadow: none - new"]
    A --> E["border-color: color-mix"]
    B --> F["Rounded code block corners"]
    C --> G["Scrollbar clipped inside rounded shape"]
    D --> H["No blurry shadow around frames"]

Loading

_{Reviews (3): Last reviewed commit: "update target" | Re-trigger Greptile}

[Copilot]

Pull request overview

Updates the docs site’s Expressive Code styling so code block containers render with properly rounded corners and without the previously visible square-corner drop shadow bleeding through, improving visual clarity in Starlight’s markdown content area.

Changes:

• Broadens the .frame selector for Expressive Code blocks so the rounding/overflow rules apply consistently.
• Removes the drop shadow on Expressive Code frames to avoid the “blurry box” effect and prevent square shadow corners showing under rounded <pre>.
• Expands the inline CSS comment to explain why the selector must target the figure/frame element.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[notrab]

@Y3drk <pre> gets clipped by the rounded shape instead of overlapping it.

Starlight adds not-content to every code block, so the figure itself must be matched here for its corners to round and its drop shadow to be removed otherwise the square-cornered shadow shows through under the rounded <pre>.

[lightwalker-eth]

@notrab Thanks, looks nice! 👍

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.

[notrab]

@lightwalker-eth the graphiql code snippets have a shadow which don't look great, but we can update those separately as I remember there was discussion of updating these components.