docs(ComponentCode/ComponentExample): add missing margin

docs/app/components/content/ComponentCode.vue

@@ -114,57 +114,59 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${JSON.stringif
 </script>
 
 <template>
-  <div>
-    <div v-if="options.length" class="flex items-center gap-2.5 border border-gray-300 dark:border-gray-700 border-b-0 relative rounded-t-md px-4 py-2.5">
-      <template v-for="option in options" :key="option.name">
-        <UFormField
-          :label="option.label"
-          size="sm"
-          class="inline-flex ring ring-gray-300 dark:ring-gray-700 rounded"
-          :ui="{
-            wrapper: 'bg-gray-50 dark:bg-gray-800/50 rounded-l flex border-r border-gray-300 dark:border-gray-700',
-            label: 'text-gray-500 dark:text-gray-400 px-2 py-1.5',
-            container: 'mt-0'
-          }"
-        >
-          <USelectMenu
-            v-if="option.items?.length"
-            v-model="componentProps[option.name]"
-            :items="option.items"
-            value-key="value"
-            color="gray"
-            variant="soft"
-            class="rounded rounded-l-none"
-            :search="false"
-            :class="[option.name === 'color' && 'pl-6']"
-            :ui="{ itemLeadingChip: 'size-2' }"
+  <div class="my-5">
+    <div>
+      <div v-if="options.length" class="flex items-center gap-2.5 border border-gray-300 dark:border-gray-700 border-b-0 relative rounded-t-md px-4 py-2.5">
+        <template v-for="option in options" :key="option.name">
+          <UFormField
+            :label="option.label"
+            size="sm"
+            class="inline-flex ring ring-gray-300 dark:ring-gray-700 rounded"
+            :ui="{
+              wrapper: 'bg-gray-50 dark:bg-gray-800/50 rounded-l flex border-r border-gray-300 dark:border-gray-700',
+              label: 'text-gray-500 dark:text-gray-400 px-2 py-1.5',
+              container: 'mt-0'
+            }"
           >
-            <template v-if="option.name === 'color'" #leading="{ modelValue, ui }">
-              <UChip
-                v-if="modelValue"
-                inset
-                standalone
-                :color="(modelValue as any)"
-                :size="ui.itemLeadingChipSize()"
-                class="size-2"
-              />
-            </template>
-          </USelectMenu>
-          <UInput v-else v-model="componentProps[option.name]" color="gray" variant="soft" :ui="{ base: 'rounded rounded-l-none' }" />
-        </UFormField>
-      </template>
-    </div>
-
-    <div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4" :class="[!options.length && 'rounded-t-md']">
-      <component :is="name" v-bind="componentProps">
-        <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
-          <ContentSlot :name="slot" unwrap="p">
-            {{ slots[slot] }}
-          </ContentSlot>
+            <USelectMenu
+              v-if="option.items?.length"
+              v-model="componentProps[option.name]"
+              :items="option.items"
+              value-key="value"
+              color="gray"
+              variant="soft"
+              class="rounded rounded-l-none"
+              :search="false"
+              :class="[option.name === 'color' && 'pl-6']"
+              :ui="{ itemLeadingChip: 'size-2' }"
+            >
+              <template v-if="option.name === 'color'" #leading="{ modelValue, ui }">
+                <UChip
+                  v-if="modelValue"
+                  inset
+                  standalone
+                  :color="(modelValue as any)"
+                  :size="ui.itemLeadingChipSize()"
+                  class="size-2"
+                />
+              </template>
+            </USelectMenu>
+            <UInput v-else v-model="componentProps[option.name]" color="gray" variant="soft" :ui="{ base: 'rounded rounded-l-none' }" />
+          </UFormField>
         </template>
-      </component>
-    </div>
-  </div>
+      </div>
 
-  <MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" class="[&>div>pre]:!rounded-t-none [&>div]:!mt-0" />
+      <div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4" :class="[!options.length && 'rounded-t-md']">
+        <component :is="name" v-bind="componentProps">
+          <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
+            <ContentSlot :name="slot" unwrap="p">
+              {{ slots[slot] }}
+            </ContentSlot>
+          </template>
+        </component>
+      </div>
+    </div>
+
+    <MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" class="[&>div>pre]:!rounded-t-none [&>div]:!mt-0" />
+  </div>
 </template>

docs/app/components/content/ComponentExample.vue

@@ -16,11 +16,13 @@ const { data: ast } = await useAsyncData(`component-example-${camelName}`, () =>
 </script>
 
 <template>
-  <div>
-    <div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4 rounded-t-md">
-      <component :is="camelName" v-bind="componentProps" />
+  <div class="my-5">
+    <div>
+      <div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4 rounded-t-md">
+        <component :is="camelName" v-bind="componentProps" />
+      </div>
     </div>
-  </div>
 
-  <MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" class="[&>div>pre]:!rounded-t-none [&>div]:!mt-0" />
+    <MDCRenderer v-if="ast" :body="ast.body" :data="ast.data" class="[&>div>pre]:!rounded-t-none [&>div]:!mt-0" />
+  </div>
 </template>