From 237455ab21ba0c3233385288cc0f35c4bd6a370f Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 29 Nov 2022 13:50:58 +0530
Subject: [PATCH] chore: minor ui improvements

---
 .../src/components/app/Shortcuts.vue          |  6 ++--
 .../components/collections/graphql/index.vue  |  2 +-
 .../src/components/collections/index.vue      |  2 +-
 .../src/components/environments/index.vue     |  4 ++-
 .../src/components/environments/my/index.vue  |  2 +-
 .../components/environments/teams/index.vue   |  2 +-
 .../src/components/graphql/Authorization.vue  |  6 ++--
 .../src/components/graphql/RequestOptions.vue | 14 ++++----
 .../src/components/graphql/Response.vue       |  4 +--
 .../src/components/graphql/Sidebar.vue        | 10 +++---
 .../src/components/history/index.vue          |  6 ++--
 .../src/components/http/Authorization.vue     |  6 ++--
 .../src/components/http/Body.vue              |  4 +--
 .../src/components/http/BodyParameters.vue    |  6 ++--
 .../src/components/http/CodegenModal.vue      |  4 +--
 .../src/components/http/Headers.vue           |  4 +--
 .../src/components/http/ImportCurl.vue        |  4 ++-
 .../src/components/http/Parameters.vue        |  4 +--
 .../src/components/http/PreRequestScript.vue  |  6 ++--
 .../src/components/http/RawBody.vue           |  4 +--
 .../src/components/http/Request.vue           |  8 ++---
 .../src/components/http/RequestOptions.vue    |  2 +-
 .../src/components/http/ResponseMeta.vue      |  2 +-
 .../src/components/http/Sidebar.vue           |  2 +-
 .../src/components/http/TestResult.vue        |  8 ++---
 .../src/components/http/Tests.vue             |  6 ++--
 .../src/components/http/URLEncodedParams.vue  |  4 +--
 .../src/components/lenses/HeadersRenderer.vue |  4 +--
 .../lenses/ResponseBodyRenderer.vue           |  2 +-
 .../lenses/renderers/HTMLLensRenderer.vue     |  6 ++--
 .../lenses/renderers/ImageLensRenderer.vue    |  4 +--
 .../lenses/renderers/JSONLensRenderer.vue     |  8 ++---
 .../lenses/renderers/PDFLensRenderer.vue      |  4 +--
 .../lenses/renderers/RawLensRenderer.vue      |  6 ++--
 .../lenses/renderers/XMLLensRenderer.vue      | 33 +++++++++++++------
 .../src/components/realtime/Communication.vue |  6 ++--
 .../components/realtime/ConnectionConfig.vue  |  6 ++--
 .../src/components/realtime/Log.vue           |  4 +--
 .../src/components/realtime/LogEntry.vue      |  6 ++--
 .../src/components/smart/ChangeLanguage.vue   |  2 +-
 .../src/components/smart/Expand.vue           |  6 ++--
 .../src/components/smart/Windows.vue          |  8 +++--
 .../src/components/teams/Edit.vue             |  4 +--
 .../src/components/teams/Invite.vue           |  1 +
 .../hoppscotch-app/src/helpers/shortcuts.ts   |  2 +-
 .../hoppscotch-app/src/pages/realtime.vue     |  2 +-
 .../src/pages/realtime/mqtt.vue               |  6 ++--
 .../src/pages/realtime/socketio.vue           | 10 +++---
 .../src/pages/realtime/websocket.vue          |  8 ++---
 49 files changed, 148 insertions(+), 122 deletions(-)

diff --git a/packages/hoppscotch-app/src/components/app/Shortcuts.vue b/packages/hoppscotch-app/src/components/app/Shortcuts.vue
index d79c6d9a7..7d3479364 100644
--- a/packages/hoppscotch-app/src/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-app/src/components/app/Shortcuts.vue
@@ -1,7 +1,7 @@
 <template>
   <SmartSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
     <template #content>
-      <div class="sticky top-0 z-10 flex flex-col bg-primary">
+      <div class="sticky top-0 z-10 flex flex-col overflow-x-auto bg-primary">
         <div class="flex flex-col px-6 py-4 border-b border-dividerLight">
           <input
             v-model="filterText"
@@ -20,7 +20,7 @@
           open
         >
           <summary
-            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold cursor-pointer transition focus:outline-none text-secondaryLight hover:text-secondaryDark"
+            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
           >
             <icon-lucide-chevron-right class="mr-2 indicator" />
             <span
@@ -55,7 +55,7 @@
           open
         >
           <summary
-            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold cursor-pointer transition focus:outline-none text-secondaryLight hover:text-secondaryDark"
+            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
           >
             <icon-lucide-chevron-right class="mr-2 indicator" />
             <span
diff --git a/packages/hoppscotch-app/src/components/collections/graphql/index.vue b/packages/hoppscotch-app/src/components/collections/graphql/index.vue
index 6a0a30cdc..76c14dd01 100644
--- a/packages/hoppscotch-app/src/components/collections/graphql/index.vue
+++ b/packages/hoppscotch-app/src/components/collections/graphql/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="{ 'rounded border border-divider': savingMode }">
     <div
-      class="sticky top-0 z-10 flex flex-col border-b divide-y divide-dividerLight border-dividerLight"
+      class="sticky top-0 z-10 flex flex-col overflow-x-auto border-b divide-y divide-dividerLight border-dividerLight"
       :class="{ 'bg-primary': !savingMode }"
     >
       <input
diff --git a/packages/hoppscotch-app/src/components/collections/index.vue b/packages/hoppscotch-app/src/components/collections/index.vue
index 141a9d592..b86975ea0 100644
--- a/packages/hoppscotch-app/src/components/collections/index.vue
+++ b/packages/hoppscotch-app/src/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 bg-primary border-dividerLight"
+      class="sticky z-10 flex flex-col overflow-x-auto border-b rounded-t bg-primary border-dividerLight"
       :style="
         saveRequest ? 'top: calc(-1.35 * var(--font-size-body))' : 'top: 0'
       "
