From b7602df1cdee75d0814cf3f131b4906a31841851 Mon Sep 17 00:00:00 2001
From: Robin <robin.kehl@singular-it.de>
Date: Mon, 10 Aug 2026 22:59:04 +0200
Subject: [PATCH] fix(theme): rendering of sponsor and team components inside
 vp-doc containers (#4493)

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
---
 __tests__/e2e/.vitepress/config.ts            | 22 +++++
 __tests__/e2e/multi-sidebar/index.test.ts     |  3 +-
 __tests__/e2e/public/sponsor-logo.svg         |  4 +
 __tests__/e2e/public/team-avatar-small.svg    |  5 ++
 __tests__/e2e/public/team-avatar-wide.svg     |  6 ++
 __tests__/e2e/team-and-sponsors/data.ts       | 89 +++++++++++++++++++
 __tests__/e2e/team-and-sponsors/doc.md        |  3 +
 .../home-no-markdown-styles.md                | 30 +++++++
 __tests__/e2e/team-and-sponsors/home.md       | 29 ++++++
 __tests__/e2e/team-and-sponsors/page.md       |  8 ++
 .../team-and-sponsors/parts/doc-page-body.md  | 42 +++++++++
 .../e2e/team-and-sponsors/parts/home-body.md  | 47 ++++++++++
 .../theme-default/components/VPButton.vue     |  3 +-
 .../theme-default/components/VPHome.vue       |  1 +
 .../components/VPHomeContent.vue              | 26 +-----
 .../components/VPHomeSponsors.vue             |  2 +
 .../components/VPTeamMembers.vue              | 18 ++++
 .../components/VPTeamMembersItem.vue          |  5 ++
 .../components/VPTeamPageSection.vue          |  2 +
 .../styles/components/vp-doc.css              | 23 -----
 .../styles/components/vp-sponsor.css          | 19 ++--
 21 files changed, 332 insertions(+), 55 deletions(-)
 create mode 100644 __tests__/e2e/public/sponsor-logo.svg
 create mode 100644 __tests__/e2e/public/team-avatar-small.svg
 create mode 100644 __tests__/e2e/public/team-avatar-wide.svg
 create mode 100644 __tests__/e2e/team-and-sponsors/data.ts
 create mode 100644 __tests__/e2e/team-and-sponsors/doc.md
 create mode 100644 __tests__/e2e/team-and-sponsors/home-no-markdown-styles.md
 create mode 100644 __tests__/e2e/team-and-sponsors/home.md
 create mode 100644 __tests__/e2e/team-and-sponsors/page.md
 create mode 100644 __tests__/e2e/team-and-sponsors/parts/doc-page-body.md
 create mode 100644 __tests__/e2e/team-and-sponsors/parts/home-body.md

diff --git a/__tests__/e2e/.vitepress/config.ts b/__tests__/e2e/.vitepress/config.ts
index 7ec72c30..cafcfd50 100644
--- a/__tests__/e2e/.vitepress/config.ts
+++ b/__tests__/e2e/.vitepress/config.ts
@@ -132,6 +132,27 @@ const sidebar: DefaultTheme.Config['sidebar'] = {
           link: '/markdown-extensions/foo'
         }
       ]
+    },
+    {
+      text: 'Team & Sponsors',
+      items: [
+        {
+          text: 'Doc Layout',
+          link: '/team-and-sponsors/doc'
+        },
+        {
+          text: 'Page Layout',
+          link: '/team-and-sponsors/page'
+        },
+        {
+          text: 'Home Layout',
+          link: '/team-and-sponsors/home'
+        },
+        {
+          text: 'Home Layout (raw markdown)',
+          link: '/team-and-sponsors/home-no-markdown-styles'
+        }
+      ]
     }
   ],
   '/multi-sidebar/': [
@@ -154,6 +175,7 @@ const sidebar: DefaultTheme.Config['sidebar'] = {
 export default defineConfig({
   title: 'Example',
   description: 'An example app using VitePress.',
+  srcExclude: ['**/parts/**'],
   markdown: {
     image: { lazyLoad: true }
   },
diff --git a/__tests__/e2e/multi-sidebar/index.test.ts b/__tests__/e2e/multi-sidebar/index.test.ts
index b6482bdb..cd654301 100644
--- a/__tests__/e2e/multi-sidebar/index.test.ts
+++ b/__tests__/e2e/multi-sidebar/index.test.ts
@@ -15,7 +15,8 @@ describe('test multi sidebar sort root', () => {
       'Data Loading',
       'Multi Sidebar Test',
       'Dynamic Routes',
-      'Markdown Extensions'
+      'Markdown Extensions',
+      'Team & Sponsors'
     ])
   })
 })
