From ff3e3a94dc7110443c57f8805d4eb1f4529970e4 Mon Sep 17 00:00:00 2001
From: rgehbt <74761884+Gehbt@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:13:16 +0800
Subject: [PATCH] docs: fix ShikiMiniPlayground style (#833)

---
 docs/.vitepress/components/LanguagesList.vue       | 10 +++++++++-
 docs/.vitepress/components/ShikiMiniPlayground.vue | 12 ++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/docs/.vitepress/components/LanguagesList.vue b/docs/.vitepress/components/LanguagesList.vue
index 62a5f3fb6..7d9e6d5b0 100644
--- a/docs/.vitepress/components/LanguagesList.vue
+++ b/docs/.vitepress/components/LanguagesList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { usePlayground } from '../store/playground'
 
 const play = usePlayground()
@@ -17,6 +17,14 @@ const langs = computed(() => {
     return play.bundledLangsWeb
   return play.bundledLangsFull
 })
+watch(showModel, () => {
+  if (showModel.value) {
+    (document.scrollingElement as HTMLElement).style.overflow = 'hidden'
+  }
+  else {
+    (document.scrollingElement as HTMLElement).style.overflow = 'initial'
+  }
+})
 </script>
 
 <template>
diff --git a/docs/.vitepress/components/ShikiMiniPlayground.vue b/docs/.vitepress/components/ShikiMiniPlayground.vue
index 173c3193e..09108acfc 100644
--- a/docs/.vitepress/components/ShikiMiniPlayground.vue
+++ b/docs/.vitepress/components/ShikiMiniPlayground.vue
@@ -27,10 +27,10 @@ function onInput() {
 
 <template>
   <div
-    class="language-ts vp-adaptive-theme mini-playground transition-none!" shadow
+    class="language-ts vp-adaptive-theme transition-none! mini-playground" shadow
     :style="[play.preStyle, { colorScheme: currentThemeType }]"
   >
-    <div absolute z-10 p2 px3 pl5 flex="~ gap-1 items-center" left-0 top-0 right-0 border="b-solid gray/5">
+    <div sticky z-12 p2 px3 pl5 flex="~ gap-1 items-center" left-0 top-0 right-0 border="b-solid gray/5" bg-inherit>
       <div i-carbon:chevron-down op50 />
       <select v-model="play.lang" font-mono :style="play.preStyle">
         <option v-for="lang in play.allLanguages" :key="lang.id" :value="lang.id">
@@ -62,7 +62,7 @@ function onInput() {
         <div i-carbon:shuffle op50 />
       </button>
     </div>
-    <div relative mt-10 min-h-100>
+    <div relative min-h-100 float-left min-w-full>
       <span ref="highlightContainerRef" v-html="play.output" />
       <textarea
         ref="textAreaRef"
@@ -80,15 +80,11 @@ function onInput() {
 </template>
 
 <style>
-.mini-playground {
-  overflow: hidden;
-}
-
 .mini-playground select {
   background: transparent;
   color: inherit;
   min-width: 8em;
-  padding: 0 !important;
+  padding: 0px !important;
   position: relative;
 }
 .mini-playground select:focus {