refactor: improve ui consistency

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

@@ -1,7 +1,7 @@
 <template>
   <div :class="{ 'rounded border border-divider': saveRequest }">
     <div
-      class="sticky z-10 flex flex-col border-b rounded-t divide-dividerLight divide-y bg-primary border-dividerLight"
+      class="sticky z-10 flex flex-col border-b rounded-t divide-y divide-dividerLight bg-primary border-dividerLight"
       :style="saveRequest ? 'top: calc(-1 * var(--font-size-body))' : 'top: 0'"
     >
       <div v-if="!saveRequest" class="flex flex-col">
@@ -63,7 +63,7 @@
         </span>
       </div>
     </div>
-    <div class="flex flex-col">
+    <div class="flex flex-col flex-1">
       <component
         :is="
           collectionsType.type == 'my-collections'

packages/hoppscotch-app/components/graphql/Request.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="sticky top-0 z-10 flex p-4 bg-primary">
+  <div
+    class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
+  >
     <div class="inline-flex flex-1 space-x-2">
       <input
         id="url"

packages/hoppscotch-app/components/graphql/RequestOptions.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col flex-1 h-full">
     <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
       <SmartTab
         :id="'query'"
@@ -8,7 +8,7 @@
         :indicator="gqlQueryString && gqlQueryString.length > 0 ? true : false"
       >
         <div
-          class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery"
+          class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery"
         >
           <label class="font-semibold text-secondaryLight">
             {{ t("request.query") }}
@@ -62,7 +62,7 @@
             />
           </div>
         </div>
-        <div ref="queryEditor"></div>
+        <div ref="queryEditor" class="flex flex-col flex-1"></div>
       </SmartTab>
 
       <SmartTab
@@ -71,7 +71,7 @@
         :indicator="variableString && variableString.length > 0 ? true : false"
       >
         <div
-          class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+          class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
         >
           <label class="font-semibold text-secondaryLight">
             {{ t("request.variables") }}
@@ -105,7 +105,7 @@
             />
           </div>
         </div>
-        <div ref="variableEditor"></div>
+        <div ref="variableEditor" class="flex flex-col flex-1"></div>
       </SmartTab>
 
       <SmartTab
@@ -114,7 +114,7 @@
         :info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
       >
         <div
-          class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+          class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
         >
           <label class="font-semibold text-secondaryLight">
             {{ t("tab.headers") }}
@@ -149,7 +149,11 @@
             />
           </div>
         </div>
-        <div v-if="bulkMode" ref="bulkEditor"></div>
+        <div
+          v-if="bulkMode"
+          ref="bulkEditor"
+          class="flex flex-col flex-1"
+        ></div>
         <div v-else>
           <div
             v-for="(header, index) in workingHeaders"

packages/hoppscotch-app/components/graphql/Response.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col flex-1 h-full">
     <div
       v-if="responseString === 'loading'"
       class="flex flex-col items-center justify-center p-4"
@@ -7,9 +7,9 @@
       <SmartSpinner class="my-4" />
       <span class="text-secondaryLight">{{ t("state.loading") }}</span>
     </div>
-    <div v-else-if="responseString">
+    <div v-else-if="responseString" class="flex flex-col flex-1">
       <div
-        class="sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight"
+        class="sticky top-0 z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
       >
         <label class="font-semibold text-secondaryLight">
           {{ t("response.title") }}
@@ -38,7 +38,7 @@
           />
         </div>
       </div>
-      <div ref="schemaEditor"></div>
+      <div ref="schemaEditor" class="flex flex-col flex-1"></div>
     </div>
     <div
       v-else

packages/hoppscotch-app/components/graphql/Sidebar.vue

@@ -137,7 +137,7 @@
     <SmartTab :id="'schema'" icon="box" :label="`${t('tab.schema')}`">
       <div
         v-if="schemaString"
-        class="sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight"
+        class="sticky top-0 z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
       >
         <label class="font-semibold text-secondaryLight">
           {{ t("graphql.schema") }}
@@ -173,7 +173,11 @@
           />
         </div>
       </div>
-      <div v-if="schemaString" ref="schemaEditor"></div>
+      <div
+        v-if="schemaString"
+        ref="schemaEditor"
+        class="flex flex-col flex-1"
+      ></div>
       <div
         v-else
         class="flex flex-col items-center justify-center p-4 text-secondaryLight"