diff --git a/packages/hoppscotch-app/src/components/environments/index.vue b/packages/hoppscotch-app/src/components/environments/index.vue
index aaf5cfc92..9f0d33fa1 100644
--- a/packages/hoppscotch-app/src/components/environments/index.vue
+++ b/packages/hoppscotch-app/src/components/environments/index.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
-    <div class="sticky top-0 z-10 flex flex-col rounded-t bg-primary">
+    <div
+      class="sticky top-0 z-10 flex flex-col overflow-x-auto rounded-t bg-primary"
+    >
       <tippy
         v-if="environmentType.type === 'my-environments'"
         interactive
diff --git a/packages/hoppscotch-app/src/components/environments/my/index.vue b/packages/hoppscotch-app/src/components/environments/my/index.vue
index 9646ced5e..ac376dd28 100644
--- a/packages/hoppscotch-app/src/components/environments/my/index.vue
+++ b/packages/hoppscotch-app/src/components/environments/my/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="sticky z-10 flex justify-between flex-1 border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
+      class="sticky z-10 flex justify-between flex-1 overflow-x-auto border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
     >
       <ButtonSecondary
         :icon="IconPlus"
diff --git a/packages/hoppscotch-app/src/components/environments/teams/index.vue b/packages/hoppscotch-app/src/components/environments/teams/index.vue
index 0ef9bdac1..8f830103e 100644
--- a/packages/hoppscotch-app/src/components/environments/teams/index.vue
+++ b/packages/hoppscotch-app/src/components/environments/teams/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="sticky z-10 flex justify-between flex-1 border-b top-upperSecondaryStickyFold border-dividerLight bg-primary"
+      class="sticky z-10 flex justify-between flex-1 overflow-x-auto border-b top-upperSecondaryStickyFold border-dividerLight bg-primary"
     >
       <ButtonSecondary
         v-if="team === undefined || team.myRole === 'VIEWER'"
diff --git a/packages/hoppscotch-app/src/components/graphql/Authorization.vue b/packages/hoppscotch-app/src/components/graphql/Authorization.vue
index 2d958ee1c..4c7baa213 100644
--- a/packages/hoppscotch-app/src/components/graphql/Authorization.vue
+++ b/packages/hoppscotch-app/src/components/graphql/Authorization.vue
@@ -1,10 +1,10 @@
 <template>
   <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-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
     >
       <span class="flex items-center">
-        <label class="font-semibold text-secondaryLight">
+        <label class="font-semibold truncate text-secondaryLight">
           {{ t("authorization.type") }}
         </label>
         <tippy
@@ -224,7 +224,7 @@
         </div>
       </div>
       <div
-        class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
+        class="sticky h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
       >
         <div class="pb-2 text-secondaryLight">
           {{ t("helpers.authorization") }}
diff --git a/packages/hoppscotch-app/src/components/graphql/RequestOptions.vue b/packages/hoppscotch-app/src/components/graphql/RequestOptions.vue
index 479209886..67720f39f 100644
--- a/packages/hoppscotch-app/src/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/src/components/graphql/RequestOptions.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-col flex-1 h-full">
     <SmartTabs
       v-model="selectedOptionTab"
-      styles="sticky bg-primary top-upperPrimaryStickyFold z-10"
+      styles="sticky overflow-x-auto bg-primary top-upperPrimaryStickyFold z-10"
       render-inactive-tabs
     >
       <SmartTab
@@ -11,9 +11,9 @@
         :indicator="gqlQueryString && gqlQueryString.length > 0 ? true : false"
       >
         <div
-          class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery"
+          class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery"
         >
-          <label class="font-semibold text-secondaryLight">
+          <label class="font-semibold truncate text-secondaryLight">
             {{ t("request.query") }}
           </label>
           <div class="flex">
@@ -79,9 +79,9 @@
         :indicator="variableString && variableString.length > 0 ? true : false"
       >
         <div
-          class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+          class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
         >
-          <label class="font-semibold text-secondaryLight">
+          <label class="font-semibold truncate text-secondaryLight">
             {{ t("request.variables") }}
           </label>
           <div class="flex">
@@ -129,9 +129,9 @@
         :info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
       >
         <div
-          class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+          class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
         >
-          <label class="font-semibold text-secondaryLight">
+          <label class="font-semibold truncate text-secondaryLight">
             {{ t("tab.headers") }}
           </label>
           <div class="flex">
diff --git a/packages/hoppscotch-app/src/components/graphql/Response.vue b/packages/hoppscotch-app/src/components/graphql/Response.vue
index 4c8b28f15..f00ed5b8e 100644
--- a/packages/hoppscotch-app/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-app/src/components/graphql/Response.vue
@@ -9,9 +9,9 @@
     </div>
     <div v-else-if="responseString" class="flex flex-col flex-1">
       <div
-        class="sticky top-0 z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
+        class="sticky top-0 z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
       >
-        <label class="font-semibold text-secondaryLight">
+        <label class="font-semibold truncate text-secondaryLight">
           {{ t("response.title") }}
         </label>
         <div class="flex items-center">
diff --git a/packages/hoppscotch-app/src/components/graphql/Sidebar.vue b/packages/hoppscotch-app/src/components/graphql/Sidebar.vue
index 792f95b8f..65d0fa405 100644
--- a/packages/hoppscotch-app/src/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-app/src/components/graphql/Sidebar.vue
@@ -1,7 +1,7 @@
 <template>
   <SmartTabs
     v-model="selectedNavigationTab"
-    styles="sticky bg-primary z-10 top-0"
+    styles="sticky overflow-x-auto bg-primary z-10 top-0"
     vertical
     render-inactive-tabs
   >
@@ -40,7 +40,7 @@
         </span>
       </div>
       <div v-else>
-        <div class="sticky top-0 z-10 flex bg-primary">
+        <div class="sticky top-0 z-10 flex overflow-x-auto bg-primary">
           <input
             v-model="graphqlFieldsFilterText"
             type="search"
