From 78c40cbdd1be528c695c53e847ca430c080aebac Mon Sep 17 00:00:00 2001
From: setkyar <setkyar16@gmail.com>
Date: Sat, 27 Jun 2026 21:12:27 +0700
Subject: [PATCH] fix(docs): stop hero demo from overlapping long headings

Long localized headings (e.g. Burmese) ran into the demo GIF column. Cap the
hero text column to 500px, cancel VitePress's leftward image shift, and let the
GIF fill its own column instead of a fixed 620px so the two never collide.
---
 website/.vitepress/theme/HeroImage.vue |  5 ++++-
 website/.vitepress/theme/custom.css    | 12 ++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/website/.vitepress/theme/HeroImage.vue b/website/.vitepress/theme/HeroImage.vue
index a25009d..6e2420f 100644
--- a/website/.vitepress/theme/HeroImage.vue
+++ b/website/.vitepress/theme/HeroImage.vue
@@ -38,8 +38,11 @@ import { withBase } from 'vitepress'
   text-align: center;
 }
 @media (min-width: 960px) {
+  /* Fill the image column rather than a fixed width, so it never overflows
+     into the (possibly long, e.g. Burmese) heading. */
   .hero-demo-img {
-    width: 620px;
+    width: 100%;
+    max-width: 560px;
   }
 }
 @media (max-width: 640px) {
diff --git a/website/.vitepress/theme/custom.css b/website/.vitepress/theme/custom.css
index a61e311..16b7b89 100644
--- a/website/.vitepress/theme/custom.css
+++ b/website/.vitepress/theme/custom.css
@@ -104,6 +104,18 @@ html[data-theme] {
   --vp-home-hero-image-filter: blur(76px);
 }
 
+/* Keep the hero demo strictly in its own column so long headings (e.g. Burmese)
+   never collide with it: cap the text column and cancel VitePress's leftward
+   image shift. */
+@media (min-width: 960px) {
+  .VPHero.has-image .container .main {
+    max-width: 500px;
+  }
+  .VPHero .image-container {
+    transform: translateY(-32px);
+  }
+}
+
 /* Native widgets (scrollbars, form controls) follow each theme. */
 html[data-theme='dark'],
 html[data-theme='nord'],