From 76db00db7ab156e4f5cbd195ec5da0ec09614ec4 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 11 Dec 2024 16:23:02 +0100
Subject: [PATCH] docs(ComponentExample): improve `iframe` display

---
 docs/app/components/content/ComponentExample.vue | 13 ++++++++++---
 docs/app/pages/examples/[...slug].vue            |  8 +++++++-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/docs/app/components/content/ComponentExample.vue b/docs/app/components/content/ComponentExample.vue
index a03664fa..8a4ac978 100644
--- a/docs/app/components/content/ComponentExample.vue
+++ b/docs/app/components/content/ComponentExample.vue
@@ -181,9 +181,16 @@ const urlSearchParams = computed(() => new URLSearchParams({ ...optionsValues.va
           </UFormField>
         </div>
 
-        <div class="flex justify-center p-4" :class="props.class">
-          <iframe v-if="iframe" v-bind="typeof iframe === 'object' ? iframe : {}" :src="`/examples/${name}?${urlSearchParams}`" class="w-full" />
-          <component :is="camelName" v-else v-bind="{ ...componentProps, ...optionsValues }" />
+        <iframe
+          v-if="iframe"
+          v-bind="typeof iframe === 'object' ? iframe : {}"
+          :src="`/examples/${name}?${urlSearchParams}`"
+          width="1024"
+          class="relative left-1/2 -translate-x-1/2"
+          :class="props.class"
+        />
+        <div v-else class="flex justify-center p-4" :class="props.class">
+          <component :is="camelName" v-bind="{ ...componentProps, ...optionsValues }" />
         </div>
       </div>
     </template>
diff --git a/docs/app/pages/examples/[...slug].vue b/docs/app/pages/examples/[...slug].vue
index 4edd123a..c1cbd1c0 100644
--- a/docs/app/pages/examples/[...slug].vue
+++ b/docs/app/pages/examples/[...slug].vue
@@ -5,7 +5,13 @@ const name = route.params.slug?.[0]
 </script>
 
 <template>
-  <div class="flex flex-col justify-center items-center h-screen">
+  <div class="example flex flex-col justify-center items-center h-screen">
     <component :is="name" v-bind="route.query" />
   </div>
 </template>
+
+<style scoped>
+.example {
+  --ui-container: 54rem;
+}
+</style>