From 0095cbaac61fae6493ea0f85949d67de43d74c60 Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Wed, 19 Aug 2026 18:16:56 +0800
Subject: [PATCH] fix(ui): align vite and rolldown home banner spacing

---
 packages/rolldown/src/app/pages/index.vue     |  7 ++--
 .../Container/ContainerHomeHero.stories.ts    | 35 +++++++++++++++++++
 .../Container/ContainerHomeHero.vue           |  5 +++
 packages/vite/src/app/pages/home.vue          |  7 ++--
 4 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 packages/ui/src/components/Container/ContainerHomeHero.stories.ts
 create mode 100644 packages/ui/src/components/Container/ContainerHomeHero.vue

diff --git a/packages/rolldown/src/app/pages/index.vue b/packages/rolldown/src/app/pages/index.vue
index 4a58bb32d..5b4f60f2d 100644
--- a/packages/rolldown/src/app/pages/index.vue
+++ b/packages/rolldown/src/app/pages/index.vue
@@ -3,6 +3,7 @@ import type { BuildInfo } from '~~/node/rolldown/logs-manager'
 import ActionButton from '@vitejs/devtools-ui/components/Action/ActionButton.vue'
 import ActionIconButton from '@vitejs/devtools-ui/components/Action/ActionIconButton.vue'
 import BannerRolldownDevTools from '@vitejs/devtools-ui/components/Banner/BannerRolldownDevTools.vue'
+import ContainerHomeHero from '@vitejs/devtools-ui/components/Container/ContainerHomeHero.vue'
 import { useClipboard } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { useRpc } from '#imports'
@@ -100,8 +101,10 @@ async function deleteSession(session: BuildInfo) {
 </script>
 
 <template>
-  <div class="p4 flex flex-col gap-4 items-center relative">
-    <BannerRolldownDevTools />
+  <div class="px4 pb4 flex flex-col items-center relative">
+    <ContainerHomeHero>
+      <BannerRolldownDevTools />
+    </ContainerHomeHero>
 
     <!-- Empty state -->
     <div v-if="!sessions.length" class="flex flex-col gap-3 items-center max-w-140">
diff --git a/packages/ui/src/components/Container/ContainerHomeHero.stories.ts b/packages/ui/src/components/Container/ContainerHomeHero.stories.ts
new file mode 100644
index 000000000..172c57d6e
--- /dev/null
+++ b/packages/ui/src/components/Container/ContainerHomeHero.stories.ts
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { h } from 'vue'
+import BannerViteDevTools from '../Banner/BannerViteDevTools.vue'
+import ContainerHomeHero from './ContainerHomeHero.vue'
+
+const meta = {
+  title: 'Container/ContainerHomeHero',
+  component: ContainerHomeHero,
+  tags: ['autodocs'],
+  parameters: {
+    docs: { description: { component: 'Shared home-page header spacing for a DevTools wordmark and related brand metadata.' } },
+  },
+} satisfies Meta<typeof ContainerHomeHero>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    setup: () => () => h(ContainerHomeHero, null, {
+      default: () => h(BannerViteDevTools),
+    }),
+  }),
+}
+
+export const WithSecondaryContent: Story = {
+  render: () => ({
+    setup: () => () => h(ContainerHomeHero, null, {
+      default: () => [
+        h(BannerViteDevTools),
+        h('span', { class: 'text-sm op50' }, 'Secondary brand metadata'),
+      ],
+    }),
+  }),
+}
diff --git a/packages/ui/src/components/Container/ContainerHomeHero.vue b/packages/ui/src/components/Container/ContainerHomeHero.vue
new file mode 100644
index 000000000..c07739c74
--- /dev/null
+++ b/packages/ui/src/components/Container/ContainerHomeHero.vue
@@ -0,0 +1,5 @@
+<template>
+  <header class="w-full pt8 pb6 flex flex-col gap3 items-center">
+    <slot />
+  </header>
+</template>
diff --git a/packages/vite/src/app/pages/home.vue b/packages/vite/src/app/pages/home.vue
index f2334767b..43803b08c 100644
--- a/packages/vite/src/app/pages/home.vue
+++ b/packages/vite/src/app/pages/home.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import BannerViteDevTools from '@vitejs/devtools-ui/components/Banner/BannerViteDevTools.vue'
+import ContainerHomeHero from '@vitejs/devtools-ui/components/Container/ContainerHomeHero.vue'
 import { useAsyncState } from '@vueuse/core'
 import { computed } from 'vue'
 import { useRpc } from '#imports'
@@ -120,8 +121,10 @@ const metadata = computed(() => [
     v-if="isLoading"
     text="Connecting..."
   />
-  <div v-else class="p4 flex flex-col gap-4 items-center justify-center relative">
-    <BannerViteDevTools />
+  <div v-else class="px4 pb4 flex flex-col items-center relative">
+    <ContainerHomeHero>
+      <BannerViteDevTools />
+    </ContainerHomeHero>
 
     <div class="border border-base rounded p2 flex flex-col gap-4 justify-center">
       <div