fix(docs): improve mobile layout of v1 banner (#4254)

* fix(docs): improve mobile layout of v1 banner

* fix(docs): make top banner sticky instead of fixed, this way there's no need for hack-ish explicit heights

* fix(docs): add --vp-layout-top-height media query declaration for when navbar becomes sticky

docs/.vitepress/theme/components/base/LayoutTop.vue

@@ -1,15 +1,22 @@
 <script setup lang="ts">
 import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue';
+import Icon from '@lucide/vue/src/Icon';
+import RocketDuotoneIcon from '../home/RocketDuotoneIcon.ts';
 </script>
 
 <template>
   <div class="top-notification">
     <p>
+      <Icon
+        :iconNode="RocketDuotoneIcon"
+        size="18"
+        class="rocket-icon"
+      />
       <VPLink
         class="notification-link"
         href="/guide/version-1"
         >Lucide v1 is out!</VPLink
-      >🚀<br />
+      >
       You're looking at the site for v1, for v0 go to
       <VPLink
         class="notification-link"
@@ -21,11 +28,7 @@ import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue';
 </template>
 
 <style>
-:root {
-  --vp-layout-top-height: 64px;
-}
-
-@media (min-width: 640px) {
+@media (min-width: 960px) {
   :root {
     --vp-layout-top-height: 32px;
   }
@@ -34,19 +37,19 @@ import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue';
 
 <style scoped>
 .top-notification {
-  position: fixed;
+  position: sticky;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 9999;
   display: flex;
-  height: var(--vp-layout-top-height);
   justify-content: center;
   align-items: center;
   background: var(--vp-c-brand-dark);
   color: var(--vp-c-bg-alt-down);
   font-size: 14px;
-  padding: 0 16px;
+  padding: 4px 16px;
+  text-wrap: balance;
 }
 
 .notification-link {
@@ -58,9 +61,9 @@ import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue';
   display: none !important;
 }
 
-@media (min-width: 640px) {
-  .top-notification br {
-    display: none;
-  }
+.rocket-icon {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 4px;
 }
 </style>

docs/.vitepress/theme/components/home/HomeHeroInfoBefore.vue

@@ -3,25 +3,7 @@ import Badge from '../base/Badge.vue';
 import { moveRight } from '../../../data/iconNodes';
 import Icon from '@lucide/vue/src/Icon';
 import { data } from './HomeHeroInfoBefore.data';
-const rocketDuoTone = [
-  [
-    'path',
-    {
-      d: 'M8 18a2 2 0 0 0-2-2c-2.53-.078-3.247 3.605-3.5 5.5 1.895-.253 5.578-.97 5.5-3.5',
-      fill: 'currentColor',
-      opacity: 0.5,
-    },
-  ],
-  [
-    'path',
-    {
-      d: 'M22 2c0 2.72-.78 7.5-6 11 0 0 1.08 3.38 0 5-.969 1.448-4 2-4 2v-5l-3-3H4s.553-3.033 2-4c1.616-1.077 4.982.043 5 .05A12.88 12.88 0 0 1 22 2m-6 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6',
-      fill: 'currentColor',
-      'fill-rule': 'evenodd',
-      'clip-rule': 'evenodd',
-    },
-  ],
-] as const;
+import RocketDuotoneIcon from './RocketDuotoneIcon.ts';
 </script>
 
 <template>
@@ -33,7 +15,7 @@ const rocketDuoTone = [
       class="badge-special confetti-button animate"
       href="/guide/version-1"
     >
-      <Icon :iconNode="rocketDuoTone" />
+      <Icon :iconNode="RocketDuotoneIcon" />
       Version 1
       <Icon
         :iconNode="moveRight"

docs/.vitepress/theme/components/home/RocketDuotoneIcon.ts

@@ -0,0 +1,21 @@
+const RocketDuotoneIcon = [
+  [
+    'path',
+    {
+      d: 'M8 18a2 2 0 0 0-2-2c-2.53-.078-3.247 3.605-3.5 5.5 1.895-.253 5.578-.97 5.5-3.5',
+      fill: 'currentColor',
+      opacity: 0.5,
+    },
+  ],
+  [
+    'path',
+    {
+      d: 'M22 2c0 2.72-.78 7.5-6 11 0 0 1.08 3.38 0 5-.969 1.448-4 2-4 2v-5l-3-3H4s.553-3.033 2-4c1.616-1.077 4.982.043 5 .05A12.88 12.88 0 0 1 22 2m-6 3a3 3 0 1 0 0 6 3 3 0 0 0 0-6',
+      fill: 'currentColor',
+      'fill-rule': 'evenodd',
+      'clip-rule': 'evenodd',
+    },
+  ],
+] as const;
+
+export default RocketDuotoneIcon;