packages/hoppscotch-app/components/http/Authorization.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
     >
       <span class="flex items-center">
         <label class="font-semibold text-secondaryLight">

packages/hoppscotch-app/components/http/Body.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
     >
       <span class="flex items-center">
         <label class="font-semibold text-secondaryLight">

packages/hoppscotch-app/components/http/BodyParameters.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ $t("request.body") }}
@@ -135,7 +135,7 @@
       </span>
     </div>
     <div
-      v-if="bodyParams.length === 0"
+      v-if="workingParams.length === 0"
       class="flex flex-col items-center justify-center p-4 text-secondaryLight"
     >
       <img

packages/hoppscotch-app/components/http/Headers.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("request.header_list") }}
@@ -36,7 +36,7 @@
         />
       </div>
     </div>
-    <div v-if="bulkMode" ref="bulkEditor"></div>
+    <div v-if="bulkMode" ref="bulkEditor" class="flex flex-col flex-1"></div>
     <div v-else>
       <div
         v-for="(header, index) in workingHeaders"

packages/hoppscotch-app/components/http/Parameters.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("request.parameter_list") }}
@@ -36,7 +36,7 @@
         />
       </div>
     </div>
-    <div v-if="bulkMode" ref="bulkEditor"></div>
+    <div v-if="bulkMode" ref="bulkEditor" class="flex flex-col flex-1"></div>
     <div v-else>
       <div
         v-for="(param, index) in workingParams"

packages/hoppscotch-app/components/http/PreRequestScript.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("preRequest.javascript_code") }}

packages/hoppscotch-app/components/http/RawBody.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("request.raw_body") }}
@@ -52,21 +52,15 @@
         />
       </div>
     </div>
-    <div ref="rawBodyParameters"></div>
+    <div ref="rawBodyParameters" class="flex flex-col flex-1"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {
+import { computed, reactive, Ref, ref } from "@nuxtjs/composition-api"
-  computed,
-  reactive,
-  Ref,
-  ref,
-  watchEffect,
-} from "@nuxtjs/composition-api"
 import * as TO from "fp-ts/TaskOption"
 import { pipe } from "fp-ts/function"
-import { HoppRESTReqBody, ValidContentTypes } from "~/../hoppscotch-data/dist"
+import { HoppRESTReqBody, ValidContentTypes } from "@hoppscotch/data"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { getEditorLangForMimeType } from "~/helpers/editorutils"
 import { pluckRef, useI18n, useToast } from "~/helpers/utils/composables"
@@ -106,8 +100,6 @@ const langLinter = computed(() =>
   isJSONContentType(props.contentType) ? jsonLinter : null
 )
 
-watchEffect(() => console.log(rawInputEditorLang.value))
-
 const linewrapEnabled = ref(true)
 const rawBodyParameters = ref<any | null>(null)
 

packages/hoppscotch-app/components/http/Request.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="sticky top-0 z-10 flex p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
+    class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
   >
     <div class="flex flex-1">
       <div class="relative flex">

packages/hoppscotch-app/components/http/Tests.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("test.javascript_code") }}

packages/hoppscotch-app/components/http/URLEncodedParams.vue

@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperTertiaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("request.body") }}
@@ -36,7 +36,7 @@
         />
       </div>
     </div>
-    <div v-if="bulkMode" ref="bulkEditor"></div>
+    <div v-if="bulkMode" ref="bulkEditor" class="flex flex-col flex-1"></div>
     <div v-else>
       <div
         v-for="(param, index) in workingUrlEncodedParams"

packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue

@@ -6,7 +6,7 @@
       :key="`lens-${index}`"
       :label="$t(lens.lensName)"
       :selected="index === 0"
-      class="flex flex-col flex-1"
+      class="flex flex-col flex-1 w-full h-full"
     >
       <component :is="lens.renderer" :response="response" />
     </SmartTab>

packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue

@@ -42,7 +42,11 @@
         />
       </div>
     </div>
-    <div v-show="!previewEnabled" ref="htmlResponse"></div>
+    <div
+      v-show="!previewEnabled"
+      ref="htmlResponse"
+      class="flex flex-col flex-1"
+    ></div>
     <iframe
       v-show="previewEnabled"
       ref="previewFrame"

packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col flex-1">
     <div
       class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
@@ -18,7 +18,7 @@
       </div>
     </div>
     <img
