From 37dbe895d4cf813e6eb1289f24c637945eec0d1f Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Tue, 21 Jan 2025 00:46:04 +0530
Subject: [PATCH] fix(theme): broken hero heading in certain viewports

---
 src/client/theme-default/components/VPHero.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
index fc80cb6c..b3d527d7 100644
--- a/src/client/theme-default/components/VPHero.vue
+++ b/src/client/theme-default/components/VPHero.vue
@@ -29,7 +29,7 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
       <div class="main">
         <slot name="home-hero-info-before" />
         <slot name="home-hero-info">
-          <h1>
+          <h1 class="heading">
             <span v-if="name" v-html="name" class="name clip"></span>
             <span v-if="text" v-html="text" class="text"></span>
           </h1>
@@ -125,9 +125,14 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   }
 }
 
+.heading {
+  display: flex;
+  flex-direction: column;
+}
+
 .name,
 .text {
-  display: inline-block;
+  width: fit-content;
   max-width: 392px;
   letter-spacing: -0.4px;
   line-height: 40px;