From cb9d7f18ede7a0cd4bbc45c5729dd4c8588dc4b7 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Thu, 17 Oct 2024 00:24:41 +0800
Subject: [PATCH] fix(theme): blog cover hydration mismatch in mobile (#290)

---
 theme/src/client/components/Blog/VPPostItem.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/theme/src/client/components/Blog/VPPostItem.vue b/theme/src/client/components/Blog/VPPostItem.vue
index cce9ebd7..76d76a1a 100644
--- a/theme/src/client/components/Blog/VPPostItem.vue
+++ b/theme/src/client/components/Blog/VPPostItem.vue
@@ -85,8 +85,8 @@ const coverStyles = computed(() => {
 </script>
 
 <template>
-  <div class="vp-blog-post-item" :class="{ 'has-cover': cover, [coverLayout]: cover }">
-    <div v-if="cover" class="post-cover" :class="{ compact: coverCompact }" :style="coverStyles">
+  <div class="vp-blog-post-item" data-allow-mismatch :class="{ 'has-cover': cover, [coverLayout]: cover }">
+    <div v-if="cover" class="post-cover" data-allow-mismatch :class="{ compact: coverCompact }" :style="coverStyles">
       <img :src="cover.url" :alt="post.title" loading="lazy">
     </div>
     <div class="blog-post-item-content">
@@ -140,6 +140,13 @@ const coverStyles = computed(() => {
   gap: 20px;
 }
 
+@media (max-width: 419px) {
+  .vp-blog-post-item.has-cover:where(.left, .right) {
+    display: block;
+    gap: unset;
+  }
+}
+
 .vp-blog-post-item.has-cover.right {
   flex-direction: row-reverse;
 }
@@ -160,7 +167,6 @@ const coverStyles = computed(() => {
 }
 
 .vp-blog-post-item.has-cover.top .post-cover {
-  /* width: calc(100% + 32px); */
   margin: -16px -16px 16px;
   border-radius: 0;
 }