@@ -60,7 +60,7 @@
         </div>
         <SmartTabs
           v-model="selectedGqlTab"
-          styles="border-t border-b border-dividerLight bg-primary sticky z-10 top-sidebarPrimaryStickyFold"
+          styles="border-t border-b border-dividerLight bg-primary sticky overflow-x-auto z-10 top-sidebarPrimaryStickyFold"
           render-inactive-tabs
         >
           <SmartTab
@@ -127,9 +127,9 @@
     <SmartTab :id="'schema'" :icon="IconBox" :label="`${t('tab.schema')}`">
       <div
         v-if="schemaString"
-        class="sticky top-0 z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
+        class="sticky top-0 z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
       >
-        <label class="font-semibold text-secondaryLight">
+        <label class="font-semibold truncate text-secondaryLight">
           {{ t("graphql.schema") }}
         </label>
         <div class="flex">
diff --git a/packages/hoppscotch-app/src/components/history/index.vue b/packages/hoppscotch-app/src/components/history/index.vue
index b0f17c198..cbff80370 100644
--- a/packages/hoppscotch-app/src/components/history/index.vue
+++ b/packages/hoppscotch-app/src/components/history/index.vue
@@ -1,6 +1,8 @@
 <template>
   <div>
-    <div class="sticky top-0 z-10 flex border-b bg-primary border-dividerLight">
+    <div
+      class="sticky top-0 z-10 flex overflow-x-auto border-b bg-primary border-dividerLight"
+    >
       <input
         v-model="filterText"
         type="search"
@@ -64,7 +66,7 @@
         open
       >
         <summary
-          class="flex items-center justify-between flex-1 min-w-0 cursor-pointer transition focus:outline-none text-secondaryLight text-tiny group"
+          class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer focus:outline-none text-secondaryLight text-tiny group"
         >
           <span
             class="inline-flex items-center justify-center px-4 py-2 transition group-hover:text-secondary"
diff --git a/packages/hoppscotch-app/src/components/http/Authorization.vue b/packages/hoppscotch-app/src/components/http/Authorization.vue
index 693c3eba1..322056399 100644
--- a/packages/hoppscotch-app/src/components/http/Authorization.vue
+++ b/packages/hoppscotch-app/src/components/http/Authorization.vue
@@ -1,10 +1,10 @@
 <template>
   <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-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
       <span class="flex items-center">
-        <label class="font-semibold text-secondaryLight">
+        <label class="font-semibold truncate text-secondaryLight">
           {{ t("authorization.type") }}
         </label>
         <tippy
@@ -221,7 +221,7 @@
         </div>
       </div>
       <div
-        class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
+        class="sticky h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
       >
         <div class="pb-2 text-secondaryLight">
           {{ t("helpers.authorization") }}
diff --git a/packages/hoppscotch-app/src/components/http/Body.vue b/packages/hoppscotch-app/src/components/http/Body.vue
index 531ef3c09..2c5faf79b 100644
--- a/packages/hoppscotch-app/src/components/http/Body.vue
+++ b/packages/hoppscotch-app/src/components/http/Body.vue
@@ -1,10 +1,10 @@
 <template>
   <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-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
       <span class="flex items-center">
-        <label class="font-semibold text-secondaryLight">
+        <label class="font-semibold truncate text-secondaryLight">
           {{ t("request.content_type") }}
         </label>
         <tippy
diff --git a/packages/hoppscotch-app/src/components/http/BodyParameters.vue b/packages/hoppscotch-app/src/components/http/BodyParameters.vue
index 93b80982f..048fcc9f6 100644
--- a/packages/hoppscotch-app/src/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-app/src/components/http/BodyParameters.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
         {{ t("request.body") }}
       </label>
       <div class="flex">
@@ -104,7 +104,7 @@
                 :name="`attachment${index}`"
                 type="file"
                 multiple
-                class="p-1 cursor-pointer transition file:transition file:cursor-pointer text-secondaryLight hover:text-secondaryDark file:mr-2 file:py-1 file:px-4 file:rounded file:border-0 file:text-tiny text-tiny file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
+                class="p-1 transition cursor-pointer file:transition file:cursor-pointer text-secondaryLight hover:text-secondaryDark file:mr-2 file:py-1 file:px-4 file:rounded file:border-0 file:text-tiny text-tiny file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
                 @change="setRequestAttachment(index, entry, $event)"
               />
             </label>
diff --git a/packages/hoppscotch-app/src/components/http/CodegenModal.vue b/packages/hoppscotch-app/src/components/http/CodegenModal.vue
index 2c71d1373..6400470c1 100644
--- a/packages/hoppscotch-app/src/components/http/CodegenModal.vue
+++ b/packages/hoppscotch-app/src/components/http/CodegenModal.vue
@@ -28,7 +28,7 @@
           </span>
           <template #content="{ hide }">
             <div class="flex flex-col space-y-2">
-              <div class="sticky top-0">
+              <div class="sticky top-0 overflow-x-auto">
                 <input
                   v-model="searchQuery"
                   type="search"
@@ -85,7 +85,7 @@
           class="mt-4 border rounded border-dividerLight"
         >
           <div class="flex items-center justify-between pl-4">
-            <label class="font-semibold text-secondaryLight">
+            <label class="font-semibold truncate text-secondaryLight">
               {{ t("request.generated_code") }}
             </label>
             <div class="flex items-center">
diff --git a/packages/hoppscotch-app/src/components/http/Headers.vue b/packages/hoppscotch-app/src/components/http/Headers.vue
index 58ce5ae98..081de489b 100644
--- a/packages/hoppscotch-app/src/components/http/Headers.vue
+++ b/packages/hoppscotch-app/src/components/http/Headers.vue
@@ -1,9 +1,9 @@
 <template>
   <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-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
         {{ t("request.header_list") }}
       </label>
       <div class="flex">
