refactor: improve ui consistency

2022-02-02 15:28:59 +05:30
parent c0aab9ad41
commit 72172b8351
32 changed files with 150 additions and 102 deletions
--- 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'
--- 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"
--- 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"
--- 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
--- 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"
--- 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">
--- 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">
--- 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
--- 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"
--- 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"
--- 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") }}
--- 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)

--- 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">
--- 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") }}
--- 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"
--- 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>
--- 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"
--- 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"
--- 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"
--- 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>

--- 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>

--- 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>
--- 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>
--- 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>
--- 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>
--- 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"
--- 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>
--- 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)",
--- 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>
--- 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
--- 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>
--- 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