From 33aaf369cfb0a621fcbd8705f18f334596fe295b Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 7 Jan 2024 03:40:42 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E5=9C=A8=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E8=AE=BE=E5=A4=87=E7=9A=84=20UI=20=E8=A1=A8=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/src/client/components/BackToTop.vue     |  2 +-
 theme/src/client/components/Backdrop.vue      |  2 +-
 theme/src/client/components/Blog.vue          |  4 ++--
 theme/src/client/components/BlogAside.vue     |  2 +-
 theme/src/client/components/BlogExtract.vue   |  2 +-
 theme/src/client/components/Friends.vue       |  6 ++---
 theme/src/client/components/Home.vue          |  4 ++--
 theme/src/client/components/LayoutContent.vue |  4 ++--
 theme/src/client/components/LocalNav.vue      |  6 ++---
 theme/src/client/components/Nav/NavBar.vue    | 22 +++++++++----------
 .../components/Nav/NavBarAppearance.vue       |  2 +-
 .../src/client/components/Nav/NavBarExtra.vue |  4 ++--
 .../client/components/Nav/NavBarHamburger.vue |  2 +-
 .../src/client/components/Nav/NavBarMenu.vue  |  2 +-
 .../client/components/Nav/NavBarSearch.vue    | 12 +++++-----
 .../components/Nav/NavBarSocialLinks.vue      |  2 +-
 .../src/client/components/Nav/NavBarTitle.vue |  2 +-
 .../components/Nav/NavBarTranslations.vue     |  2 +-
 theme/src/client/components/Nav/NavScreen.vue |  2 +-
 theme/src/client/components/Nav/index.vue     |  2 +-
 theme/src/client/components/Page.vue          | 12 +++++-----
 theme/src/client/components/PageFooter.vue    |  8 +++----
 theme/src/client/components/PostItem.vue      |  2 +-
 theme/src/client/components/Sidebar.vue       |  8 +++----
 theme/src/client/components/SkipLink.vue      |  2 +-
 theme/src/client/components/VFooter.vue       |  2 +-
 theme/src/client/layouts/NotFound.vue         |  2 +-
 theme/src/client/styles/md-enhance.scss       | 11 ++++++++--
 28 files changed, 70 insertions(+), 63 deletions(-)