diff --git a/packages/hoppscotch-app/src/components/http/ImportCurl.vue b/packages/hoppscotch-app/src/components/http/ImportCurl.vue
index 2026b7218..c0dcca842 100644
--- a/packages/hoppscotch-app/src/components/http/ImportCurl.vue
+++ b/packages/hoppscotch-app/src/components/http/ImportCurl.vue
@@ -9,7 +9,9 @@
       <div class="border rounded border-dividerLight">
         <div class="flex flex-col">
           <div class="flex items-center justify-between pl-4">
-            <label class="font-semibold text-secondaryLight"> cURL </label>
+            <label class="font-semibold truncate text-secondaryLight">
+              cURL
+            </label>
             <div class="flex items-center">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
diff --git a/packages/hoppscotch-app/src/components/http/Parameters.vue b/packages/hoppscotch-app/src/components/http/Parameters.vue
index 2dcfe6797..2d55423ae 100644
--- a/packages/hoppscotch-app/src/components/http/Parameters.vue
+++ b/packages/hoppscotch-app/src/components/http/Parameters.vue
@@ -1,9 +1,9 @@
 <template>
   <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-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
         {{ t("request.parameter_list") }}
       </label>
       <div class="flex">
diff --git a/packages/hoppscotch-app/src/components/http/PreRequestScript.vue b/packages/hoppscotch-app/src/components/http/PreRequestScript.vue
index 2bbadc122..441b342ca 100644
--- a/packages/hoppscotch-app/src/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-app/src/components/http/PreRequestScript.vue
@@ -1,9 +1,9 @@
 <template>
   <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-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
         {{ t("preRequest.javascript_code") }}
       </label>
       <div class="flex">
@@ -34,7 +34,7 @@
         <div ref="preRequestEditor" class="h-full"></div>
       </div>
       <div
-        class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
+        class="sticky h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
       >
         <div class="pb-2 text-secondaryLight">
           {{ t("helpers.pre_request_script") }}
diff --git a/packages/hoppscotch-app/src/components/http/RawBody.vue b/packages/hoppscotch-app/src/components/http/RawBody.vue
index 02a74bccf..ae94d3981 100644
--- a/packages/hoppscotch-app/src/components/http/RawBody.vue
+++ b/packages/hoppscotch-app/src/components/http/RawBody.vue
@@ -1,9 +1,9 @@
 <template>
   <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-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
         {{ t("request.raw_body") }}
       </label>
       <div class="flex">
diff --git a/packages/hoppscotch-app/src/components/http/Request.vue b/packages/hoppscotch-app/src/components/http/Request.vue
index 9382ce9fa..b849e1705 100644
--- a/packages/hoppscotch-app/src/components/http/Request.vue
+++ b/packages/hoppscotch-app/src/components/http/Request.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="sticky top-0 z-20 flex-none p-4 sm:flex sm:flex-shrink-0 sm:space-x-2 bg-primary"
+    class="sticky top-0 z-20 flex-none p-4 overflow-x-auto sm:flex sm:flex-shrink-0 sm:space-x-2 bg-primary"
   >
     <div
       class="flex flex-1 border rounded min-w-52 border-divider whitespace-nowrap"
@@ -16,7 +16,7 @@
             <span class="select-wrapper">
               <input
                 id="method"
-                class="flex px-4 py-2 font-semibold rounded-l cursor-pointer transition text-secondaryDark w-26 bg-primaryLight"
+                class="flex px-4 py-2 font-semibold transition rounded-l cursor-pointer text-secondaryDark w-26 bg-primaryLight"
                 :value="newMethod"
                 :readonly="!isCustomMethod"
                 :placeholder="`${t('request.method')}`"
@@ -47,7 +47,7 @@
         </label>
       </div>
       <div
-        class="flex flex-1 overflow-auto border-l rounded-r transition border-divider bg-primaryLight whitespace-nowrap"
+        class="flex flex-1 overflow-auto transition border-l rounded-r border-divider bg-primaryLight whitespace-nowrap"
       >
         <SmartEnvInput
           v-model="newEndpoint"
@@ -131,7 +131,7 @@
         </tippy>
       </span>
       <span
-        class="flex ml-2 border rounded transition border-dividerLight hover:border-dividerDark"
+        class="flex ml-2 transition border rounded border-dividerLight hover:border-dividerDark"
       >
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
diff --git a/packages/hoppscotch-app/src/components/http/RequestOptions.vue b/packages/hoppscotch-app/src/components/http/RequestOptions.vue
index 251627624..b4517ecb9 100644
--- a/packages/hoppscotch-app/src/components/http/RequestOptions.vue
+++ b/packages/hoppscotch-app/src/components/http/RequestOptions.vue
@@ -1,7 +1,7 @@
 <template>
   <SmartTabs
     v-model="selectedRealtimeTab"
-    styles="sticky bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
+    styles="sticky overflow-x-auto bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
     render-inactive-tabs
   >
     <SmartTab
diff --git a/packages/hoppscotch-app/src/components/http/ResponseMeta.vue b/packages/hoppscotch-app/src/components/http/ResponseMeta.vue
index 788b9377b..eaa26cfd2 100644
--- a/packages/hoppscotch-app/src/components/http/ResponseMeta.vue
+++ b/packages/hoppscotch-app/src/components/http/ResponseMeta.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="sticky top-0 z-10 flex items-start justify-center p-4 overflow-auto bg-primary whitespace-nowrap"
+    class="sticky top-0 z-10 flex items-start justify-center p-4 overflow-auto overflow-x-auto bg-primary whitespace-nowrap"
   >
     <AppShortcutsPrompt v-if="response == null" class="flex-1" />
     <div v-else class="flex flex-col flex-1">
diff --git a/packages/hoppscotch-app/src/components/http/Sidebar.vue b/packages/hoppscotch-app/src/components/http/Sidebar.vue
index 5ce1f6664..b47dcb7f6 100644
--- a/packages/hoppscotch-app/src/components/http/Sidebar.vue
+++ b/packages/hoppscotch-app/src/components/http/Sidebar.vue
@@ -1,7 +1,7 @@
 <template>
   <SmartTabs
     v-model="selectedNavigationTab"
