From 72172b8351fd5feedd3214156ae1c0cdfed90f1f Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 2 Feb 2022 15:28:59 +0530
Subject: [PATCH] refactor: improve ui consistency

---
 .../components/collections/index.vue          |  4 ++--
 .../components/graphql/Request.vue            |  4 +++-
 .../components/graphql/RequestOptions.vue     | 18 ++++++++------
 .../components/graphql/Response.vue           |  8 +++----
 .../components/graphql/Sidebar.vue            |  8 +++++--
 .../components/http/Authorization.vue         |  4 ++--
 .../hoppscotch-app/components/http/Body.vue   |  4 ++--
 .../components/http/BodyParameters.vue        |  4 ++--
 .../components/http/Headers.vue               |  6 ++---
 .../components/http/Parameters.vue            |  6 ++---
 .../components/http/PreRequestScript.vue      |  4 ++--
 .../components/http/RawBody.vue               | 18 ++++----------
 .../components/http/Request.vue               |  2 +-
 .../hoppscotch-app/components/http/Tests.vue  |  4 ++--
 .../components/http/URLEncodedParams.vue      |  6 ++---
 .../lenses/ResponseBodyRenderer.vue           |  2 +-
 .../lenses/renderers/HTMLLensRenderer.vue     |  6 ++++-
 .../lenses/renderers/ImageLensRenderer.vue    |  4 ++--
 .../lenses/renderers/JSONLensRenderer.vue     |  6 ++---
 .../lenses/renderers/RawLensRenderer.vue      |  4 ++--
 .../lenses/renderers/XMLLensRenderer.vue      |  4 ++--
 .../components/realtime/Log.vue               |  5 ++--
 .../components/realtime/Mqtt.vue              | 24 ++++++++++++-------
 .../components/realtime/Socketio.vue          | 22 ++++++++++-------
 .../components/realtime/Sse.vue               | 14 ++++++++---
 .../components/realtime/Websocket.vue         | 20 ++++++++++------
 .../hoppscotch-app/components/smart/Tab.vue   |  2 +-
 .../helpers/editor/themes/baseTheme.ts        |  1 +
 packages/hoppscotch-app/layouts/default.vue   |  2 +-
 .../hoppscotch-app/pages/documentation.vue    | 12 ++++++----
 packages/hoppscotch-app/pages/graphql.vue     | 12 ++++++----
 packages/hoppscotch-app/pages/index.vue       | 12 ++++++----
 32 files changed, 150 insertions(+), 102 deletions(-)

diff --git a/packages/hoppscotch-app/components/collections/index.vue b/packages/hoppscotch-app/components/collections/index.vue
index e5bcbbd97..027f246ff 100644
--- a/packages/hoppscotch-app/components/collections/index.vue
+++ b/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'
diff --git a/packages/hoppscotch-app/components/graphql/Request.vue b/packages/hoppscotch-app/components/graphql/Request.vue
index 1f5565c12..58a3b3206 100644
--- a/packages/hoppscotch-app/components/graphql/Request.vue
+++ b/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"
diff --git a/packages/hoppscotch-app/components/graphql/RequestOptions.vue b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
index 160afee5b..f8de9fbc2 100644
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/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"
diff --git a/packages/hoppscotch-app/components/graphql/Response.vue b/packages/hoppscotch-app/components/graphql/Response.vue
index 8fe619d96..067ea485f 100644
--- a/packages/hoppscotch-app/components/graphql/Response.vue
+++ b/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
diff --git a/packages/hoppscotch-app/components/graphql/Sidebar.vue b/packages/hoppscotch-app/components/graphql/Sidebar.vue
index faf1243cf..029129e74 100644
--- a/packages/hoppscotch-app/components/graphql/Sidebar.vue
+++ b/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"
diff --git a/packages/hoppscotch-app/components/http/Authorization.vue b/packages/hoppscotch-app/components/http/Authorization.vue
index 4fcbc826f..e8e55f983 100644
--- a/packages/hoppscotch-app/components/http/Authorization.vue
+++ b/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">
diff --git a/packages/hoppscotch-app/components/http/Body.vue b/packages/hoppscotch-app/components/http/Body.vue
index 3f4b9fb32..00bae3fd1 100644
--- a/packages/hoppscotch-app/components/http/Body.vue
+++ b/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">
diff --git a/packages/hoppscotch-app/components/http/BodyParameters.vue b/packages/hoppscotch-app/components/http/BodyParameters.vue
index bc9fbbebf..af7225e87 100644
--- a/packages/hoppscotch-app/components/http/BodyParameters.vue
+++ b/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
diff --git a/packages/hoppscotch-app/components/http/Headers.vue b/packages/hoppscotch-app/components/http/Headers.vue
index f237c1be7..a182133a2 100644
--- a/packages/hoppscotch-app/components/http/Headers.vue
+++ b/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"
diff --git a/packages/hoppscotch-app/components/http/Parameters.vue b/packages/hoppscotch-app/components/http/Parameters.vue
index 48f03ab5a..3ef27fa0c 100644
--- a/packages/hoppscotch-app/components/http/Parameters.vue
+++ b/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"
diff --git a/packages/hoppscotch-app/components/http/PreRequestScript.vue b/packages/hoppscotch-app/components/http/PreRequestScript.vue
index 5b99b0f22..d62f1bad0 100644
--- a/packages/hoppscotch-app/components/http/PreRequestScript.vue
+++ b/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") }}
diff --git a/packages/hoppscotch-app/components/http/RawBody.vue b/packages/hoppscotch-app/components/http/RawBody.vue
index 9d362e545..45744a343 100644
--- a/packages/hoppscotch-app/components/http/RawBody.vue
+++ b/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 {
-  computed,
-  reactive,
-  Ref,
-  ref,
-  watchEffect,
-} from "@nuxtjs/composition-api"
+import { computed, reactive, Ref, ref } 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)
 