diff --git a/theme/src/client/components/BackToTop.vue b/theme/src/client/components/BackToTop.vue
index f26bfbcf..e59f673e 100644
--- a/theme/src/client/components/BackToTop.vue
+++ b/theme/src/client/components/BackToTop.vue
@@ -137,7 +137,7 @@ function handleClick() {
   r: 16;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .back-to-top-button {
     width: 48px;
     height: 48px;
diff --git a/theme/src/client/components/Backdrop.vue b/theme/src/client/components/Backdrop.vue
index e1929bcb..00b286d8 100644
--- a/theme/src/client/components/Backdrop.vue
+++ b/theme/src/client/components/Backdrop.vue
@@ -35,7 +35,7 @@ defineProps<{
   transition-duration: 0.25s;
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .backdrop {
     display: none;
   }
diff --git a/theme/src/client/components/Blog.vue b/theme/src/client/components/Blog.vue
index 8aedf412..95799f4b 100644
--- a/theme/src/client/components/Blog.vue
+++ b/theme/src/client/components/Blog.vue
@@ -30,14 +30,14 @@ const page = usePageData<PlumeThemePageData>()
   margin: 0 auto;
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .blog-wrapper {
     max-width: 784px;
     padding-top: 0;
   }
 }
 
-@media (width >= 1440px) {
+@media (min-width: 1440px) {
   .blog-wrapper {
     max-width: 1104px;
   }
diff --git a/theme/src/client/components/BlogAside.vue b/theme/src/client/components/BlogAside.vue
index 3b9f786e..a6d47b67 100644
--- a/theme/src/client/components/BlogAside.vue
+++ b/theme/src/client/components/BlogAside.vue
@@ -60,7 +60,7 @@ const { hasBlogExtract, tags, archives } = useBlogExtract()
   font-weight: 600;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .blog-aside-wrapper {
     display: block;
   }
diff --git a/theme/src/client/components/BlogExtract.vue b/theme/src/client/components/BlogExtract.vue
index afa630c7..f049afed 100644
--- a/theme/src/client/components/BlogExtract.vue
+++ b/theme/src/client/components/BlogExtract.vue
@@ -105,7 +105,7 @@ const showBlogExtract = computed(() => {
   color: var(--vp-c-text-2);
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .blog-extract {
     display: none;
   }
diff --git a/theme/src/client/components/Friends.vue b/theme/src/client/components/Friends.vue
index 9d587460..f3a25bb0 100644
--- a/theme/src/client/components/Friends.vue
+++ b/theme/src/client/components/Friends.vue
@@ -71,7 +71,7 @@ const list = computed(() => matter.value.list || [])
   margin-top: 64px;
 }
 
-@media (width >= 640px) {
+@media (min-width: 640px) {
   .friends-wrapper .title,
   .friends-wrapper .description,
   .edit-link {
@@ -84,7 +84,7 @@ const list = computed(() => matter.value.list || [])
   }
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .friends-wrapper {
     max-width: 784px;
     padding-top: 0;
@@ -95,7 +95,7 @@ const list = computed(() => matter.value.list || [])
   }
 }
 
-@media (width >= 1440px) {
+@media (min-width: 1440px) {
   .friends-wrapper {
     max-width: 1104px;
   }
diff --git a/theme/src/client/components/Home.vue b/theme/src/client/components/Home.vue
index 1a04305c..4b2d9a00 100644
--- a/theme/src/client/components/Home.vue
+++ b/theme/src/client/components/Home.vue
@@ -136,7 +136,7 @@ const actions = computed(() => {
   /* background-color: rgba(0, 0, 0, 0.25); */
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .plume-home .container {
     max-width: 768px;
     padding-top: 8rem;
@@ -147,7 +147,7 @@ const actions = computed(() => {
   }
 }
 
-@media (width >= 1440px) {
+@media (min-width: 1440px) {
   .plume-home .container {
     max-width: 1104px;
     padding-top: 8rem;
diff --git a/theme/src/client/components/LayoutContent.vue b/theme/src/client/components/LayoutContent.vue
index 590a09e8..dfec7fd9 100644
--- a/theme/src/client/components/LayoutContent.vue
+++ b/theme/src/client/components/LayoutContent.vue
@@ -35,7 +35,7 @@ const { hasSidebar } = useSidebar()
   margin: 0;
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .layout-content {
     padding-top: var(--vp-nav-height);
   }
@@ -46,7 +46,7 @@ const { hasSidebar } = useSidebar()
   }
 }
 
-@media (width >= 1440px) {
+@media (min-width: 1440px) {
   .layout-content.has-sidebar {
     padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
     padding-left:
diff --git a/theme/src/client/components/LocalNav.vue b/theme/src/client/components/LocalNav.vue
index 6adb41fd..d43bfa3c 100644
--- a/theme/src/client/components/LocalNav.vue
+++ b/theme/src/client/components/LocalNav.vue
@@ -96,7 +96,7 @@ const showLocalNav = computed(() => {
   border-top-color: transparent;
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .local-nav {
     display: none;
   }
@@ -128,7 +128,7 @@ const showLocalNav = computed(() => {
   transition: color 0.25s;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .menu {
     padding: 0 32px;
   }
@@ -156,7 +156,7 @@ const showLocalNav = computed(() => {
   transition: color 0.25s;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .top-link {
     padding: 12px 32px 11px;
   }
diff --git a/theme/src/client/components/Nav/NavBar.vue b/theme/src/client/components/Nav/NavBar.vue
index 4f606d73..86e4e81f 100644
--- a/theme/src/client/components/Nav/NavBar.vue
+++ b/theme/src/client/components/Nav/NavBar.vue
@@ -68,13 +68,13 @@ watchPostEffect(() => {
   border-bottom: 1px solid transparent;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .navbar-wrapper {
     padding: 0 32px;
   }
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .navbar-wrapper.has-sidebar {
     padding: 0;
   }
@@ -98,7 +98,7 @@ watchPostEffect(() => {
   pointer-events: auto;
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .navbar-wrapper.has-sidebar .container {
     max-width: 100%;
   }
@@ -110,7 +110,7 @@ watchPostEffect(() => {
   transition: background-color 0.5s;
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .navbar-wrapper.has-sidebar .title {
     position: absolute;
     top: 0;
@@ -123,7 +123,7 @@ watchPostEffect(() => {
   }
 }
 
-@media (width >= 1440px) {
+@media (min-width: 1440px) {
   .navbar-wrapper.has-sidebar .title {
     width:
       calc(
@@ -142,7 +142,7 @@ watchPostEffect(() => {
   flex-grow: 1;
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .navbar-wrapper.has-sidebar .content {
     position: relative;
     z-index: 1;
@@ -151,7 +151,7 @@ watchPostEffect(() => {
   }
 }
 
-@media (width >= 1440px) {
+@media (min-width: 1440px) {
   .navbar-wrapper.has-sidebar .content {
     padding-right: calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);
     padding-left:
@@ -169,14 +169,14 @@ watchPostEffect(() => {
   transition: background-color 0.5s;
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .navbar-wrapper:not(.top) .content-body {
     position: relative;
     background-color: var(--vp-nav-bg-color);
   }
 }
 
-@media (width <= 767px) {
+@media (max-width: 767px) {
   .content-body {
     column-gap: 0.5rem;
   }
@@ -208,7 +208,7 @@ watchPostEffect(() => {
   margin-right: -8px;
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .navbar-wrapper.has-sidebar .curtain {
     position: absolute;
     right: 0;
@@ -226,7 +226,7 @@ watchPostEffect(() => {
   }
 }
 
-@media (width >= 1440px) {
+@media (min-width: 1440px) {
   .navbar-wrapper.has-sidebar .curtain {
     width:
       calc(
diff --git a/theme/src/client/components/Nav/NavBarAppearance.vue b/theme/src/client/components/Nav/NavBarAppearance.vue
index 05b8a8b4..b04ed1fd 100644
--- a/theme/src/client/components/Nav/NavBarAppearance.vue
+++ b/theme/src/client/components/Nav/NavBarAppearance.vue
@@ -16,7 +16,7 @@ const theme = useThemeLocaleData()
   display: none;
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .navbar-appearance {
     display: flex;
     align-items: center;
diff --git a/theme/src/client/components/Nav/NavBarExtra.vue b/theme/src/client/components/Nav/NavBarExtra.vue
index ddc824f4..8910d168 100644
--- a/theme/src/client/components/Nav/NavBarExtra.vue
+++ b/theme/src/client/components/Nav/NavBarExtra.vue
@@ -55,13 +55,13 @@ const hasExtraContent = computed(
   margin-right: -12px;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .navbar-extra {
     display: block;
   }
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .navbar-extra {
     display: none;
   }
diff --git a/theme/src/client/components/Nav/NavBarHamburger.vue b/theme/src/client/components/Nav/NavBarHamburger.vue
index 708af8a0..8e46ef33 100644
--- a/theme/src/client/components/Nav/NavBarHamburger.vue
+++ b/theme/src/client/components/Nav/NavBarHamburger.vue
@@ -33,7 +33,7 @@ defineEmits<(e: 'click') => void>()
   height: var(--vp-nav-height);
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .navbar-hamburger {
     display: none;
   }
diff --git a/theme/src/client/components/Nav/NavBarMenu.vue b/theme/src/client/components/Nav/NavBarMenu.vue
index 926b177e..49dc1317 100644
--- a/theme/src/client/components/Nav/NavBarMenu.vue
+++ b/theme/src/client/components/Nav/NavBarMenu.vue
@@ -25,7 +25,7 @@ const theme = useThemeLocaleData()
   display: none;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .navbar-menu {
     display: flex;
   }
diff --git a/theme/src/client/components/Nav/NavBarSearch.vue b/theme/src/client/components/Nav/NavBarSearch.vue
index d2b38856..e236bf8e 100644
--- a/theme/src/client/components/Nav/NavBarSearch.vue
+++ b/theme/src/client/components/Nav/NavBarSearch.vue
@@ -177,14 +177,14 @@
 /* plugin-search */
 
 /* stylelint-disable-next-line order/order */
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .navbar-search {
     flex-grow: 1;
     padding-left: 24px;
   }
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .navbar-search {
     padding-left: 32px;
   }
@@ -196,7 +196,7 @@
   }
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .navbar-search .DocSearch-Button {
     justify-content: flex-start;
     width: 100%;
@@ -213,7 +213,7 @@
   }
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .DocSearch-Button .DocSearch-Search-Icon {
     top: 1px;
     width: 14px;
@@ -223,13 +223,13 @@
   }
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .DocSearch-Button .DocSearch-Button-Placeholder {
     display: inline-block;
   }
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .DocSearch-Button .DocSearch-Button-Keys {
     display: flex;
     align-items: center;
diff --git a/theme/src/client/components/Nav/NavBarSocialLinks.vue b/theme/src/client/components/Nav/NavBarSocialLinks.vue
index 02c84746..9f1f494c 100644
--- a/theme/src/client/components/Nav/NavBarSocialLinks.vue
+++ b/theme/src/client/components/Nav/NavBarSocialLinks.vue
@@ -18,7 +18,7 @@ const theme = useThemeLocaleData()
   display: none;
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .navbar-social-links {
     display: flex;
     align-items: center;
diff --git a/theme/src/client/components/Nav/NavBarTitle.vue b/theme/src/client/components/Nav/NavBarTitle.vue
index 1846cf16..85e46f41 100644
--- a/theme/src/client/components/Nav/NavBarTitle.vue
+++ b/theme/src/client/components/Nav/NavBarTitle.vue
@@ -40,7 +40,7 @@ const { hasSidebar } = useSidebar()
   opacity: 0.6;
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .title {
     flex-shrink: 0;
   }
diff --git a/theme/src/client/components/Nav/NavBarTranslations.vue b/theme/src/client/components/Nav/NavBarTranslations.vue
index eebb752b..76df4419 100644
--- a/theme/src/client/components/Nav/NavBarTranslations.vue
+++ b/theme/src/client/components/Nav/NavBarTranslations.vue
@@ -33,7 +33,7 @@ const { currentLang, localeLinks } = useLangs()
   display: none;
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .navbar-translations {
     display: flex;
     align-items: center;
diff --git a/theme/src/client/components/Nav/NavScreen.vue b/theme/src/client/components/Nav/NavScreen.vue
index 0af8d229..7a940f8a 100644
--- a/theme/src/client/components/Nav/NavScreen.vue
+++ b/theme/src/client/components/Nav/NavScreen.vue
@@ -67,7 +67,7 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
   transform: translateY(-8px);
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .nav-screen {
     display: none;
   }
diff --git a/theme/src/client/components/Nav/index.vue b/theme/src/client/components/Nav/index.vue
index ca2a4586..b999269b 100644
--- a/theme/src/client/components/Nav/index.vue
+++ b/theme/src/client/components/Nav/index.vue
@@ -48,7 +48,7 @@ provide('close-screen', closeScreen)
   border-bottom-color: var(--vp-c-gutter);
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .nav-wrapper {
     position: fixed;
   }
diff --git a/theme/src/client/components/Page.vue b/theme/src/client/components/Page.vue
index d65c4c6a..a1035cc7 100644
--- a/theme/src/client/components/Page.vue
+++ b/theme/src/client/components/Page.vue
@@ -59,13 +59,13 @@ onContentUpdated(() => zoom?.refresh())
   padding-top: calc(var(--vp-nav-height) + 32px);
 } */
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .plume-page {
     padding: 48px 32px 128px;
   }
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .plume-page,
   .plume-page.is-blog {
     padding: 32px 32px 0;
@@ -82,7 +82,7 @@ onContentUpdated(() => zoom?.refresh())
   }
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .plume-page .container {
     display: flex;
     justify-content: center;
@@ -93,7 +93,7 @@ onContentUpdated(() => zoom?.refresh())
   }
 }
 
-@media (width >= 1440px) {
+@media (min-width: 1440px) {
   .plume-page:not(.has-sidebar) .content {
     max-width: 784px;
   }
@@ -103,13 +103,13 @@ onContentUpdated(() => zoom?.refresh())
   }
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .content {
     padding: 0 32px 128px;
   }
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .content {
     order: 1;
     min-width: 640px;
diff --git a/theme/src/client/components/PageFooter.vue b/theme/src/client/components/PageFooter.vue
index 55ca9828..af714786 100644
--- a/theme/src/client/components/PageFooter.vue
+++ b/theme/src/client/components/PageFooter.vue
@@ -76,7 +76,7 @@ const showFooter = computed(() => {
   margin-top: 96px;
 }
 
-@media (width >= 640px) {
+@media (min-width: 640px) {
   .edit-info {
     display: flex;
     align-items: center;
@@ -120,7 +120,7 @@ const showFooter = computed(() => {
   color: var(--vp-c-text-2);
 }
 
-@media (width >= 640px) {
+@media (min-width: 640px) {
   .last-updated-text {
     font-size: 14px;
     font-weight: 500;
@@ -136,7 +136,7 @@ const showFooter = computed(() => {
   text-align: left;
 }
 
-@media (width >= 640px) {
+@media (min-width: 640px) {
   .contributors {
     text-align: right;
   }
@@ -164,7 +164,7 @@ const showFooter = computed(() => {
   border-top: 1px solid var(--vp-c-divider);
 }
 
-@media (width >= 640px) {
+@media (min-width: 640px) {
   .prev-next {
     grid-template-columns: repeat(2, 1fr);
     grid-column-gap: 16px;
diff --git a/theme/src/client/components/PostItem.vue b/theme/src/client/components/PostItem.vue
index a85070e3..157e5cf9 100644
--- a/theme/src/client/components/PostItem.vue
+++ b/theme/src/client/components/PostItem.vue
@@ -66,7 +66,7 @@ const createTime = computed(() => {
   padding-top: 1rem;
   margin: 0 1.75rem 2rem;
 
-  @media (width >= 960px) {
+  @media (min-width: 960px) {
     h3 {
       font-size: 20px;
     }
diff --git a/theme/src/client/components/Sidebar.vue b/theme/src/client/components/Sidebar.vue
index 0e1e25b7..41640618 100644
--- a/theme/src/client/components/Sidebar.vue
+++ b/theme/src/client/components/Sidebar.vue
@@ -88,7 +88,7 @@ watch(
   box-shadow: var(--vp-shadow-1);
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .sidebar-wrapper {
     z-index: 1;
     width: var(--vp-sidebar-width);
@@ -102,7 +102,7 @@ watch(
   }
 }
 
-@media (width >= 1440px) {
+@media (min-width: 1440px) {
   .sidebar-wrapper {
     width:
       calc(
@@ -117,7 +117,7 @@ watch(
   }
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .curtain {
     position: sticky;
     top: -64px;
@@ -140,7 +140,7 @@ watch(
   border-top: 1px solid var(--vp-c-divider);
 }
 
-@media (width >= 960px) {
+@media (min-width: 960px) {
   .group {
     width: calc(var(--vp-sidebar-width) - 64px);
     padding-top: 10px;
diff --git a/theme/src/client/components/SkipLink.vue b/theme/src/client/components/SkipLink.vue
index b9c73e00..f8b82cb3 100644
--- a/theme/src/client/components/SkipLink.vue
+++ b/theme/src/client/components/SkipLink.vue
@@ -62,7 +62,7 @@ function focusOnTargetAnchor({ target }: Event) {
   clip-path: none;
 }
 
-@media (width >= 1280px) {
+@media (min-width: 1280px) {
   .skip-link {
     top: 14px;
     left: 16px;
diff --git a/theme/src/client/components/VFooter.vue b/theme/src/client/components/VFooter.vue
index a293aa14..60e98be7 100644
--- a/theme/src/client/components/VFooter.vue
+++ b/theme/src/client/components/VFooter.vue
@@ -54,7 +54,7 @@ const { hasSidebar } = useSidebar()
   text-underline-offset: 4px;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .plume-footer {
     padding: 32px;
   }
diff --git a/theme/src/client/layouts/NotFound.vue b/theme/src/client/layouts/NotFound.vue
index 96155109..932888a4 100644
--- a/theme/src/client/layouts/NotFound.vue
+++ b/theme/src/client/layouts/NotFound.vue
@@ -46,7 +46,7 @@ const themeData = useThemeLocaleData()
   text-align: center;
 }
 
-@media (width >= 768px) {
+@media (min-width: 768px) {
   .not-found {
     padding: 96px 32px 168px;
   }
diff --git a/theme/src/client/styles/md-enhance.scss b/theme/src/client/styles/md-enhance.scss
index b5816cb4..b3d1fdc3 100644
--- a/theme/src/client/styles/md-enhance.scss
+++ b/theme/src/client/styles/md-enhance.scss
@@ -127,7 +127,7 @@
     overflow: hidden;
     border: solid 1px var(--vp-c-divider);
 
-    @media (width <= 419px) {
+    @media (max-width: 419px) {
       .vp-code-demo-codes div[class*="language-"] {
         margin: 0;
         border-radius: 0;
@@ -239,6 +239,13 @@
     border: 1px solid var(--vp-c-divider);
   }
 
+  /* stylelint-disable-next-line order/order */
+  @media (min-width: 419px) {
+    .vp-tabs {
+      margin: 1.5rem 0;
+    }
+  }
+
   .hint-container .vp-tabs {
     margin: 1rem -0.45rem 1rem -0.75rem;
 
@@ -263,7 +270,7 @@
     font-size: 14px;
     border-left: 4px solid var(--vp-c-default-soft);
 
-    @media (width >= 419px) {
+    @media (max-width: 419px) {
       & {
         margin-left: 0;
       }