docs: tweak code preview design

[mimarz]

resolves #4842

[changeset-bot]

⚠️ No Changeset found

Latest commit: 252dbde

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

[github-actions]

Preview deployments for this pull request:

www - 3. Jun 2026 - 13:59

[Copilot]

Pull request overview

This PR updates the live code preview/editor component styling and controls to make the preview + code sections feel more visually connected by reducing the vertical spacing between them (per issue #4842).

Changes:

• Adjust spacing between the preview and editor sections via CSS layout updates.
• Replace the language label with a language toggle group placement/styling change.
• Hide the Reset button when there are no code changes (logic added).

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
apps/www/app/_components/live-component/live-components.tsx	Updates editor header UI (language toggle placement) and reset button visibility logic.
apps/www/app/_components/live-component/live-component.module.css	Tweaks spacing and border-radius variable usage; adjusts language/toggle positioning.

Comments suppressed due to low confidence (1)

apps/www/app/_components/live-component/live-component.module.css:170

• .language is now applied to the <ds.ToggleGroup />, but this media query hides the entire language toggle on screens ≤480px, which prevents switching between HTML/React on mobile. If only the old label was meant to be hidden, remove this rule (or move it to a label-specific class).

  @media screen and (max-width: 480px) {
    display: none;
  }

---

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