chore: improve placeholder component styles (#3638)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

packages/hoppscotch-common/src/components/graphql/Authorization.vue

@@ -120,14 +120,16 @@
       :alt="`${t('empty.authorization')}`"
       :text="t('empty.authorization')"
     >
-      <HoppButtonSecondary
-        outline
-        :label="t('app.documentation')"
-        to="https://docs.hoppscotch.io/documentation/features/authorization"
-        blank
-        :icon="IconExternalLink"
-        reverse
-      />
+      <template #body>
+        <HoppButtonSecondary
+          outline
+          :label="t('app.documentation')"
+          to="https://docs.hoppscotch.io/documentation/features/authorization"
+          blank
+          :icon="IconExternalLink"
+          reverse
+        />
+      </template>
     </HoppSmartPlaceholder>
     <div v-else class="flex flex-1 border-b border-dividerLight">
       <div class="w-2/3 border-r border-dividerLight">

packages/hoppscotch-common/src/components/graphql/Headers.vue

@@ -162,12 +162,14 @@
       :alt="`${t('empty.headers')}`"
       :text="t('empty.headers')"
     >
-      <HoppButtonSecondary
-        :label="`${t('add.new')}`"
-        filled
-        :icon="IconPlus"
-        @click="addHeader"
-      />
+      <template #body>
+        <HoppButtonSecondary
+          :label="`${t('add.new')}`"
+          filled
+          :icon="IconPlus"
+          @click="addHeader"
+        />
+      </template>
     </HoppSmartPlaceholder>
   </div>
 </template>

packages/hoppscotch-common/src/components/graphql/Sidebar.vue

@@ -20,8 +20,7 @@
         :src="`/images/states/${colorMode.value}/add_comment.svg`"
         :alt="`${t('empty.documentation')}`"
         :text="t('empty.documentation')"
-      >
-      </HoppSmartPlaceholder>
+      />
       <div v-else>
         <div
           class="sticky top-0 z-10 flex flex-shrink-0 overflow-x-auto bg-primary"
@@ -30,7 +29,7 @@
             v-model="graphqlFieldsFilterText"
             type="search"
             autocomplete="off"
-            class="flex w-full bg-transparent px-4 py-2"
+            class="flex w-full bg-transparent px-4 py-2 h-8"
             :placeholder="`${t('action.search')}`"
           />
           <div class="flex">