Merge pull request #598 from sugarforever/fix/preview-panel-overflow

fix: preview panel may overflow
sugarforever · Dec 19, 2024 · b07127c · b07127c
2 parents efb69ca + c9c77c9
commit b07127c
Showing 1 changed file with 13 additions and 11 deletions.
diff --git a/components/ComponentPreview.vue b/components/ComponentPreview.vue
@@ -57,7 +57,7 @@ watch(
 
 <template>
   <div v-show="show"
-       class="w-[400px] border-l dark:border-gray-800 flex flex-col h-[calc(100vh-64px)] shrink-0">
+       class="w-[400px] border-l dark:border-gray-800 flex flex-col shrink-0 pb-4">
     <div class="p-4 border-b dark:border-gray-800 flex items-center">
       <span class="mr-auto font-bold">Vue Component Preview</span>
       <UButton icon="i-material-symbols-close-rounded"
@@ -66,16 +66,18 @@ watch(
                size="sm"
                @click="emits('close')" />
     </div>
-    <div class="flex-1 overflow-y-auto p-4">
-      <Suspense>
-        <template #default>
-          <PreviewSandbox v-if="extractedComponent" :code="extractedComponent" />
-          <div v-else class="text-gray-500">No valid component code found</div>
-        </template>
-        <template #fallback>
-          <div class="text-gray-500">Loading preview...</div>
-        </template>
-      </Suspense>
+    <div class="flex-1 overflow-y-auto">
+      <div class="p-4 pb-8">
+        <Suspense>
+          <template #default>
+            <PreviewSandbox v-if="extractedComponent" :code="extractedComponent" />
+            <div v-else class="text-gray-500">No valid component code found</div>
+          </template>
+          <template #fallback>
+            <div class="text-gray-500">Loading preview...</div>
+          </template>
+        </Suspense>
+      </div>
     </div>
   </div>
 </template>