-      class="flex flex-1 max-w-full border-b border-dividerLight"
+      class="flex flex-col flex-1 max-w-full border-b border-dividerLight"
       :src="imageSource"
       loading="lazy"
       :alt="imageSource"

packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col flex-1">
     <div
       class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
@@ -33,10 +33,10 @@
         />
       </div>
     </div>
-    <div ref="jsonResponse"></div>
+    <div ref="jsonResponse" class="flex flex-col flex-1"></div>
     <div
       v-if="outlinePath"
-      class="sticky bottom-0 z-10 flex flex-1 px-2 overflow-auto border-t bg-primaryLight border-dividerLight flex-nowrap hide-scrollbar"
+      class="sticky bottom-0 z-10 flex px-2 overflow-auto border-t bg-primaryLight border-dividerLight flex-nowrap hide-scrollbar"
     >
       <div
         v-for="(item, index) in outlinePath"

packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col flex-1">
     <div
       class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
@@ -33,7 +33,7 @@
         />
       </div>
     </div>
-    <div ref="rawResponse"></div>
+    <div ref="rawResponse" class="flex flex-col flex-1"></div>
   </div>
 </template>
 

packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col flex-1">
     <div
       class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
@@ -33,7 +33,7 @@
         />
       </div>
     </div>
-    <div ref="xmlResponse"></div>
+    <div ref="xmlResponse" class="flex flex-col flex-1"></div>
   </div>
 </template>
 

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

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col flex-1">
     <div
-      class="sticky top-0 z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight"
+      class="sticky top-0 z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
     >
       <label for="log" class="py-2 font-semibold text-secondaryLight">
         {{ title }}
@@ -13,6 +13,7 @@
           v-for="(entry, index) in log"
           :key="`entry-${index}`"
           :style="{ color: entry.color }"
+          class="font-mono"
           >{{ entry.ts }}{{ source(entry.source) }}{{ entry.payload }}</span
         >
       </span>

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

@@ -7,13 +7,19 @@
     }"
     :horizontal="!mdAndLarger"
   >
-    <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
+    <Pane
+      size="75"
+      min-size="65"
+      class="hide-scrollbar !overflow-auto flex flex-col"
+    >
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
         <Pane
           :size="COLUMN_LAYOUT ? 45 : 50"
-          class="hide-scrollbar !overflow-auto"
+          class="hide-scrollbar !overflow-auto flex flex-col"
         >
-          <div class="sticky top-0 z-10 flex flex-col p-4 space-y-4 bg-primary">
+          <div
+            class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
+          >
             <div class="inline-flex flex-1 space-x-2">
               <input
                 id="mqtt-url"
@@ -61,7 +67,7 @@
         </Pane>
         <Pane
           :size="COLUMN_LAYOUT ? 65 : 50"
-          class="hide-scrollbar !overflow-auto"
+          class="hide-scrollbar !overflow-auto flex flex-col"
         >
           <RealtimeLog :title="$t('mqtt.log')" :log="log" />
         </Pane>
@@ -71,9 +77,9 @@
       v-if="SIDEBAR"
       size="25"
       min-size="20"
-      class="hide-scrollbar !overflow-auto"
+      class="hide-scrollbar !overflow-auto flex flex-col"
     >
-      <div class="flex flex-col flex-1 p-4">
+      <div class="flex items-center justify-between p-4">
         <label for="pub_topic" class="font-semibold text-secondaryLight">
           {{ $t("mqtt.topic") }}
         </label>
@@ -89,7 +95,7 @@
           spellcheck="false"
         />
       </div>
-      <div class="flex items-center justify-between flex-1 p-4">
+      <div class="flex items-center justify-between p-4">
         <label for="mqtt-message" class="font-semibold text-secondaryLight">
           {{ $t("mqtt.communication") }}
         </label>
@@ -112,7 +118,9 @@
           @click.native="publish"
         />
       </div>
-      <div class="flex flex-col flex-1 p-4 mt-4 border-t border-dividerLight">
+      <div
+        class="flex items-center justify-between 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

@@ -7,13 +7,19 @@
     }"
     :horizontal="!mdAndLarger"
   >
-    <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
+    <Pane
+      size="75"
+      min-size="65"
+      class="hide-scrollbar !overflow-auto flex flex-col"
+    >
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
         <Pane
           :size="COLUMN_LAYOUT ? 45 : 50"
-          class="hide-scrollbar !overflow-auto"
+          class="hide-scrollbar !overflow-auto flex flex-col"
         >