-    styles="sticky bg-primary z-10 top-0"
+    styles="sticky overflow-x-auto bg-primary z-10 top-0"
     vertical
     render-inactive-tabs
   >
diff --git a/packages/hoppscotch-app/src/components/http/TestResult.vue b/packages/hoppscotch-app/src/components/http/TestResult.vue
index 29a459682..28b346bc0 100644
--- a/packages/hoppscotch-app/src/components/http/TestResult.vue
+++ b/packages/hoppscotch-app/src/components/http/TestResult.vue
@@ -9,9 +9,9 @@
       "
     >
       <div
-        class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
+        class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
       >
-        <label class="font-semibold text-secondaryLight">
+        <label class="font-semibold truncate text-secondaryLight">
           {{ t("test.report") }}
         </label>
         <ButtonSecondary
@@ -25,7 +25,7 @@
         <div v-if="haveEnvVariables" class="flex flex-col">
           <details class="flex flex-col divide-y divide-dividerLight" open>
             <summary
-              class="flex items-center justify-between flex-1 min-w-0 cursor-pointer transition focus:outline-none text-secondaryLight text-tiny group"
+              class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer focus:outline-none text-secondaryLight text-tiny group"
             >
               <span
                 class="inline-flex items-center justify-center px-4 py-2 transition group-hover:text-secondary"
@@ -127,7 +127,7 @@
                 "
               />
               <div
-                class="flex items-center flex-shrink overflow-x-auto space-x-2"
+                class="flex items-center flex-shrink space-x-2 overflow-x-auto"
               >
                 <span
                   v-if="result.message"
diff --git a/packages/hoppscotch-app/src/components/http/Tests.vue b/packages/hoppscotch-app/src/components/http/Tests.vue
index 71361fbe3..a84d138e7 100644
--- a/packages/hoppscotch-app/src/components/http/Tests.vue
+++ b/packages/hoppscotch-app/src/components/http/Tests.vue
@@ -1,9 +1,9 @@
 <template>
   <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-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
         {{ t("test.javascript_code") }}
       </label>
       <div class="flex">
@@ -34,7 +34,7 @@
         <div ref="testScriptEditor" class="h-full"></div>
       </div>
       <div
-        class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
+        class="sticky h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
       >
         <div class="pb-2 text-secondaryLight">
           {{ t("helpers.post_request_tests") }}
diff --git a/packages/hoppscotch-app/src/components/http/URLEncodedParams.vue b/packages/hoppscotch-app/src/components/http/URLEncodedParams.vue
index 59c873e46..768c7ae29 100644
--- a/packages/hoppscotch-app/src/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-app/src/components/http/URLEncodedParams.vue
@@ -1,9 +1,9 @@
 <template>
   <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-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
         {{ t("request.body") }}
       </label>
       <div class="flex">
diff --git a/packages/hoppscotch-app/src/components/lenses/HeadersRenderer.vue b/packages/hoppscotch-app/src/components/lenses/HeadersRenderer.vue
index d4b2e8acd..c6cc4b01f 100644
--- a/packages/hoppscotch-app/src/components/lenses/HeadersRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/HeadersRenderer.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
         {{ t("request.header_list") }}
       </label>
       <div class="flex">
diff --git a/packages/hoppscotch-app/src/components/lenses/ResponseBodyRenderer.vue b/packages/hoppscotch-app/src/components/lenses/ResponseBodyRenderer.vue
index 9aae6fe5d..3854d121c 100644
--- a/packages/hoppscotch-app/src/components/lenses/ResponseBodyRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/ResponseBodyRenderer.vue
@@ -2,7 +2,7 @@
   <SmartTabs
     v-if="response"
     v-model="selectedLensTab"
-    styles="sticky z-10 bg-primary top-lowerPrimaryStickyFold"
+    styles="sticky overflow-x-auto z-10 bg-primary top-lowerPrimaryStickyFold"
   >
     <SmartTab
       v-for="(lens, index) in validLenses"
diff --git a/packages/hoppscotch-app/src/components/lenses/renderers/HTMLLensRenderer.vue b/packages/hoppscotch-app/src/components/lenses/renderers/HTMLLensRenderer.vue
index ba2e12ad2..8e91e83fd 100644
--- a/packages/hoppscotch-app/src/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/HTMLLensRenderer.vue
@@ -1,9 +1,9 @@
 <template>
   <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"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
         {{ t("response.body") }}
       </label>
       <div class="flex">
@@ -80,7 +80,7 @@ import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 const t = useI18n()
 
 const props = defineProps<{
-  response: HoppRESTResponse
+  response: HoppRESTResponse & { type: "success" | "fail" }
 }>()
 
 const htmlResponse = ref<any | null>(null)
diff --git a/packages/hoppscotch-app/src/components/lenses/renderers/ImageLensRenderer.vue b/packages/hoppscotch-app/src/components/lenses/renderers/ImageLensRenderer.vue
index f469ee71a..82a4a70ab 100644
--- a/packages/hoppscotch-app/src/components/lenses/renderers/ImageLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/ImageLensRenderer.vue
@@ -1,9 +1,9 @@
 <template>
   <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"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
         {{ t("response.body") }}
       </label>
       <div class="flex">
diff --git a/packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue
index 7aca4a7f4..4e8d1a61b 100644
--- a/packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue
@@ -4,9 +4,9 @@
     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"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
         {{ t("response.body") }}
       </label>
       <div class="flex items-center">
@@ -48,7 +48,7 @@
     </div>
     <div
       v-if="toggleFilter"
-      class="sticky z-10 flex border-b bg-primary top-lowerTertiaryStickyFold border-dividerLight"
+      class="sticky z-10 flex overflow-x-auto border-b bg-primary top-lowerTertiaryStickyFold border-dividerLight"
     >
       <div
         class="inline-flex items-center flex-1 bg-primaryLight border-divider text-secondaryDark"
@@ -89,7 +89,7 @@
     <div ref="jsonResponse" class="flex flex-col flex-1 h-auto h-full"></div>
     <div
       v-if="outlinePath"
