bump theme + make example output button visible on mobile

Author: yyx990803

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@vue/repl": "^1.3.3",
-    "@vue/theme": "^2.2.0",
+    "@vue/theme": "^2.2.1",
     "dynamics.js": "^1.1.5",
     "gsap": "^3.9.0",
     "vitepress": "^1.0.0-alpha.60",

pnpm-lock.yaml

@@ -2,8 +2,12 @@
 import { Repl, ReplStore } from '@vue/repl'
 import '@vue/repl/style.css'
 import { data } from './examples.data'
-import { inject, watchEffect, version, Ref } from 'vue'
-import { resolveSFCExample, resolveNoBuildExample, onHashChange } from './utils'
+import { inject, watchEffect, version, Ref, onMounted, ref } from 'vue'
+import {
+  resolveSFCExample,
+  resolveNoBuildExample,
+  onHashChange
+} from './utils'
 
 const store = new ReplStore({
   defaultVueRuntimeURL: `https://unpkg.com/vue@${version}/dist/vue.esm-browser.js`
@@ -34,29 +38,46 @@ function updateExample() {
     preferSFC.value ? 'App.vue' : 'index.html'
   )
 }
+
+const heightProvider = ref<HTMLDivElement>()
+onMounted(() => {
+  const set = () => {
+    heightProvider.value!.style.setProperty(
+      '--vh',
+      window.innerHeight + 'px'
+    )
+  }
+  set()
+  window.addEventListener('resize', set)
+})
 </script>
 
 <template>
-  <Repl
-    :store="store"
-    :showImportMap="!preferSFC"
-    :showCompileOutput="false"
-    :clearConsole="false"
-  />
+  <div ref="heightProvider">
+    <Repl
+      :store="store"
+      :showImportMap="!preferSFC"
+      :showCompileOutput="false"
+      :clearConsole="false"
+    />
+  </div>
 </template>
 
-<style scoped>
+<style>
 .vue-repl {
   max-width: 1105px;
   border-right: 1px solid var(--vt-c-divider-light);
-  height: calc(100vh - var(--vt-nav-height) - var(--vt-banner-height, 0px));
+  height: calc(
+    var(--vh, 0px) - var(--vt-nav-height) - var(--vt-banner-height, 0px)
+  );
 }
 
 @media (max-width: 960px) {
   .vue-repl {
     border: none;
     height: calc(
-      100vh - var(--vt-nav-height) - var(--vt-banner-height, 0px) - 48px
+      var(--vh, 0px) - var(--vt-nav-height) - var(--vt-banner-height, 0px) -
+        48px
     );
   }
 }

src/examples/ExampleRepl.vue

@@ -3,7 +3,7 @@ page: true
 title: Examples
 aside: false
 footer: false
-returnToTop: false
+outline: false
 ---
 
 <script>