fix: improve RWD of open-graph tab

nuxt · Oct 14, 2023 · dfeaf23 · dfeaf23
1 parent de90087
commit dfeaf23
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/packages/devtools/client/components/OpenGraphMissingTabs.vue b/packages/devtools/client/components/OpenGraphMissingTabs.vue
@@ -81,11 +81,14 @@ const selectedTab = ref(tabs[0])
         <div border="b base" flex-auto />
       </div>
 
-      <NCard v-if="selectedTab === tabs[0]" grid="~ cols-[max-content_1fr]" m4 items-center justify-between of-hidden>
+      <NCard
+        v-if="selectedTab === tabs[0]"
+        grid="~ cols-[1fr] lg:cols-[max-content_1fr]" m4 items-center justify-between of-hidden
+      >
         <template v-for="item, index of missingTags" :key="index">
           <div v-if="index" x-divider />
           <div v-if="index" x-divider />
-          <div flex="~ gap-1 items-center" px4 py2>
+          <div flex="~ gap-1 items-center" class="px2 pt2" lg="px4 py2">
             <div i-carbon-warning text-orange />
             <NLink
               op-50

diff --git a/packages/devtools/client/components/social/SocialPreviewGroup.vue b/packages/devtools/client/components/social/SocialPreviewGroup.vue
@@ -23,7 +23,7 @@ const card = computed(() => getSocialPreviewCard(props.tags, {
 </script>
 
 <template>
-  <div h-full w-520 flex="~ col">
+  <div flex="~ col">
     <div flex="~ wrap" w-full flex-none>
       <template v-for="name, idx of types" :key="idx">
         <button

diff --git a/packages/devtools/client/pages/modules/open-graph.vue b/packages/devtools/client/pages/modules/open-graph.vue
@@ -93,8 +93,8 @@ until(router).toBeTruthy().then((v) => {
 </script>
 
 <template>
-  <div flex="~" h-full w-full of-hidden>
-    <div h-full flex-auto of-auto>
+  <div flex="~ col lg:row" h-full w-full of-hidden>
+    <div flex-auto of-auto>
       <NNavbar>
         <template #search>
           <NTextInput
@@ -170,7 +170,13 @@ until(router).toBeTruthy().then((v) => {
         <OpenGraphMissingTabs :tags="headTags" :matched-route-filepath="routeMatchedFilePath" />
       </div>
     </div>
-    <SocialPreviewGroup v-if="showPreview && headTags?.length" :tags="headTags" border="l base" w-540px flex-none />
+    <SocialPreviewGroup
+      v-if="showPreview && headTags?.length"
+      :tags="headTags"
+      flex-none border-base
+      lt-lg="border-t"
+      lg="h-full w-140 border-l"
+    />
   </div>
 
   <HelpFab>