fix(open-graph): avoid layout shift

nuxt · May 10, 2023 · 4b1eb2c · 4b1eb2c
1 parent caf00d3
commit 4b1eb2c
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 27 deletions.
diff --git a/packages/devtools/client/components/social/SocialFacebook.vue b/packages/devtools/client/components/social/SocialFacebook.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="max-w-[524px] min-w-[524px] cursor-pointer">
+  <div class="max-w-[524px] min-w-[524px] cursor-pointer bg-base">
     <div
       class="h-[274px] border border-b-0 border-base bg-cover bg-center bg-no-repeat"
       :style="{ backgroundImage: `url(${JSON.stringify(card.image)})` }"

diff --git a/packages/devtools/client/components/social/SocialLinkedin.vue b/packages/devtools/client/components/social/SocialLinkedin.vue
@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="max-w-[520px] min-w-[520px] cursor-pointer overflow-hidden border border-base rounded-[2px] shadow-md">
+  <div class="max-w-[520px] min-w-[520px] cursor-pointer overflow-hidden border border-base rounded-[2px] shadow-md bg-base">
     <div
       class="h-[270px] border-b border-base bg-cover bg-center bg-no-repeat"
       :style="{ backgroundImage: `url(${JSON.stringify(card.image)})` }"

diff --git a/packages/devtools/client/components/social/SocialPreviewGroup.vue b/packages/devtools/client/components/social/SocialPreviewGroup.vue
@@ -26,7 +26,7 @@ const card = computed((): SocialPreviewResolved => {
 </script>
 
 <template>
-  <div h-full w-max flex="~ col">
+  <div h-full w-520 flex="~ col">
     <div flex="~ wrap" w-full flex-none>
       <template v-for="name, idx of types" :key="idx">
         <button
@@ -42,7 +42,7 @@ const card = computed((): SocialPreviewResolved => {
       </template>
       <div border="b base" flex-auto />
     </div>
-    <div flex="~ items-center justify-center" flex-auto p4>
+    <div flex="~ items-center justify-center" flex-auto p4 n-panel-grids>
       <div v-if="selected === 'facebook'">
         <SocialFacebook :card="card" />
       </div>

diff --git a/packages/devtools/client/components/social/SocialTwitter.vue b/packages/devtools/client/components/social/SocialTwitter.vue
@@ -24,30 +24,32 @@ const type = computed(() => {
 </script>
 
 <template>
-  <div
-    class="max-w-[438px] min-w-[438px] cursor-pointer overflow-hidden border border-base rounded-[0.85714em] leading-[1.3em] -outline-offset-1"
-    :class="type === 'summary_large_image' ? '' : 'flex'"
-    hover="bg-[#88888805]"
-  >
+  <div class="max-w-[438px] min-w-[438px] border border-base rounded-[0.85714em] bg-base -outline-offset-1">
     <div
-      v-if="type === 'summary_large_image'"
-      class="h-[220px] border-b border-base bg-cover bg-center bg-no-repeat"
-      :style="{ backgroundImage: `url(${JSON.stringify(card.image)})` }"
-    />
-    <div
-      v-else
-      class="h-[122px] w-[122px] flex-none border-r border-base bg-cover bg-center bg-no-repeat"
-      :style="{ backgroundImage: `url(${JSON.stringify(card.image)})` }"
-    />
-    <div class="break-words border-base p-[0.75em] antialiased" flex="~ col justify-center gap-1">
-      <div class="mt-[0.32333em] overflow-hidden truncate whitespace-nowrap text-[14px] leading-[18px] lowercase op50">
-        {{ card.url }}
-      </div>
-      <div class="m-0 truncate text-[14px] font-semibold leading-[19px]">
-        {{ card.title }}
-      </div>
-      <div class="line-clamp-2 block select-none overflow-hidden break-words text-left text-[14px] leading-[18px] op50">
-        {{ card.description }}
+      class="cursor-pointer overflow-hidden leading-[1.3em]"
+      :class="type === 'summary_large_image' ? '' : 'flex'"
+      hover="bg-[#88888805]"
+    >
+      <div
+        v-if="type === 'summary_large_image'"
+        class="h-[220px] border-b border-base bg-cover bg-center bg-no-repeat"
+        :style="{ backgroundImage: `url(${JSON.stringify(card.image)})` }"
+      />
+      <div
+        v-else
+        class="h-[122px] w-[122px] flex-none border-r border-base bg-cover bg-center bg-no-repeat"
+        :style="{ backgroundImage: `url(${JSON.stringify(card.image)})` }"
+      />
+      <div class="break-words border-base p-[0.75em] antialiased" flex="~ col justify-center gap-1">
+        <div class="mt-[0.32333em] overflow-hidden truncate whitespace-nowrap text-[14px] leading-[18px] lowercase op50">
+          {{ card.url }}
+        </div>
+        <div class="m-0 truncate text-[14px] font-semibold leading-[19px]">
+          {{ card.title }}
+        </div>
+        <div class="line-clamp-2 block select-none overflow-hidden break-words text-left text-[14px] leading-[18px] op50">
+          {{ card.description }}
+        </div>
       </div>
     </div>
   </div>