From e7aaab62ba56947aad5d64b78c2d71cc433e9f97 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 25 Oct 2023 13:17:58 +0300
Subject: [PATCH] Update spacing

---
 doc/galleria/ThumbnailDoc.vue | 30 ++++++++++++------------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/doc/galleria/ThumbnailDoc.vue b/doc/galleria/ThumbnailDoc.vue
index 1faea1442..71f1a2a3c 100644
--- a/doc/galleria/ThumbnailDoc.vue
+++ b/doc/galleria/ThumbnailDoc.vue
@@ -3,12 +3,10 @@
         <p>Thumbnails represent a smaller version of the actual content.</p>
     </DocSectionText>
     <div class="card">
-        <div class="flex flex-wrap gap-3 mb-5 align-self-center">
-            <div class="flex flex-wrap gap-3 mb-5">
-                <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
-                    <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
-                    <label :for="option.label" class="ml-2"> {{ option.label }} </label>
-                </div>
+        <div class="flex flex-wrap gap-3 mb-5">
+            <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
+                <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
+                <label :for="option.label" class="ml-2"> {{ option.label }} </label>
             </div>
         </div>
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="4" :thumbnailsPosition="position" containerStyle="max-width: 640px">
@@ -81,12 +79,10 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex flex-wrap gap-3 mb-5 align-self-center">
-            <div class="flex flex-wrap gap-3 mb-5">
-                <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
-                    <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
-                    <label :for="option.label" class="ml-2"> {{ option.label }} </label>
-                </div>
+        <div class="flex flex-wrap gap-3 mb-5">
+            <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
+                <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
+                <label :for="option.label" class="ml-2"> {{ option.label }} </label>
             </div>
         </div>
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="4" :thumbnailsPosition="position" containerStyle="max-width: 640px">
@@ -153,12 +149,10 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <div class="flex flex-wrap gap-3 mb-5 align-self-center">
-            <div class="flex flex-wrap gap-3 mb-5">
-                <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
-                    <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
-                    <label :for="option.label" class="ml-2"> {{ option.label }} </label>
-                </div>
+        <div class="flex flex-wrap gap-3 mb-5">
+            <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
+                <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
+                <label :for="option.label" class="ml-2"> {{ option.label }} </label>
             </div>
         </div>
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="4" :thumbnailsPosition="position" containerStyle="max-width: 640px">