diff --git a/packages/hoppscotch-app/components/http/Request.vue b/packages/hoppscotch-app/components/http/Request.vue
index 24321293a..94772408a 100644
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/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">
diff --git a/packages/hoppscotch-app/components/http/Tests.vue b/packages/hoppscotch-app/components/http/Tests.vue
index 71a7a42a0..a04f71845 100644
--- a/packages/hoppscotch-app/components/http/Tests.vue
+++ b/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") }}
diff --git a/packages/hoppscotch-app/components/http/URLEncodedParams.vue b/packages/hoppscotch-app/components/http/URLEncodedParams.vue
index d6bfb63b2..e0219ba28 100644
--- a/packages/hoppscotch-app/components/http/URLEncodedParams.vue
+++ b/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"
diff --git a/packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue b/packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue
index e377f6800..2c0406032 100644
--- a/packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue
index 4baf162bd..793b61a50 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/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"
diff --git a/packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue
index 1c87f4801..179593a93 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue
+++ b/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"
diff --git a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
index 47112319d..45a3499a5 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
+++ b/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"
diff --git a/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue
index 6d3e67755..c1fe5a8c6 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue
+++ b/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>
 
diff --git a/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue
index 1f105206c..8de0b6fd1 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue
+++ b/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>
 
diff --git a/packages/hoppscotch-app/components/realtime/Log.vue b/packages/hoppscotch-app/components/realtime/Log.vue
index 415a8b084..0844e03a9 100644
--- a/packages/hoppscotch-app/components/realtime/Log.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/components/realtime/Mqtt.vue b/packages/hoppscotch-app/components/realtime/Mqtt.vue
index 8528f2e2a..7eac5e47b 100644
--- a/packages/hoppscotch-app/components/realtime/Mqtt.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/components/realtime/Socketio.vue b/packages/hoppscotch-app/components/realtime/Socketio.vue
index 471d47129..71a9831d9 100644
--- a/packages/hoppscotch-app/components/realtime/Socketio.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/components/realtime/Sse.vue b/packages/hoppscotch-app/components/realtime/Sse.vue
index 214521dd2..5ca237e55 100644
--- a/packages/hoppscotch-app/components/realtime/Sse.vue
+++ b/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">
-      <div class="sticky top-0 z-10 flex p-4 bg-primary">
+    <Pane
+      :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>
diff --git a/packages/hoppscotch-app/components/realtime/Websocket.vue b/packages/hoppscotch-app/components/realtime/Websocket.vue
index 7d8884e23..902ed2eb9 100644
--- a/packages/hoppscotch-app/components/realtime/Websocket.vue
+++ b/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"
diff --git a/packages/hoppscotch-app/components/smart/Tab.vue b/packages/hoppscotch-app/components/smart/Tab.vue
index 5bd1b28c7..4a44b0818 100644
--- a/packages/hoppscotch-app/components/smart/Tab.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
index a2b6d9073..04862bc31 100644
--- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
+++ b/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)",
diff --git a/packages/hoppscotch-app/layouts/default.vue b/packages/hoppscotch-app/layouts/default.vue
index 44f41a2a6..f6a9937f4 100644
--- a/packages/hoppscotch-app/layouts/default.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/pages/documentation.vue b/packages/hoppscotch-app/pages/documentation.vue
index 35c085abc..64b656711 100644
--- a/packages/hoppscotch-app/pages/documentation.vue
+++ b/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
diff --git a/packages/hoppscotch-app/pages/graphql.vue b/packages/hoppscotch-app/pages/graphql.vue
index cd17470c1..5736b8f0e 100644
--- a/packages/hoppscotch-app/pages/graphql.vue
+++ b/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>
diff --git a/packages/hoppscotch-app/pages/index.vue b/packages/hoppscotch-app/pages/index.vue
index 5ce4fa108..f055e1498 100644
--- a/packages/hoppscotch-app/pages/index.vue
+++ b/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