diff --git a/__tests__/e2e/public/sponsor-logo.svg b/__tests__/e2e/public/sponsor-logo.svg
new file mode 100644
index 00000000..1349e88e
--- /dev/null
+++ b/__tests__/e2e/public/sponsor-logo.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="32">
+  <rect width="96" height="32" rx="6" fill="#3c3c43" />
+  <text x="48" y="21" font-family="sans-serif" font-size="14" font-weight="600" fill="#ffffff" text-anchor="middle">SPONSOR</text>
+</svg>
diff --git a/__tests__/e2e/public/team-avatar-small.svg b/__tests__/e2e/public/team-avatar-small.svg
new file mode 100644
index 00000000..43e062b0
--- /dev/null
+++ b/__tests__/e2e/public/team-avatar-small.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+  <rect width="32" height="32" fill="#3451b2" />
+  <circle cx="16" cy="12" r="5" fill="#ffffff" />
+  <path d="M6 26c2-6 18-6 20 0z" fill="#ffffff" />
+</svg>
diff --git a/__tests__/e2e/public/team-avatar-wide.svg b/__tests__/e2e/public/team-avatar-wide.svg
new file mode 100644
index 00000000..316cdfeb
--- /dev/null
+++ b/__tests__/e2e/public/team-avatar-wide.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="128">
+  <rect width="192" height="128" fill="#18794e" />
+  <rect width="32" height="128" fill="#f9b44e" />
+  <rect x="160" width="32" height="128" fill="#f9b44e" />
+  <circle cx="96" cy="64" r="40" fill="#ffffff" />
+</svg>
diff --git a/__tests__/e2e/team-and-sponsors/data.ts b/__tests__/e2e/team-and-sponsors/data.ts
new file mode 100644
index 00000000..fd0bee00
--- /dev/null
+++ b/__tests__/e2e/team-and-sponsors/data.ts
@@ -0,0 +1,89 @@
+import type { DefaultTheme } from 'vitepress/theme'
+
+export const members: DefaultTheme.TeamMember[] = [
+  {
+    // smaller than the rendered avatar, checks that it still fills the circle
+    avatar: '/team-avatar-small.svg',
+    name: 'Alice Example',
+    title: 'Creator',
+    org: 'Example Org',
+    orgLink: 'https://example.com',
+    desc: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    links: [
+      { icon: 'github', link: 'https://example.com' },
+      { icon: 'x', link: 'https://example.com' }
+    ],
+    sponsor: 'https://example.com'
+  },
+  {
+    // non-square, checks object-fit (side stripes must stay cropped out)
+    avatar: '/team-avatar-wide.svg',
+    name: 'Bob Example',
+    title: 'Maintainer',
+    links: [{ icon: 'github', link: 'https://example.com' }]
+  },
+  {
+    avatar: '/team-avatar-small.svg',
+    name: 'Carol Example',
+    title: 'Partner'
+  }
+]
+
+export const partners: DefaultTheme.TeamMember[] = [
+  {
+    avatar: '/team-avatar-wide.svg',
+    name: 'Dave Example',
+    title: 'Partner',
+    links: [{ icon: 'github', link: 'https://example.com' }]
+  },
+  {
+    avatar: '/team-avatar-small.svg',
+    name: 'Eve Example',
+    title: 'Partner'
+  },
+  {
+    avatar: '/team-avatar-wide.svg',
+    name: 'Frank Example',
+    title: 'Partner'
+  }
+]
+
+interface Sponsor {
+  name: string
+  img: string
+  url: string
+}
+
+const sponsor = (name: string): Sponsor => ({
+  name,
+  img: '/sponsor-logo.svg',
+  url: 'https://example.com'
+})
+
+export const sponsors: {
+  tier: string
+  size?: 'medium' | 'big'
+  items: Sponsor[]
+}[] = [
+  {
+    tier: 'Platinum Sponsors',
+    size: 'big',
+    items: [sponsor('Sponsor One'), sponsor('Sponsor Two')]
+  },
+  {
+    tier: 'Gold Sponsors',
+    size: 'medium',
+    items: [
+      sponsor('Sponsor Three'),
+      sponsor('Sponsor Four'),
+      sponsor('Sponsor Five'),
+      sponsor('Sponsor Six')
+    ]
+  }
+]
+
+export const friends: Sponsor[] = [
+  sponsor('Friend One'),
+  sponsor('Friend Two'),
+  sponsor('Friend Three')
+]
diff --git a/__tests__/e2e/team-and-sponsors/doc.md b/__tests__/e2e/team-and-sponsors/doc.md
new file mode 100644
index 00000000..ac2abe67
--- /dev/null
+++ b/__tests__/e2e/team-and-sponsors/doc.md
@@ -0,0 +1,3 @@
+# Team & Sponsors in Doc Layout
+
+<!--@include: ./parts/doc-page-body.md-->
diff --git a/__tests__/e2e/team-and-sponsors/home-no-markdown-styles.md b/__tests__/e2e/team-and-sponsors/home-no-markdown-styles.md
new file mode 100644
index 00000000..f536f96a
--- /dev/null
+++ b/__tests__/e2e/team-and-sponsors/home-no-markdown-styles.md
@@ -0,0 +1,30 @@
+---
+layout: home
+title: Team & Sponsors in Home Layout (no markdown styles)
+markdownStyles: false
+
+hero:
+  name: Team & Sponsors
+  text: Home layout without markdown styles
+  tagline: Reference rendering of the components
+  actions:
+    - theme: brand
+      text: Doc Layout
+      link: ./doc
+  image:
+    src: /vitepress.png
+    alt: VitePress
+
+features:
+  - icon: 📝
+    title: Feature A
+    details: Some details about feature A.
+  - icon: ⚡
+    title: Feature B
+    details: Some details about feature B.
+  - icon: 🚀
+    title: Feature C
+    details: Some details about feature C.
+---
+
+<!--@include: ./parts/home-body.md-->
diff --git a/__tests__/e2e/team-and-sponsors/home.md b/__tests__/e2e/team-and-sponsors/home.md
new file mode 100644
index 00000000..11e9030c
--- /dev/null
+++ b/__tests__/e2e/team-and-sponsors/home.md
@@ -0,0 +1,29 @@
+---
+layout: home
+title: Team & Sponsors in Home Layout
+
+hero:
+  name: Team & Sponsors
+  text: Home layout with markdown styles
+  tagline: Compare with the no-markdown-styles variant
+  actions:
+    - theme: brand
+      text: Doc Layout
+      link: ./doc
+  image:
+    src: /vitepress.png
+    alt: VitePress
+
+features:
+  - icon: 📝
+    title: Feature A
+    details: Some details about feature A.
+  - icon: ⚡
+    title: Feature B
+    details: Some details about feature B.
+  - icon: 🚀
+    title: Feature C
+    details: Some details about feature C.
+---
+
+<!--@include: ./parts/home-body.md-->
diff --git a/__tests__/e2e/team-and-sponsors/page.md b/__tests__/e2e/team-and-sponsors/page.md
new file mode 100644
index 00000000..e1afb836
--- /dev/null
+++ b/__tests__/e2e/team-and-sponsors/page.md
@@ -0,0 +1,8 @@
+---
+layout: page
+title: Team & Sponsors in Page Layout
+---
+
+# Team & Sponsors in Page Layout
+
+<!--@include: ./parts/doc-page-body.md-->
diff --git a/__tests__/e2e/team-and-sponsors/parts/doc-page-body.md b/__tests__/e2e/team-and-sponsors/parts/doc-page-body.md
new file mode 100644
index 00000000..13c989f4
--- /dev/null
+++ b/__tests__/e2e/team-and-sponsors/parts/doc-page-body.md
@@ -0,0 +1,42 @@
+<script setup>
+import { VPTeamMembers, VPSponsors } from 'vitepress/theme'
+import { members, friends, sponsors } from './data'
+</script>
+
+Regular paragraph with a [link](https://example.com) and `inline code`.
+
+## Small, One Member
+
+<VPTeamMembers size="small" :members="members.slice(0, 1)" />
+
+## Small, Two Members
+
+<VPTeamMembers size="small" :members="members.slice(0, 2)" />
+
+## Small, Three Members
+
+<VPTeamMembers size="small" :members />
+
+## Medium, One Member
+
+<VPTeamMembers size="medium" :members="members.slice(0, 1)" />
+
+## Medium, Two Members
+
+<VPTeamMembers size="medium" :members="members.slice(0, 2)" />
+
+## Medium, Three Members
+
+<VPTeamMembers size="medium" :members />
+
+## Sponsors, Tiered
+
+<VPSponsors :data="sponsors" />
+
+## Sponsors, Single Tier
+
+<VPSponsors tier="Friends" size="mini" :data="friends" />
+
+## After Components
+
+Trailing markdown content after the components.
diff --git a/__tests__/e2e/team-and-sponsors/parts/home-body.md b/__tests__/e2e/team-and-sponsors/parts/home-body.md
new file mode 100644
index 00000000..f92190ce
--- /dev/null
+++ b/__tests__/e2e/team-and-sponsors/parts/home-body.md
@@ -0,0 +1,47 @@
+<script setup>
+import {
+  VPTeamPage,
+  VPTeamPageTitle,
+  VPTeamPageSection,
+  VPTeamMembers,
+  VPHomeSponsors
+} from 'vitepress/theme'
+import { members, partners, sponsors } from './data'
+</script>
+
+## Markdown Section
+
+Some paragraph text with a [link](https://example.com) and `inline code` to
+verify how markdown content is styled in this variant.
+
+- List item one
+- List item two
+
+<VPTeamPage>
+  <VPTeamPageTitle>
+    <template #title>Our Team</template>
+    <template #lead>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt.
+    </template>
+  </VPTeamPageTitle>
+  <VPTeamMembers :members="members.slice(0, 2)" />
+  <VPTeamPageSection>
+    <template #title>Partners</template>
+    <template #lead>Lorem ipsum dolor sit amet.</template>
+    <template #members>
+      <VPTeamMembers size="small" :members="partners" />
+    </template>
+  </VPTeamPageSection>
+</VPTeamPage>
+
+<VPHomeSponsors
+  message="Made possible by our generous sponsors"
+  :data="sponsors"
+  action-text="Become a sponsor"
+  action-link="https://example.com"
+/>
+
+## After Components
+
+Trailing markdown content after the components.
diff --git a/src/client/theme-default/components/VPButton.vue b/src/client/theme-default/components/VPButton.vue
index 9e8ea52d..ac062d7a 100644
--- a/src/client/theme-default/components/VPButton.vue
+++ b/src/client/theme-default/components/VPButton.vue
@@ -29,7 +29,7 @@ const component = computed(() => {
 <template>
   <component
     :is="component"
-    class="VPButton"
+    class="VPButton no-icon"
     :class="[size, theme]"
     :href="href ? normalizeLink(href) : undefined"
     :target="props.target ?? (isExternal ? '_blank' : undefined)"
@@ -46,6 +46,7 @@ const component = computed(() => {
   text-align: center;
   font-weight: 600;
   white-space: nowrap;
+  text-decoration: none;
   transition: color 0.25s, border-color 0.25s, background-color 0.25s;
 }
 
diff --git a/src/client/theme-default/components/VPHome.vue b/src/client/theme-default/components/VPHome.vue
index 4e39a385..e9526c98 100644
--- a/src/client/theme-default/components/VPHome.vue
+++ b/src/client/theme-default/components/VPHome.vue
@@ -37,6 +37,7 @@ const { frontmatter, theme } = useData()
 
 <style scoped>
 .VPHome {
+  overflow-x: clip;
   margin-bottom: 6rem;
 }
 
diff --git a/src/client/theme-default/components/VPHomeContent.vue b/src/client/theme-default/components/VPHomeContent.vue
index 2754f429..49b7bcdb 100644
--- a/src/client/theme-default/components/VPHomeContent.vue
+++ b/src/client/theme-default/components/VPHomeContent.vue
@@ -1,18 +1,5 @@
-<script setup lang="ts">
-import { useWindowSize } from '@vueuse/core'
-
-const { width: vw } = useWindowSize({
-  initialWidth: 0,
-  includeScrollbar: false
-})
-</script>
-
 <template>
-  <div
-    class="vp-doc container"
-    :style="vw ? { '--vp-offset': `calc(50% - ${vw / 2}px)` } : {}"
-    data-allow-mismatch="style"
-  >
+  <div class="VPHomeContent vp-doc container">
     <slot />
   </div>
 </template>
@@ -38,18 +25,13 @@ const { width: vw } = useWindowSize({
   }
 }
 
+/* stretch to full viewport width, overflow is clipped by .VPHome */
 .vp-doc :deep(.VPHomeSponsors),
 .vp-doc :deep(.VPTeamPage) {
-  margin-left: var(--vp-offset, calc(50% - 50vw));
-  margin-right: var(--vp-offset, calc(50% - 50vw));
-}
-
-.vp-doc :deep(.VPHomeSponsors h2) {
-  border-top: none;
-  letter-spacing: normal;
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
 }
 
-.vp-doc :deep(.VPHomeSponsors a),
 .vp-doc :deep(.VPTeamPage a) {
   text-decoration: none;
 }
diff --git a/src/client/theme-default/components/VPHomeSponsors.vue b/src/client/theme-default/components/VPHomeSponsors.vue
index dfab32a1..3bb9ac2c 100644
--- a/src/client/theme-default/components/VPHomeSponsors.vue
+++ b/src/client/theme-default/components/VPHomeSponsors.vue
@@ -96,9 +96,11 @@ withDefaults(defineProps<Props>(), {
 
 .message {
   margin: 0 auto;
+  border-top: none;
   padding-top: 0.625rem;
   max-width: 20rem;
   text-align: center;
+  letter-spacing: normal;
   line-height: 1.5;
   font-size: 1rem;
   font-weight: 500;
diff --git a/src/client/theme-default/components/VPTeamMembers.vue b/src/client/theme-default/components/VPTeamMembers.vue
index 9d38d641..0e474a2c 100644
--- a/src/client/theme-default/components/VPTeamMembers.vue
+++ b/src/client/theme-default/components/VPTeamMembers.vue
@@ -74,4 +74,22 @@ const classes = computed(() => [props.size, `count-${props.members.length}`])
   margin: 0;
   padding: 0;
 }
+.vp-doc .VPTeamMembers :deep(.org),
+.vp-doc .VPTeamMembers :deep(.sp-link) {
+  text-decoration: none;
+}
+
+/* Sizing for doc pages, where the content area is narrow (excludes home content) */
+.vp-doc:not(.VPHomeContent) .VPTeamMembers {
+  margin-top: 1.5rem;
+}
+.vp-doc:not(.VPHomeContent) .VPTeamMembers.small.count-1 .container,
+.vp-doc:not(.VPHomeContent) .VPTeamMembers.medium.count-1 .container {
+  margin: 0;
+  max-width: calc((100% - 1.5rem) / 2);
+}
+.vp-doc:not(.VPHomeContent) .VPTeamMembers.small.count-2 .container,
+.vp-doc:not(.VPHomeContent) .VPTeamMembers.small.count-3 .container {
+  max-width: 100%;
+}
 </style>
diff --git a/src/client/theme-default/components/VPTeamMembersItem.vue b/src/client/theme-default/components/VPTeamMembersItem.vue
index fcf9bfcd..bcca2e82 100644
--- a/src/client/theme-default/components/VPTeamMembersItem.vue
+++ b/src/client/theme-default/components/VPTeamMembersItem.vue
@@ -156,16 +156,20 @@ withDefaults(defineProps<Props>(), {
   inset: 0;
   margin: 0;
   border-radius: 50%;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
 }
 
 .name {
   margin: 0;
+  letter-spacing: normal;
   font-weight: 600;
 }
 
 .affiliation {
   margin: 0;
+  line-height: 1.5;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
@@ -181,6 +185,7 @@ withDefaults(defineProps<Props>(), {
 
 .desc {
   margin: 0 auto;
+  line-height: 1.5;
 }
 
 .desc :deep(a) {
diff --git a/src/client/theme-default/components/VPTeamPageSection.vue b/src/client/theme-default/components/VPTeamPageSection.vue
index bccc5b1d..df22cabc 100644
--- a/src/client/theme-default/components/VPTeamPageSection.vue
+++ b/src/client/theme-default/components/VPTeamPageSection.vue
@@ -52,6 +52,8 @@
 .title-text {
   position: relative;
   display: inline-block;
+  margin: 0;
+  border-top: none;
   padding: 0 1.5rem;
   letter-spacing: 0;
   line-height: 1.6;
diff --git a/src/client/theme-default/styles/components/vp-doc.css b/src/client/theme-default/styles/components/vp-doc.css
index fd2a5481..e912c4a3 100644
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/src/client/theme-default/styles/components/vp-doc.css
@@ -586,29 +586,6 @@
   opacity: 0;
 }
 
-/**
- * Component: Team
- * -------------------------------------------------------------------------- */
-
-.vp-doc .VPTeamMembers {
-  margin-top: 1.5rem;
-}
-
-.vp-doc .VPTeamMembers.small.count-1 .container {
-  margin: 0 !important;
-  max-width: calc((100% - 1.5rem) / 2) !important;
-}
-
-.vp-doc .VPTeamMembers.small.count-2 .container,
-.vp-doc .VPTeamMembers.small.count-3 .container {
-  max-width: 100% !important;
-}
-
-.vp-doc .VPTeamMembers.medium.count-1 .container {
-  margin: 0 !important;
-  max-width: calc((100% - 1.5rem) / 2) !important;
-}
-
 /**
  * External links
  * -------------------------------------------------------------------------- */
diff --git a/src/client/theme-default/styles/components/vp-sponsor.css b/src/client/theme-default/styles/components/vp-sponsor.css
index fc437ef0..a25c5b17 100644
--- a/src/client/theme-default/styles/components/vp-sponsor.css
+++ b/src/client/theme-default/styles/components/vp-sponsor.css
@@ -1,7 +1,3 @@
-/**
- * VPSponsors styles are defined as global because a new class gets
- * allied in onMounted` hook and we can't use scoped style.
- */
 .vp-sponsor {
   border-radius: 1rem;
   overflow: hidden;
@@ -15,10 +11,10 @@
   margin-top: 0.25rem;
 }
 
-.vp-sponsor-tier {
-  margin: 0 0 0.25rem !important;
+.vp-sponsor .vp-sponsor-tier {
+  margin: 0 0 0.25rem;
   text-align: center;
-  letter-spacing: 0.0625rem !important;
+  letter-spacing: 0.0625rem;
   line-height: 1.5;
   width: 100%;
   font-weight: 600;
@@ -154,10 +150,17 @@
   filter: grayscale(1) invert(1);
 }
 
-/* Reset styles from vp-doc if used in markdown */
 .vp-doc .vp-sponsor-grid,
 .vp-doc .vp-sponsor-grid-item {
   list-style: none;
   margin: 0;
   padding: 0;
 }
+
+.vp-doc .vp-sponsor-grid-image {
+  margin: 0;
+}
+
+.vp-doc .vp-sponsor-grid-link {
+  text-decoration: none;
+}