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/realtime/Communication.vue

@@ -33,12 +33,12 @@
           theme="popover"
           :on-shown="() => tippyActions.focus()"
         >
-          <span class="select-wrapper">
+          <HoppSmartSelectWrapper>
             <HoppButtonSecondary
               :label="contentType || t('state.none').toLowerCase()"
               class="ml-2 rounded-none pr-8"
             />
-          </span>
+          </HoppSmartSelectWrapper>
           <template #content="{ hide }">
             <div
               ref="tippyActions"
@@ -279,6 +279,7 @@ defineActionHandler("request.send-cancel", sendMessage)
 :deep(.cm-panels) {
   @apply top-upperSecondaryStickyFold #{!important};
 }
+
 .eventFeildShown :deep(.cm-panels),
 .cmResponsePrimaryStickyFold :deep(.cm-panels) {
   @apply top-upperTertiaryStickyFold #{!important};

packages/hoppscotch-common/src/components/realtime/ConnectionConfig.vue

@@ -62,12 +62,12 @@
               {{ t("mqtt.lw_qos") }}
             </label>
             <tippy interactive trigger="click" theme="popover">
-              <span class="select-wrapper">
+              <HoppSmartSelectWrapper>
                 <HoppButtonSecondary
                   class="ml-2 rounded-none pr-8"
                   :label="`${config.lwQos}`"
                 />
-              </span>
+              </HoppSmartSelectWrapper>
               <template #content="{ hide }">
                 <div class="flex flex-col" role="menu">
                   <HoppSmartItem

packages/hoppscotch-common/src/components/realtime/Log.vue

@@ -35,8 +35,8 @@
             autoScrollEnabled ? t('action.turn_off') : t('action.turn_on')
           }`"
           :icon="IconChevronsDown"
-          :class="toggleAutoscrollColor"
-          @click="toggleAutoscroll()"
+          :color="autoScrollEnabled ? 'green' : 'red'"
+          @click="autoScrollEnabled = !autoScrollEnabled"
         />
       </div>
     </div>
@@ -60,7 +60,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, PropType, computed, watch, Ref } from "vue"
+import { ref, PropType, watch, Ref } from "vue"
 import IconTrash from "~icons/lucide/trash"
 import IconArrowUp from "~icons/lucide/arrow-up"
 import IconArrowDown from "~icons/lucide/arrow-down"
@@ -123,12 +123,4 @@ watch(
   }, 200),
   { flush: "post" }
 )
-
-const toggleAutoscroll = () => {
-  autoScrollEnabled.value = !autoScrollEnabled.value
-}
-
-const toggleAutoscrollColor = computed(() =>
-  autoScrollEnabled.value ? "text-green-500" : "text-red-500"
-)
 </script>

packages/hoppscotch-common/src/components/realtime/LogEntry.vue

@@ -12,7 +12,7 @@
           </div>
           <div
             v-if="entry.ts !== undefined"
-            class="w-34 hidden items-center px-1 sm:inline-flex"
+            class="w-36 hidden items-center px-1 sm:inline-flex"
           >
             <span
               v-tippy="{ theme: 'tooltip' }"

packages/hoppscotch-common/src/components/realtime/Subscription.vue

@@ -9,9 +9,9 @@
             {{ t("mqtt.qos") }}
           </label>
           <tippy interactive trigger="click" theme="popover">
-            <span class="select-wrapper">
+            <HoppSmartSelectWrapper>
               <HoppButtonSecondary class="pr-8" :label="`${QoS}`" />
-            </span>
+            </HoppSmartSelectWrapper>
             <template #content="{ hide }">
               <div class="flex flex-col" role="menu">
                 <HoppSmartItem