refactor: improve ui consistency

packages/hoppscotch-app/assets/scss/styles.scss

@@ -459,6 +459,10 @@ pre.ace_editor {
   @apply first-letter:capitalize;
 }
 
+details summary::-webkit-details-marker {
+  @apply hidden;
+}
+
 @media (max-width: 767px) {
   main {
     margin-bottom: env(safe-area-inset-bottom);

packages/hoppscotch-app/components/history/index.vue

@@ -37,7 +37,7 @@
         open
       >
         <summary
-          class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer text-secondaryLight text-tiny group"
+          class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer focus:outline-none text-secondaryLight text-tiny group"
         >
           <span
             class="px-4 py-2 truncate transition group-hover:text-secondary capitalize-first"

packages/hoppscotch-app/components/realtime/Mqtt.vue

@@ -73,7 +73,7 @@
       min-size="20"
       class="hide-scrollbar !overflow-auto"
     >
-      <div class="flex inline-flex flex-col flex-1 p-4">
+      <div class="flex flex-col flex-1 p-4">
         <label for="pub_topic" class="font-semibold text-secondaryLight">
           {{ $t("mqtt.topic") }}
         </label>
@@ -112,9 +112,7 @@
           @click.native="publish"
         />
       </div>
-      <div
-        class="flex inline-flex flex-col flex-1 p-4 mt-4 border-t border-dividerLight"
-      >
+      <div class="flex flex-col flex-1 p-4 mt-4 border-t border-dividerLight">
         <label for="sub_topic" class="font-semibold text-secondaryLight">
           {{ $t("mqtt.topic") }}
         </label>

packages/hoppscotch-app/components/realtime/Socketio.vue

@@ -225,7 +225,7 @@
       min-size="20"
       class="hide-scrollbar !overflow-auto"
     >
-      <div class="flex inline-flex flex-col flex-1 p-4">
+      <div class="flex flex-col flex-1 p-4">
         <label for="events" class="font-semibold text-secondaryLight">
           {{ $t("socketio.events") }}
         </label>

packages/hoppscotch-app/components/realtime/Websocket.vue

@@ -147,7 +147,7 @@
       min-size="20"
       class="hide-scrollbar !overflow-auto"
     >
-      <div class="flex inline-flex flex-col flex-1 p-4">
+      <div class="flex flex-col flex-1 p-4">
         <label
           for="websocket-message"
           class="font-semibold text-secondaryLight"