chore: hoppscotch-ui improvements (#3497)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

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

@@ -13,12 +13,12 @@
           theme="popover"
           :on-shown="() => tippyActions.focus()"
         >
-          <span class="select-wrapper">
+          <HoppSmartSelectWrapper>
             <HoppButtonSecondary
               class="ml-2 rounded-none pr-8"
               :label="authName"
             />
-          </span>
+          </HoppSmartSelectWrapper>
           <template #content="{ hide }">
             <div
               ref="tippyActions"
@@ -171,7 +171,7 @@
         </div>
       </div>
       <div
-        class="z-9 sticky top-upperTertiaryStickyFold h-full min-w-46 max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
+        class="z-[9] sticky top-upperTertiaryStickyFold h-full min-w-[12rem] max-w-1/3 flex-shrink-0 overflow-auto overflow-x-auto bg-primary p-4"
       >
         <div class="pb-2 text-secondaryLight">
           {{ t("helpers.authorization") }}

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

@@ -30,7 +30,7 @@
             v-model="graphqlFieldsFilterText"
             type="search"
             autocomplete="off"
-            class="flex h-8 w-full bg-transparent p-4 py-2"
+            class="flex w-full bg-transparent px-4 py-2"
             :placeholder="`${t('action.search')}`"
           />
           <div class="flex">

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

@@ -14,7 +14,7 @@
       theme="popover"
       :on-shown="() => tippyActions!.focus()"
     >
-      <span class="truncate px-2 leading-8">
+      <span class="truncate">
         {{ tab.document.request.name }}
       </span>
       <template #content="{ hide }">