-          <div class="sticky top-0 z-10 flex p-4 bg-primary">
+          <div
+            class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
+          >
             <div class="inline-flex flex-1 space-x-2">
               <div class="flex flex-1">
                 <label for="client-version">
@@ -82,7 +88,7 @@
             </div>
           </div>
           <div
-            class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
+            class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
           >
             <span class="flex items-center">
               <label class="font-semibold text-secondaryLight">
@@ -213,7 +219,7 @@
         </Pane>
         <Pane
           :size="COLUMN_LAYOUT ? 65 : 50"
-          class="hide-scrollbar !overflow-auto"
+          class="hide-scrollbar !overflow-auto flex flex-col"
         >
           <RealtimeLog :title="$t('socketio.log')" :log="log" />
         </Pane>
@@ -223,9 +229,9 @@
       v-if="SIDEBAR"
       size="25"
       min-size="20"
-      class="hide-scrollbar !overflow-auto"
+      class="hide-scrollbar !overflow-auto flex flex-col"
     >
-      <div class="flex flex-col flex-1 p-4">
+      <div class="flex items-center justify-between p-4">
         <label for="events" class="font-semibold text-secondaryLight">
           {{ $t("socketio.events") }}
         </label>
@@ -242,7 +248,7 @@
           :disabled="!connectionState"
         />
       </div>
-      <div class="flex items-center justify-between flex-1 p-4">
+      <div class="flex items-center justify-between p-4">
         <label class="font-semibold text-secondaryLight">
           {{ $t("socketio.communication") }}
         </label>

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

@@ -1,7 +1,12 @@
 <template>
   <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
-    <Pane :size="COLUMN_LAYOUT ? 45 : 50" class="hide-scrollbar !overflow-auto">
+    <Pane
-      <div class="sticky top-0 z-10 flex p-4 bg-primary">
+      :size="COLUMN_LAYOUT ? 45 : 50"
+      class="hide-scrollbar !overflow-auto flex flex-col"
+    >
+      <div
+        class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
+      >
         <div class="inline-flex flex-1 space-x-2">
           <div class="flex flex-1">
             <input
@@ -44,7 +49,10 @@
         </div>
       </div>
     </Pane>
-    <Pane :size="COLUMN_LAYOUT ? 65 : 50" class="hide-scrollbar !overflow-auto">
+    <Pane
+      :size="COLUMN_LAYOUT ? 65 : 50"
+      class="hide-scrollbar !overflow-auto flex flex-col"
+    >
       <RealtimeLog :title="$t('sse.log')" :log="log" />
     </Pane>
   </Splitpanes>

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

@@ -7,13 +7,19 @@
     }"
     :horizontal="!mdAndLarger"
   >
-    <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
+    <Pane
+      size="75"
+      min-size="65"
+      class="hide-scrollbar !overflow-auto flex flex-col"
+    >
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
         <Pane
           :size="COLUMN_LAYOUT ? 45 : 50"
-          class="hide-scrollbar !overflow-auto"
+          class="hide-scrollbar !overflow-auto flex flex-col"
         >
-          <div class="sticky top-0 z-10 flex p-4 bg-primary">
+          <div
+            class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
+          >
             <div class="inline-flex flex-1 space-x-2">
               <input
                 id="websocket-url"
@@ -43,7 +49,7 @@
             </div>
           </div>
           <div
-            class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
+            class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
           >
             <label class="font-semibold text-secondaryLight">
               {{ $t("websocket.protocols") }}
@@ -135,7 +141,7 @@
         </Pane>
         <Pane
           :size="COLUMN_LAYOUT ? 65 : 50"
-          class="hide-scrollbar !overflow-auto"
+          class="hide-scrollbar !overflow-auto flex flex-col"
         >
           <RealtimeLog :title="$t('websocket.log')" :log="log" />
         </Pane>
@@ -145,9 +151,9 @@
       v-if="SIDEBAR"
       size="25"
       min-size="20"
-      class="hide-scrollbar !overflow-auto"
+      class="hide-scrollbar !overflow-auto flex flex-col"
     >
-      <div class="flex flex-col flex-1 p-4">
+      <div class="flex items-center justify-between p-4">
         <label
           for="websocket-message"
           class="font-semibold text-secondaryLight"

packages/hoppscotch-app/components/smart/Tab.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="active">
+  <div v-show="active" class="flex flex-col flex-1">
     <slot></slot>
   </div>
 </template>

packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts

@@ -32,6 +32,7 @@ export const baseTheme = EditorView.theme({
   "&": {
     fontSize: "var(--font-size-body)",
     height: "100%",
+    width: "100%",
   },
   ".cm-content": {
     caretColor: "var(--secondary-light-color)",

packages/hoppscotch-app/layouts/default.vue

@@ -12,7 +12,7 @@
         >
           <Pane
             style="width: auto; height: auto"
-            class="hide-scrollbar !overflow-auto"
+            class="hide-scrollbar !overflow-auto flex flex-col"
           >
             <AppSidenav />
           </Pane>

packages/hoppscotch-app/pages/documentation.vue

@@ -7,11 +7,15 @@
     }"
     :horizontal="!mdAndLarger"
   >
-    <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
+    <Pane
+      size="75"
+      min-size="65"
+      class="hide-scrollbar !overflow-auto flex flex-col"
+    >
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
         <Pane
           :size="COLUMN_LAYOUT ? 45 : 50"
-          class="hide-scrollbar !overflow-auto"
+          class="hide-scrollbar !overflow-auto flex flex-col"
         >
           <div class="flex items-start justify-between p-4">
             <label>
@@ -68,7 +72,7 @@
         </Pane>
         <Pane
           :size="COLUMN_LAYOUT ? 65 : 50"
-          class="hide-scrollbar !overflow-auto"
+          class="hide-scrollbar !overflow-auto flex flex-col"
         >
           <div class="flex flex-col">
             <div
@@ -121,7 +125,7 @@
       v-if="SIDEBAR"
       size="25"
       min-size="20"
-      class="hide-scrollbar !overflow-auto"
+      class="hide-scrollbar !overflow-auto flex flex-col"
     >
       <aside>
         <Collections

packages/hoppscotch-app/pages/graphql.vue

@@ -7,18 +7,22 @@
     }"
     :horizontal="!mdAndLarger"
   >
-    <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
+    <Pane
+      size="75"
+      min-size="65"
+      class="hide-scrollbar !overflow-auto flex flex-col"
+    >
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
         <Pane
           :size="COLUMN_LAYOUT ? 45 : 50"
-          class="hide-scrollbar !overflow-auto"
+          class="hide-scrollbar !overflow-auto flex flex-col"
         >
           <GraphqlRequest :conn="gqlConn" />
           <GraphqlRequestOptions :conn="gqlConn" />
         </Pane>
         <Pane
           :size="COLUMN_LAYOUT ? 65 : 50"
-          class="hide-scrollbar !overflow-auto"
+          class="hide-scrollbar !overflow-auto flex flex-col"
         >
           <GraphqlResponse :conn="gqlConn" />
         </Pane>
@@ -28,7 +32,7 @@
       v-if="SIDEBAR"
       size="25"
       min-size="20"
-      class="hide-scrollbar !overflow-auto"
+      class="hide-scrollbar !overflow-auto flex flex-col"
     >
       <GraphqlSidebar :conn="gqlConn" />
     </Pane>

packages/hoppscotch-app/pages/index.vue

@@ -7,11 +7,15 @@
     }"
     :horizontal="!mdAndLarger"
   >
-    <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
+    <Pane
+      size="75"
+      min-size="65"
+      class="hide-scrollbar !overflow-auto flex flex-col"
+    >
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
         <Pane
           :size="COLUMN_LAYOUT ? 45 : 50"
-          class="hide-scrollbar !overflow-auto"
+          class="hide-scrollbar !overflow-auto flex flex-col"
         >
           <HttpRequest />
           <SmartTabs styles="sticky bg-primary top-upperPrimaryStickyFold z-10">
@@ -64,7 +68,7 @@
         </Pane>
         <Pane
           :size="COLUMN_LAYOUT ? 65 : 50"
-          class="flex flex-col hide-scrollbar !overflow-auto"
+          class="flex flex-col hide-scrollbar !overflow-auto flex flex-col"
         >
           <HttpResponse ref="response" />
         </Pane>
@@ -74,7 +78,7 @@
       v-if="SIDEBAR"
       size="25"
       min-size="20"
-      class="hide-scrollbar !overflow-auto"
+      class="hide-scrollbar !overflow-auto flex flex-col"
     >
       <SmartTabs styles="sticky bg-primary z-10 top-0" vertical>
         <SmartTab