-      class="sticky bottom-0 z-10 flex px-2 overflow-auto border-t bg-primaryLight border-dividerLight flex-nowrap"
+      class="sticky bottom-0 z-10 flex px-2 overflow-auto overflow-x-auto border-t bg-primaryLight border-dividerLight flex-nowrap"
     >
       <div
         v-for="(item, index) in outlinePath"
diff --git a/packages/hoppscotch-app/src/components/lenses/renderers/PDFLensRenderer.vue b/packages/hoppscotch-app/src/components/lenses/renderers/PDFLensRenderer.vue
index 24b9d0d2f..078f50d36 100644
--- a/packages/hoppscotch-app/src/components/lenses/renderers/PDFLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/PDFLensRenderer.vue
@@ -1,9 +1,9 @@
 <template>
   <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"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
         {{ t("response.body") }}
       </label>
       <div class="flex">
diff --git a/packages/hoppscotch-app/src/components/lenses/renderers/RawLensRenderer.vue b/packages/hoppscotch-app/src/components/lenses/renderers/RawLensRenderer.vue
index 8fa00d86a..2eedb3107 100644
--- a/packages/hoppscotch-app/src/components/lenses/renderers/RawLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/RawLensRenderer.vue
@@ -1,9 +1,9 @@
 <template>
   <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"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
         {{ t("response.body") }}
       </label>
       <div class="flex">
@@ -62,7 +62,7 @@ import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 const t = useI18n()
 
 const props = defineProps<{
-  response: HoppRESTResponse
+  response: HoppRESTResponse & { type: "success" | "fail" }
 }>()
 
 const { responseBodyText } = useResponseBody(props.response)
diff --git a/packages/hoppscotch-app/src/components/lenses/renderers/XMLLensRenderer.vue b/packages/hoppscotch-app/src/components/lenses/renderers/XMLLensRenderer.vue
index e8df92340..906034e83 100644
--- a/packages/hoppscotch-app/src/components/lenses/renderers/XMLLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/XMLLensRenderer.vue
@@ -1,9 +1,9 @@
 <template>
   <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"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
         {{ t("response.body") }}
       </label>
       <div class="flex">
@@ -42,6 +42,11 @@
 <script setup lang="ts">
 import IconWrapText from "~icons/lucide/wrap-text"
 import { computed, ref, reactive } from "vue"
