chore: minor ui improvements to modal

packages/hoppscotch-common/src/components/importExport/ImportExportSourcesList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col space-y-2">
     <HoppSmartItem
       v-for="source in sources"
       :key="source.id"

packages/hoppscotch-ui/src/components/smart/Modal.vue

@@ -32,18 +32,22 @@
         <Transition name="bounce" appear>
           <div
             class="inline-block w-full transform overflow-hidden border-dividerDark bg-primary text-left align-bottom shadow-lg transition-all sm:rounded-xl sm:border sm:align-middle"
-            :class="[{ 'mt-24 md:mb-8': placement === 'top' }, styles]"
+            :class="[{ 'mt-16 md:mb-8': placement === 'top' }, styles]"
           >
             <div
               v-if="title"
               class="flex items-center justify-between border-b border-dividerLight"
               :class="{ 'p-4': !fullWidth }"
             >
-              <h3 class="heading" :class="{ 'ml-4': !fullWidth }">
-                {{ title }}
-              </h3>
-              <span class="flex items-center">
+              <div class="flex items-center flex-1 justify-start">
                 <slot name="actions"></slot>
+              </div>
+              <div class="flex items-center justify-center">
+                <h3 class="heading">
+                  {{ title }}
+                </h3>
+              </div>
+              <div class="flex items-center flex-1 justify-end">
                 <HoppButtonSecondary
                   v-if="dimissible"
                   v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
@@ -51,10 +55,10 @@
                   :icon="IconX"
                   @click="close"
                 />
-              </span>
+              </div>
             </div>
             <div
-              class="flex flex-col overflow-y-auto max-h-[50vh]"
+              class="flex flex-col overflow-y-auto max-h-[55vh]"
               :class="{ 'p-4': !fullWidth }"
             >
               <slot name="body"></slot>