fix(sfc-playground): fix header z-index issue #14478

[oodavid]

Fixes are pure CSS, although my vscode settings have sorted the imports in Header.vue‎.

Summary by CodeRabbit

• Style
  • Adjusted CSS stacking context for navigation and version selector elements.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 355d606 and d6c8cbb.

📒 Files selected for processing (2)

• packages-private/sfc-playground/src/Header.vue
• packages-private/sfc-playground/src/VersionSelect.vue

---

📝 Walkthrough

Walkthrough

Minor styling and organizational adjustments to the SFC Playground components. Header.vue removes a high z-index value and reorders imports, while VersionSelect.vue adds a z-index CSS property. These changes affect the stacking context of navigation and version elements without introducing new functionality.

Changes

Cohort / File(s)	Summary
Stacking Context & Import Reorganization packages-private/sfc-playground/src/Header.vue	Removed z-index: 999 from nav element, reducing stacking priority. Reordered icon imports (Sun, Moon, Share) and shifted computed import position without functional impact.
Z-Index Addition packages-private/sfc-playground/src/VersionSelect.vue	Added z-index: 1 to .version CSS class to establish stacking context for the version selector element.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A hop, a skip, z-indices stack,
Headers dance back, versions come back,
Imports shuffle in neat little rows,
CSS whispers how layering flows! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(sfc-playground): fix header z-index issue #14478' directly and clearly describes the main change: fixing a z-index issue in the sfc-playground header by removing z-index: 999 from Header.vue and adding z-index: 1 to VersionSelect.vue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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.}

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	104 kB	39.3 kB	35.4 kB
vue.global.prod.js	162 kB	59.3 kB	52.8 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	47.8 kB	18.6 kB	17.1 kB
createApp	56 kB	21.7 kB	19.8 kB
createSSRApp	60.2 kB	23.4 kB	21.4 kB
defineCustomElement	61.6 kB	23.4 kB	21.4 kB
overall	70.4 kB	27 kB	24.6 kB

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@14479

npm i https://pkg.pr.new/@vue/compiler-core@14479

yarn add https://pkg.pr.new/@vue/compiler-core@14479.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@14479

npm i https://pkg.pr.new/@vue/compiler-dom@14479

yarn add https://pkg.pr.new/@vue/compiler-dom@14479.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@14479

npm i https://pkg.pr.new/@vue/compiler-sfc@14479

yarn add https://pkg.pr.new/@vue/compiler-sfc@14479.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@14479

npm i https://pkg.pr.new/@vue/compiler-ssr@14479

yarn add https://pkg.pr.new/@vue/compiler-ssr@14479.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@14479

npm i https://pkg.pr.new/@vue/reactivity@14479

yarn add https://pkg.pr.new/@vue/reactivity@14479.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@14479

npm i https://pkg.pr.new/@vue/runtime-core@14479

yarn add https://pkg.pr.new/@vue/runtime-core@14479.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@14479

npm i https://pkg.pr.new/@vue/runtime-dom@14479

yarn add https://pkg.pr.new/@vue/runtime-dom@14479.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@14479

npm i https://pkg.pr.new/@vue/server-renderer@14479

yarn add https://pkg.pr.new/@vue/server-renderer@14479.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@14479

npm i https://pkg.pr.new/@vue/shared@14479

yarn add https://pkg.pr.new/@vue/shared@14479.tgz

vue

pnpm add https://pkg.pr.new/vue@14479

npm i https://pkg.pr.new/vue@14479

yarn add https://pkg.pr.new/vue@14479.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@14479

npm i https://pkg.pr.new/@vue/compat@14479

yarn add https://pkg.pr.new/@vue/compat@14479.tgz

commit: d6c8cbb