+import { flow, pipe } from "fp-ts/function"
+import * as S from "fp-ts/string"
+import * as RNEA from "fp-ts/ReadonlyNonEmptyArray"
+import * as A from "fp-ts/Array"
+import * as O from "fp-ts/Option"
 import { useCodemirror } from "@composables/codemirror"
 import type { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 import { useI18n } from "@composables/i18n"
@@ -52,23 +57,31 @@ import {
 } from "@composables/lens-actions"
 import { defineActionHandler } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
+import { objFieldMatches } from "~/helpers/functional/object"
 
 const t = useI18n()
 
 const props = defineProps<{
-  response: HoppRESTResponse
+  response: HoppRESTResponse & { type: "success" | "fail" }
 }>()
 
 const { responseBodyText } = useResponseBody(props.response)
 
-const responseType = computed(() => {
-  return (
-    props.response.headers.find((h) => h.key.toLowerCase() === "content-type")
-      .value || ""
+const responseType = computed(() =>
+  pipe(
+    props.response,
+    O.fromPredicate(objFieldMatches("type", ["fail", "success"] as const)),
+    O.chain(
+      // Try getting content-type
+      flow(
+        (res) => res.headers,
+        A.findFirst((h) => h.key.toLowerCase() === "content-type"),
+        O.map(flow((h) => h.value, S.split(";"), RNEA.head, S.toLowerCase))
+      )
+    ),
+    O.getOrElse(() => "text/plain")
   )
-    .split(";")[0]
-    .toLowerCase()
-})
+)
 
 const { downloadIcon, downloadResponse } = useDownloadResponse(
   responseType.value,
diff --git a/packages/hoppscotch-app/src/components/realtime/Communication.vue b/packages/hoppscotch-app/src/components/realtime/Communication.vue
index 33916ed67..eedd9b27d 100644
--- a/packages/hoppscotch-app/src/components/realtime/Communication.vue
+++ b/packages/hoppscotch-app/src/components/realtime/Communication.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-col flex-1">
     <div
       v-if="showEventField"
-      class="sticky z-10 flex items-center justify-center border-b bg-primary border-dividerLight"
+      class="sticky z-10 flex items-center justify-center overflow-x-auto border-b bg-primary border-dividerLight"
       :class="eventFieldStyles"
     >
       <icon-lucide-rss class="mx-4 svg-icons text-accentLight" />
@@ -17,11 +17,11 @@
       />
     </div>
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
       :class="stickyHeaderStyles"
     >
       <span class="flex items-center">
-        <label class="font-semibold text-secondaryLight">
+        <label class="font-semibold truncate text-secondaryLight">
           {{ t("websocket.message") }}
         </label>
         <tippy
diff --git a/packages/hoppscotch-app/src/components/realtime/ConnectionConfig.vue b/packages/hoppscotch-app/src/components/realtime/ConnectionConfig.vue
index f55d90661..a880e8c5c 100644
--- a/packages/hoppscotch-app/src/components/realtime/ConnectionConfig.vue
+++ b/packages/hoppscotch-app/src/components/realtime/ConnectionConfig.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between py-2 pl-4 pr-2 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
+      class="sticky z-10 flex items-center justify-between py-2 pl-4 pr-2 overflow-x-auto border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
     >
       <span class="flex items-center">
-        <label class="font-semibold text-secondaryLight">
+        <label class="font-semibold truncate text-secondaryLight">
           {{ t("mqtt.connection_config") }}
         </label>
       </span>
@@ -58,7 +58,7 @@
           class="flex items-center justify-between px-4 border-b border-dividerLight"
         >
           <div class="flex items-center">
-            <label class="font-semibold text-secondaryLight">
+            <label class="font-semibold truncate text-secondaryLight">
               {{ t("mqtt.lw_qos") }}
             </label>
             <tippy interactive trigger="click" theme="popover">
diff --git a/packages/hoppscotch-app/src/components/realtime/Log.vue b/packages/hoppscotch-app/src/components/realtime/Log.vue
index 2510a08cd..d2224bb65 100644
--- a/packages/hoppscotch-app/src/components/realtime/Log.vue
+++ b/packages/hoppscotch-app/src/components/realtime/Log.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="flex flex-col flex-1 overflow-auto whitespace-nowrap">
     <div
-      class="sticky top-0 z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
+      class="sticky top-0 z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
     >
-      <label for="log" class="font-semibold text-secondaryLight">
+      <label for="log" class="font-semibold truncate text-secondaryLight">
         {{ title }}
       </label>
       <div class="flex">
diff --git a/packages/hoppscotch-app/src/components/realtime/LogEntry.vue b/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
index 3198d06d5..23c979664 100644
--- a/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
+++ b/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
@@ -23,7 +23,7 @@
             </span>
           </div>
           <div
-            class="items-center flex-1 min-w-0 p-2 inline-grid"
+            class="inline-grid items-center flex-1 min-w-0 p-2"
             @click="toggleExpandPayload()"
           >
             <div class="truncate">
@@ -61,7 +61,7 @@
       <div
         class="z-10 flex items-center justify-between pl-4 border-b border-dividerLight top-lowerSecondaryStickyFold"
       >
-        <label class="font-semibold text-secondaryLight">
+        <label class="font-semibold truncate text-secondaryLight">
           {{ t("response.body") }}
         </label>
         <div class="flex">
@@ -89,7 +89,7 @@
       <div ref="editor"></div>
       <div
         v-if="outlinePath && selectedTab === 'json'"
-        class="sticky bottom-0 z-10 flex px-2 overflow-auto border-t bg-primaryLight border-dividerLight flex-nowrap"
+        class="sticky bottom-0 z-10 flex px-2 overflow-auto overflow-x-auto border-t bg-primaryLight border-dividerLight flex-nowrap"
       >
         <div
           v-for="(item, index) in outlinePath"
diff --git a/packages/hoppscotch-app/src/components/smart/ChangeLanguage.vue b/packages/hoppscotch-app/src/components/smart/ChangeLanguage.vue
index 07a636aca..60c90fbb2 100644
--- a/packages/hoppscotch-app/src/components/smart/ChangeLanguage.vue
+++ b/packages/hoppscotch-app/src/components/smart/ChangeLanguage.vue
@@ -18,7 +18,7 @@
       </span>
       <template #content="{ hide }">
         <div class="flex flex-col space-y-2">
-          <div class="sticky top-0">
+          <div class="sticky top-0 overflow-x-auto">
             <input
               v-model="searchQuery"
               type="search"
diff --git a/packages/hoppscotch-app/src/components/smart/Expand.vue b/packages/hoppscotch-app/src/components/smart/Expand.vue
index cc305a0c0..fa29a8dbd 100644
--- a/packages/hoppscotch-app/src/components/smart/Expand.vue
+++ b/packages/hoppscotch-app/src/components/smart/Expand.vue
@@ -1,10 +1,12 @@
 <template>
   <div
-    class="relative flex flex-col overflow-hidden space-y-2"
+    class="relative flex flex-col space-y-2 overflow-hidden"
     :class="expand ? 'h-full' : 'max-h-32'"
   >
     <slot name="body"></slot>
-    <div class="sticky inset-x-0 bottom-0 flex items-center justify-center">
+    <div
+      class="sticky inset-x-0 bottom-0 flex items-center justify-center overflow-x-auto"
+    >
       <ButtonSecondary
         :icon="expand ? IconChevronUp : IconChevronDown"
         :label="expand ? t('action.less') : t('action.more')"
diff --git a/packages/hoppscotch-app/src/components/smart/Windows.vue b/packages/hoppscotch-app/src/components/smart/Windows.vue
index ef1db4ba9..4f8716bfc 100644
--- a/packages/hoppscotch-app/src/components/smart/Windows.vue
+++ b/packages/hoppscotch-app/src/components/smart/Windows.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="flex flex-col flex-1 h-auto overflow-y-hidden flex-nowrap">
-    <div class="relative sticky top-0 z-10 tabs bg-primaryLight">
+    <div
+      class="relative sticky top-0 z-10 overflow-x-auto tabs bg-primaryLight"
+    >
       <div class="flex flex-1 w-0 overflow-x-auto">
         <div class="flex justify-between divide-x divide-dividerLight">
           <div class="flex">
@@ -48,7 +50,9 @@
               </template>
             </draggable>
           </div>
-          <div class="sticky right-0 flex items-center justify-center z-8">
+          <div
+            class="sticky right-0 flex items-center justify-center overflow-x-auto z-8"
+          >
             <slot name="actions">
               <span
                 v-if="canAddNewTab"
diff --git a/packages/hoppscotch-app/src/components/teams/Edit.vue b/packages/hoppscotch-app/src/components/teams/Edit.vue
index 948897ea5..43fa8a314 100644
--- a/packages/hoppscotch-app/src/components/teams/Edit.vue
+++ b/packages/hoppscotch-app/src/components/teams/Edit.vue
@@ -47,7 +47,7 @@
             E.isRight(teamDetails.data) &&
             teamDetails.data.right.team.teamMembers
           "
-          class="border rounded divide-y divide-dividerLight border-divider"
+          class="border rounded border-divider"
         >
           <div
             v-if="teamDetails.data.right.team.teamMembers === 0"
@@ -72,7 +72,7 @@
               "
             />
           </div>
-          <div v-else>
+          <div v-else class="divide-y divide-dividerLight">
             <div
               v-for="(member, index) in membersList"
               :key="`member-${index}`"
diff --git a/packages/hoppscotch-app/src/components/teams/Invite.vue b/packages/hoppscotch-app/src/components/teams/Invite.vue
index 631c71cf2..40750f702 100644
--- a/packages/hoppscotch-app/src/components/teams/Invite.vue
+++ b/packages/hoppscotch-app/src/components/teams/Invite.vue
@@ -58,6 +58,7 @@
           <div v-else>
             <div
               v-if="!pendingInvites.loading && E.isRight(pendingInvites.data)"
+              class="divide-y divide-dividerLight"
             >
               <div
                 v-for="(invitee, index) in pendingInvites.data.right.team
diff --git a/packages/hoppscotch-app/src/helpers/shortcuts.ts b/packages/hoppscotch-app/src/helpers/shortcuts.ts
index d99ab0a04..67c31d2b7 100644
--- a/packages/hoppscotch-app/src/helpers/shortcuts.ts
+++ b/packages/hoppscotch-app/src/helpers/shortcuts.ts
@@ -34,7 +34,7 @@ export default [
     section: "shortcut.request.title",
     shortcuts: [
       {
-        keys: [getPlatformSpecialKey(), "Enter"],
+        keys: [getPlatformSpecialKey(), "↩"],
         label: "shortcut.request.send_request",
       },
       {
diff --git a/packages/hoppscotch-app/src/pages/realtime.vue b/packages/hoppscotch-app/src/pages/realtime.vue
index e4bc0d9ee..a1c77e293 100644
--- a/packages/hoppscotch-app/src/pages/realtime.vue
+++ b/packages/hoppscotch-app/src/pages/realtime.vue
@@ -1,7 +1,7 @@
 <template>
   <SmartTabs
     v-model="currentTab"
-    styles="sticky bg-primary top-0 z-10"
+    styles="sticky overflow-x-auto bg-primary top-0 z-10"
     content-styles="h-[calc(100%-var(--sidebar-primary-sticky-fold)-1px)] !flex"
   >
     <SmartTab
diff --git a/packages/hoppscotch-app/src/pages/realtime/mqtt.vue b/packages/hoppscotch-app/src/pages/realtime/mqtt.vue
index 8538d11ac..102ef40ab 100644
--- a/packages/hoppscotch-app/src/pages/realtime/mqtt.vue
+++ b/packages/hoppscotch-app/src/pages/realtime/mqtt.vue
@@ -2,7 +2,7 @@
   <AppPaneLayout layout-id="mqtt">
     <template #primary>
       <div
-        class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
+        class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
       >
         <div class="inline-flex flex-1 space-x-2">
           <div class="flex flex-1">
@@ -116,7 +116,7 @@
     </template>
     <template #sidebar>
       <div
-        class="sticky z-10 flex flex-col border-b rounded-t divide-y divide-dividerLight bg-primary border-dividerLight"
+        class="sticky z-10 flex flex-col overflow-x-auto border-b divide-y rounded-t divide-dividerLight bg-primary border-dividerLight"
       >
         <div class="flex justify-between flex-1">
           <ButtonSecondary
@@ -174,7 +174,7 @@
               />
             </span>
             <span
-              class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
+              class="flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer group-hover:text-secondaryDark"
               @click="openTopicAsTab(topic)"
             >
               <span class="truncate">
diff --git a/packages/hoppscotch-app/src/pages/realtime/socketio.vue b/packages/hoppscotch-app/src/pages/realtime/socketio.vue
index 0e385b0e7..973f8e526 100644
--- a/packages/hoppscotch-app/src/pages/realtime/socketio.vue
+++ b/packages/hoppscotch-app/src/pages/realtime/socketio.vue
@@ -2,7 +2,7 @@
   <AppPaneLayout layout-id="socketio">
     <template #primary>
       <div
-        class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
+        class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
       >
         <div class="inline-flex flex-1 space-x-2">
           <div class="flex flex-1">
@@ -95,7 +95,7 @@
       </div>
       <SmartTabs
         v-model="selectedTab"
-        styles="sticky bg-primary top-upperPrimaryStickyFold z-10"
+        styles="sticky overflow-x-auto bg-primary top-upperPrimaryStickyFold z-10"
         render-inactive-tabs
       >
         <SmartTab
@@ -113,10 +113,10 @@
         </SmartTab>
         <SmartTab :id="'protocols'" :label="`${t('request.authorization')}`">
           <div
-            class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+            class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
           >
             <span class="flex items-center">
-              <label class="font-semibold text-secondaryLight">
+              <label class="font-semibold truncate text-secondaryLight">
                 {{ t("authorization.type") }}
               </label>
               <tippy
@@ -220,7 +220,7 @@
               </div>
             </div>
             <div
-              class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
+              class="sticky h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
             >
               <div class="p-2">
                 <div class="pb-2 text-secondaryLight">
diff --git a/packages/hoppscotch-app/src/pages/realtime/websocket.vue b/packages/hoppscotch-app/src/pages/realtime/websocket.vue
index 14b130359..8c865b0c4 100644
--- a/packages/hoppscotch-app/src/pages/realtime/websocket.vue
+++ b/packages/hoppscotch-app/src/pages/realtime/websocket.vue
@@ -2,7 +2,7 @@
   <AppPaneLayout layout-id="websocket">
     <template #primary>
       <div
-        class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
+        class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
       >
         <div class="inline-flex flex-1 space-x-2">
           <input
@@ -39,7 +39,7 @@
       </div>
       <SmartTabs
         v-model="selectedTab"
-        styles="sticky bg-primary top-upperPrimaryStickyFold z-10"
+        styles="sticky overflow-x-auto bg-primary top-upperPrimaryStickyFold z-10"
         render-inactive-tabs
       >
         <SmartTab
@@ -54,9 +54,9 @@
         </SmartTab>
         <SmartTab :id="'protocols'" :label="`${t('websocket.protocols')}`">
           <div
-            class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+            class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
           >
-            <label class="font-semibold text-secondaryLight">
+            <label class="font-semibold truncate text-secondaryLight">
               {{ t("websocket.protocols") }}
             </label>
             <div class="flex">