From ccca183e085b984f1f65f110e945b50811c68d86 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Thu, 1 Dec 2022 17:47:39 +0530
Subject: [PATCH] chore: minor ui improvements

---
 packages/hoppscotch-app/src/components.d.ts   |  1 +
 .../src/components/app/Header.vue             |  2 +-
 .../src/components/app/Shortcuts.vue          |  4 +++-
 .../components/collections/graphql/index.vue  |  2 +-
 .../src/components/collections/index.vue      |  2 +-
 .../src/components/environments/index.vue     |  2 +-
 .../src/components/environments/my/index.vue  |  2 +-
 .../components/environments/teams/index.vue   |  2 +-
 .../src/components/graphql/Authorization.vue  |  4 ++--
 .../src/components/graphql/RequestOptions.vue |  8 +++----
 .../src/components/graphql/Response.vue       |  2 +-
 .../src/components/graphql/Sidebar.vue        | 10 ++++----
 .../src/components/history/index.vue          |  2 +-
 .../src/components/http/Authorization.vue     |  4 ++--
 .../src/components/http/Body.vue              |  2 +-
 .../src/components/http/BodyParameters.vue    |  2 +-
 .../src/components/http/CodegenModal.vue      |  2 +-
 .../src/components/http/Headers.vue           |  2 +-
 .../src/components/http/Parameters.vue        |  2 +-
 .../src/components/http/PreRequestScript.vue  |  4 ++--
 .../src/components/http/RawBody.vue           |  2 +-
 .../src/components/http/Request.vue           |  2 +-
 .../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/TestResultEntry.vue   |  8 +++++--
 .../src/components/http/TestResultEnv.vue     |  6 +++--
 .../src/components/http/Tests.vue             |  4 ++--
 .../src/components/http/URLEncodedParams.vue  |  2 +-
 .../src/components/lenses/HeadersRenderer.vue |  2 +-
 .../lenses/ResponseBodyRenderer.vue           |  2 +-
 .../lenses/renderers/HTMLLensRenderer.vue     |  2 +-
 .../lenses/renderers/ImageLensRenderer.vue    |  2 +-
 .../lenses/renderers/JSONLensRenderer.vue     |  6 ++---
 .../lenses/renderers/PDFLensRenderer.vue      |  2 +-
 .../lenses/renderers/RawLensRenderer.vue      |  2 +-
 .../lenses/renderers/XMLLensRenderer.vue      |  2 +-
 .../src/components/realtime/Communication.vue |  4 ++--
 .../components/realtime/ConnectionConfig.vue  |  2 +-
 .../src/components/realtime/Log.vue           | 23 +++++++++++--------
 .../src/components/realtime/LogEntry.vue      |  2 +-
 .../src/components/smart/ChangeLanguage.vue   |  2 +-
 .../src/components/smart/Expand.vue           |  2 +-
 .../src/components/smart/Windows.vue          |  8 +++----
 packages/hoppscotch-app/src/pages/profile.vue |  8 +++++--
 .../hoppscotch-app/src/pages/realtime.vue     |  2 +-
 .../src/pages/realtime/mqtt.vue               |  2 +-
 .../src/pages/realtime/socketio.vue           |  6 ++---
 .../src/pages/realtime/websocket.vue          |  4 ++--
 50 files changed, 103 insertions(+), 81 deletions(-)

diff --git a/packages/hoppscotch-app/src/components.d.ts b/packages/hoppscotch-app/src/components.d.ts
index d90e016f..c7841477 100644
--- a/packages/hoppscotch-app/src/components.d.ts
+++ b/packages/hoppscotch-app/src/components.d.ts
@@ -112,6 +112,7 @@ declare module '@vue/runtime-core' {
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUser: typeof import('~icons/lucide/user')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
+    IconLucideVerified: typeof import('~icons/lucide/verified')['default']
     LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
     LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']
     LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default']
diff --git a/packages/hoppscotch-app/src/components/app/Header.vue b/packages/hoppscotch-app/src/components/app/Header.vue
index 3deaa977..caeb28ee 100644
--- a/packages/hoppscotch-app/src/components/app/Header.vue
+++ b/packages/hoppscotch-app/src/components/app/Header.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <header
-      class="flex items-center justify-between flex-1 px-2 py-2 overflow-x-auto overflow-y-hidden space-x-2"
+      class="flex items-center justify-between flex-1 flex-shrink-0 px-2 py-2 space-x-2 overflow-x-auto overflow-y-hidden"
     >
       <div class="inline-flex items-center space-x-2">
         <ButtonSecondary
diff --git a/packages/hoppscotch-app/src/components/app/Shortcuts.vue b/packages/hoppscotch-app/src/components/app/Shortcuts.vue
index 7d347936..ec8c5c00 100644
--- a/packages/hoppscotch-app/src/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-app/src/components/app/Shortcuts.vue
@@ -1,7 +1,9 @@
 <template>
   <SmartSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
     <template #content>
-      <div class="sticky top-0 z-10 flex flex-col overflow-x-auto bg-primary">
+      <div
+        class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
+      >
         <div class="flex flex-col px-6 py-4 border-b border-dividerLight">
           <input
             v-model="filterText"
diff --git a/packages/hoppscotch-app/src/components/collections/graphql/index.vue b/packages/hoppscotch-app/src/components/collections/graphql/index.vue
index 76c14dd0..520a7b31 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 overflow-x-auto border-b divide-y divide-dividerLight border-dividerLight"
+      class="sticky top-0 z-10 flex flex-col flex-shrink-0 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 b86975ea..0ed8a3db 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 overflow-x-auto border-b rounded-t bg-primary border-dividerLight"
+      class="sticky z-10 flex flex-col flex-shrink-0 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 9f0d33fa..bcc0b1c0 100644
--- a/packages/hoppscotch-app/src/components/environments/index.vue
+++ b/packages/hoppscotch-app/src/components/environments/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="sticky top-0 z-10 flex flex-col overflow-x-auto rounded-t bg-primary"
+      class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto rounded-t bg-primary"
     >
       <tippy
         v-if="environmentType.type === 'my-environments'"
diff --git a/packages/hoppscotch-app/src/components/environments/my/index.vue b/packages/hoppscotch-app/src/components/environments/my/index.vue
index ac376dd2..b48390e6 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 overflow-x-auto border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
+      class="sticky z-10 flex justify-between flex-1 flex-shrink-0 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 8f830103..f3557660 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 overflow-x-auto border-b top-upperSecondaryStickyFold border-dividerLight bg-primary"
+      class="sticky z-10 flex justify-between flex-1 flex-shrink-0 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 4c7baa21..f6b4784a 100644
--- a/packages/hoppscotch-app/src/components/graphql/Authorization.vue
+++ b/packages/hoppscotch-app/src/components/graphql/Authorization.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
     >
       <span class="flex items-center">
         <label class="font-semibold truncate text-secondaryLight">
@@ -224,7 +224,7 @@
         </div>
       </div>
       <div
-        class="sticky h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
+        class="sticky flex-shrink-0 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 67720f39..0dcee691 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 overflow-x-auto bg-primary top-upperPrimaryStickyFold z-10"
+      styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-upperPrimaryStickyFold z-10"
       render-inactive-tabs
     >
       <SmartTab
@@ -11,7 +11,7 @@
         :indicator="gqlQueryString && gqlQueryString.length > 0 ? true : false"
       >
         <div
-          class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery"
+          class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery"
         >
           <label class="font-semibold truncate text-secondaryLight">
             {{ t("request.query") }}
@@ -79,7 +79,7 @@
         :indicator="variableString && variableString.length > 0 ? true : false"
       >
         <div
-          class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+          class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
         >
           <label class="font-semibold truncate text-secondaryLight">
             {{ t("request.variables") }}
@@ -129,7 +129,7 @@
         :info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
       >
         <div
-          class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+          class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
         >
           <label class="font-semibold truncate text-secondaryLight">
             {{ t("tab.headers") }}
diff --git a/packages/hoppscotch-app/src/components/graphql/Response.vue b/packages/hoppscotch-app/src/components/graphql/Response.vue
index f00ed5b8..2826fcf2 100644
--- a/packages/hoppscotch-app/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-app/src/components/graphql/Response.vue
@@ -9,7 +9,7 @@
     </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 overflow-x-auto border-b bg-primary border-dividerLight"
+        class="sticky top-0 z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
       >
         <label class="font-semibold truncate text-secondaryLight">
           {{ t("response.title") }}
diff --git a/packages/hoppscotch-app/src/components/graphql/Sidebar.vue b/packages/hoppscotch-app/src/components/graphql/Sidebar.vue
index 65d0fa40..d8aa1fff 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 overflow-x-auto bg-primary z-10 top-0"
+    styles="sticky overflow-x-auto flex-shrink-0 bg-primary z-10 top-0"
     vertical
     render-inactive-tabs
   >
@@ -40,7 +40,9 @@
         </span>
       </div>
       <div v-else>
-        <div class="sticky top-0 z-10 flex overflow-x-auto bg-primary">
+        <div
+          class="sticky top-0 z-10 flex flex-shrink-0 overflow-x-auto bg-primary"
+        >
           <input
             v-model="graphqlFieldsFilterText"
             type="search"
@@ -60,7 +62,7 @@
         </div>
         <SmartTabs
           v-model="selectedGqlTab"
-          styles="border-t border-b border-dividerLight bg-primary sticky overflow-x-auto z-10 top-sidebarPrimaryStickyFold"
+          styles="border-t border-b border-dividerLight bg-primary sticky overflow-x-auto flex-shrink-0 z-10 top-sidebarPrimaryStickyFold"
           render-inactive-tabs
         >
           <SmartTab
@@ -127,7 +129,7 @@
     <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 overflow-x-auto border-b bg-primary border-dividerLight"
+        class="sticky top-0 z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
       >
         <label class="font-semibold truncate text-secondaryLight">
           {{ t("graphql.schema") }}
diff --git a/packages/hoppscotch-app/src/components/history/index.vue b/packages/hoppscotch-app/src/components/history/index.vue
index cbff8037..1e302f08 100644
--- a/packages/hoppscotch-app/src/components/history/index.vue
+++ b/packages/hoppscotch-app/src/components/history/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="sticky top-0 z-10 flex overflow-x-auto border-b bg-primary border-dividerLight"
+      class="sticky top-0 z-10 flex flex-shrink-0 overflow-x-auto border-b bg-primary border-dividerLight"
     >
       <input
         v-model="filterText"
diff --git a/packages/hoppscotch-app/src/components/http/Authorization.vue b/packages/hoppscotch-app/src/components/http/Authorization.vue
index 32205639..6c08cd23 100644
--- a/packages/hoppscotch-app/src/components/http/Authorization.vue
+++ b/packages/hoppscotch-app/src/components/http/Authorization.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      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"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 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 truncate text-secondaryLight">
@@ -221,7 +221,7 @@
         </div>
       </div>
       <div
-        class="sticky h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
+        class="sticky flex-shrink-0 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 2c5faf79..0252f3ad 100644
--- a/packages/hoppscotch-app/src/components/http/Body.vue
+++ b/packages/hoppscotch-app/src/components/http/Body.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      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"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 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 truncate text-secondaryLight">
diff --git a/packages/hoppscotch-app/src/components/http/BodyParameters.vue b/packages/hoppscotch-app/src/components/http/BodyParameters.vue
index 048fcc9f..af0a2395 100644
--- a/packages/hoppscotch-app/src/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-app/src/components/http/BodyParameters.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      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"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
     >
       <label class="font-semibold truncate text-secondaryLight">
         {{ t("request.body") }}
diff --git a/packages/hoppscotch-app/src/components/http/CodegenModal.vue b/packages/hoppscotch-app/src/components/http/CodegenModal.vue
index 6400470c..9531eb7e 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 overflow-x-auto">
+              <div class="sticky top-0 flex-shrink-0 overflow-x-auto">
                 <input
                   v-model="searchQuery"
                   type="search"
diff --git a/packages/hoppscotch-app/src/components/http/Headers.vue b/packages/hoppscotch-app/src/components/http/Headers.vue
index 081de489..953e8d8a 100644
--- a/packages/hoppscotch-app/src/components/http/Headers.vue
+++ b/packages/hoppscotch-app/src/components/http/Headers.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      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"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
       <label class="font-semibold truncate text-secondaryLight">
         {{ t("request.header_list") }}
diff --git a/packages/hoppscotch-app/src/components/http/Parameters.vue b/packages/hoppscotch-app/src/components/http/Parameters.vue
index 2d55423a..3dfbdf5f 100644
--- a/packages/hoppscotch-app/src/components/http/Parameters.vue
+++ b/packages/hoppscotch-app/src/components/http/Parameters.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      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"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
       <label class="font-semibold truncate text-secondaryLight">
         {{ t("request.parameter_list") }}
diff --git a/packages/hoppscotch-app/src/components/http/PreRequestScript.vue b/packages/hoppscotch-app/src/components/http/PreRequestScript.vue
index 441b342c..d9453bd6 100644
--- a/packages/hoppscotch-app/src/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-app/src/components/http/PreRequestScript.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      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"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
       <label class="font-semibold truncate text-secondaryLight">
         {{ t("preRequest.javascript_code") }}
@@ -34,7 +34,7 @@
         <div ref="preRequestEditor" class="h-full"></div>
       </div>
       <div
-        class="sticky h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
+        class="sticky flex-shrink-0 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 ae94d398..8d3225a6 100644
--- a/packages/hoppscotch-app/src/components/http/RawBody.vue
+++ b/packages/hoppscotch-app/src/components/http/RawBody.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      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"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
     >
       <label class="font-semibold truncate text-secondaryLight">
         {{ t("request.raw_body") }}
diff --git a/packages/hoppscotch-app/src/components/http/Request.vue b/packages/hoppscotch-app/src/components/http/Request.vue
index b849e170..c73db255 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 overflow-x-auto sm:flex sm:flex-shrink-0 sm:space-x-2 bg-primary"
+    class="sticky top-0 z-20 flex-none flex-shrink-0 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"
diff --git a/packages/hoppscotch-app/src/components/http/RequestOptions.vue b/packages/hoppscotch-app/src/components/http/RequestOptions.vue
index b4517ecb..0f9527cb 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 overflow-x-auto bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
+    styles="sticky overflow-x-auto flex-shrink-0 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 eaa26cfd..79a71b33 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 overflow-x-auto bg-primary whitespace-nowrap"
+    class="sticky top-0 z-10 flex items-start justify-center flex-shrink-0 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 b47dcb7f..e102c141 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 overflow-x-auto bg-primary z-10 top-0"
+    styles="sticky overflow-x-auto flex-shrink-0 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 28b346bc..c80c9ded 100644
--- a/packages/hoppscotch-app/src/components/http/TestResult.vue
+++ b/packages/hoppscotch-app/src/components/http/TestResult.vue
@@ -9,7 +9,7 @@
       "
     >
       <div
-        class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
+        class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
       >
         <label class="font-semibold truncate text-secondaryLight">
           {{ t("test.report") }}
@@ -118,7 +118,9 @@
             :key="`result-${index}`"
             class="flex items-center px-4 py-2"
           >
-            <div class="flex items-center flex-shrink overflow-x-auto">
+            <div
+              class="flex items-center flex-shrink flex-shrink-0 overflow-x-auto"
+            >
               <component
                 :is="result.status === 'pass' ? IconCheck : IconClose"
                 class="mr-4 svg-icons"
@@ -127,7 +129,7 @@
                 "
               />
               <div
-                class="flex items-center flex-shrink space-x-2 overflow-x-auto"
+                class="flex items-center flex-shrink flex-shrink-0 space-x-2 overflow-x-auto"
               >
                 <span
                   v-if="result.message"
diff --git a/packages/hoppscotch-app/src/components/http/TestResultEntry.vue b/packages/hoppscotch-app/src/components/http/TestResultEntry.vue
index 680ee5fd..8eff2dc4 100644
--- a/packages/hoppscotch-app/src/components/http/TestResultEntry.vue
+++ b/packages/hoppscotch-app/src/components/http/TestResultEntry.vue
@@ -16,7 +16,9 @@
         :key="`result-${index}`"
         class="flex items-center px-4 py-2"
       >
-        <div class="flex items-center flex-shrink overflow-x-auto">
+        <div
+          class="flex items-center flex-shrink flex-shrink-0 overflow-x-auto"
+        >
           <component
             :is="result.status === 'pass' ? IconCheck : IconClose"
             class="mr-4 svg-icons"
@@ -24,7 +26,9 @@
               result.status === 'pass' ? 'text-green-500' : 'text-red-500'
             "
           />
-          <div class="flex items-center flex-shrink overflow-x-auto space-x-2">
+          <div
+            class="flex items-center flex-shrink flex-shrink-0 space-x-2 overflow-x-auto"
+          >
             <span v-if="result.message" class="inline-flex text-secondaryDark">
               {{ result.message }}
             </span>
diff --git a/packages/hoppscotch-app/src/components/http/TestResultEnv.vue b/packages/hoppscotch-app/src/components/http/TestResultEnv.vue
index fb90d474..2061e2f1 100644
--- a/packages/hoppscotch-app/src/components/http/TestResultEnv.vue
+++ b/packages/hoppscotch-app/src/components/http/TestResultEnv.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center justify-between px-4 py-2">
-    <div class="flex items-center flex-shrink overflow-x-auto">
+    <div class="flex items-center flex-shrink flex-shrink-0 overflow-x-auto">
       <component
         :is="getIcon(status)"
         v-tippy="{ theme: 'tooltip' }"
@@ -8,7 +8,9 @@
         :class="getStyle(status)"
         :title="`${t(getTooltip(status))}`"
       />
-      <div class="flex items-center flex-shrink overflow-x-auto space-x-2">
+      <div
+        class="flex items-center flex-shrink flex-shrink-0 space-x-2 overflow-x-auto"
+      >
         <span class="inline-flex text-secondaryDark">
           {{ env.key }}
         </span>
diff --git a/packages/hoppscotch-app/src/components/http/Tests.vue b/packages/hoppscotch-app/src/components/http/Tests.vue
index a84d138e..f27079c9 100644
--- a/packages/hoppscotch-app/src/components/http/Tests.vue
+++ b/packages/hoppscotch-app/src/components/http/Tests.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      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"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
     >
       <label class="font-semibold truncate text-secondaryLight">
         {{ t("test.javascript_code") }}
@@ -34,7 +34,7 @@
         <div ref="testScriptEditor" class="h-full"></div>
       </div>
       <div
-        class="sticky h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
+        class="sticky flex-shrink-0 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 768c7ae2..2ab1ad4f 100644
--- a/packages/hoppscotch-app/src/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-app/src/components/http/URLEncodedParams.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      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"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
     >
       <label class="font-semibold truncate text-secondaryLight">
         {{ t("request.body") }}
diff --git a/packages/hoppscotch-app/src/components/lenses/HeadersRenderer.vue b/packages/hoppscotch-app/src/components/lenses/HeadersRenderer.vue
index c6cc4b01..5f196342 100644
--- a/packages/hoppscotch-app/src/components/lenses/HeadersRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/HeadersRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
       <label class="font-semibold truncate text-secondaryLight">
         {{ t("request.header_list") }}
diff --git a/packages/hoppscotch-app/src/components/lenses/ResponseBodyRenderer.vue b/packages/hoppscotch-app/src/components/lenses/ResponseBodyRenderer.vue
index 3854d121..ca24cc3b 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 overflow-x-auto z-10 bg-primary top-lowerPrimaryStickyFold"
+    styles="sticky overflow-x-auto flex-shrink-0 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 8e91e83f..86b29db1 100644
--- a/packages/hoppscotch-app/src/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/HTMLLensRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
       <label class="font-semibold truncate text-secondaryLight">
         {{ t("response.body") }}
diff --git a/packages/hoppscotch-app/src/components/lenses/renderers/ImageLensRenderer.vue b/packages/hoppscotch-app/src/components/lenses/renderers/ImageLensRenderer.vue
index 82a4a70a..bcbf8c1b 100644
--- a/packages/hoppscotch-app/src/components/lenses/renderers/ImageLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/ImageLensRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
       <label class="font-semibold truncate text-secondaryLight">
         {{ t("response.body") }}
diff --git a/packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue
index 4e8d1a61..c85a9de2 100644
--- a/packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue
@@ -4,7 +4,7 @@
     class="flex flex-col flex-1"
   >
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
       <label class="font-semibold truncate text-secondaryLight">
         {{ t("response.body") }}
@@ -48,7 +48,7 @@
     </div>
     <div
       v-if="toggleFilter"
-      class="sticky z-10 flex overflow-x-auto border-b bg-primary top-lowerTertiaryStickyFold border-dividerLight"
+      class="sticky z-10 flex flex-shrink-0 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 overflow-x-auto border-t bg-primaryLight border-dividerLight flex-nowrap"
+      class="sticky bottom-0 z-10 flex flex-shrink-0 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 078f50d3..b3ce29b5 100644
--- a/packages/hoppscotch-app/src/components/lenses/renderers/PDFLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/PDFLensRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
       <label class="font-semibold truncate text-secondaryLight">
         {{ t("response.body") }}
diff --git a/packages/hoppscotch-app/src/components/lenses/renderers/RawLensRenderer.vue b/packages/hoppscotch-app/src/components/lenses/renderers/RawLensRenderer.vue
index 2eedb310..7668d402 100644
--- a/packages/hoppscotch-app/src/components/lenses/renderers/RawLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/RawLensRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
       <label class="font-semibold truncate text-secondaryLight">
         {{ t("response.body") }}
diff --git a/packages/hoppscotch-app/src/components/lenses/renderers/XMLLensRenderer.vue b/packages/hoppscotch-app/src/components/lenses/renderers/XMLLensRenderer.vue
index 906034e8..6e839430 100644
--- a/packages/hoppscotch-app/src/components/lenses/renderers/XMLLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/XMLLensRenderer.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
       <label class="font-semibold truncate text-secondaryLight">
         {{ t("response.body") }}
diff --git a/packages/hoppscotch-app/src/components/realtime/Communication.vue b/packages/hoppscotch-app/src/components/realtime/Communication.vue
index eedd9b27..1f2b2a4c 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 overflow-x-auto border-b bg-primary border-dividerLight"
+      class="sticky z-10 flex items-center justify-center flex-shrink-0 overflow-x-auto border-b bg-primary border-dividerLight"
       :class="eventFieldStyles"
     >
       <icon-lucide-rss class="mx-4 svg-icons text-accentLight" />
@@ -17,7 +17,7 @@
       />
     </div>
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
       :class="stickyHeaderStyles"
     >
       <span class="flex items-center">
diff --git a/packages/hoppscotch-app/src/components/realtime/ConnectionConfig.vue b/packages/hoppscotch-app/src/components/realtime/ConnectionConfig.vue
index a880e8c5..7d90d9e1 100644
--- a/packages/hoppscotch-app/src/components/realtime/ConnectionConfig.vue
+++ b/packages/hoppscotch-app/src/components/realtime/ConnectionConfig.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1">
     <div
-      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"
+      class="sticky z-10 flex items-center justify-between flex-shrink-0 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 truncate text-secondaryLight">
diff --git a/packages/hoppscotch-app/src/components/realtime/Log.vue b/packages/hoppscotch-app/src/components/realtime/Log.vue
index d2224bb6..4cc5924b 100644
--- a/packages/hoppscotch-app/src/components/realtime/Log.vue
+++ b/packages/hoppscotch-app/src/components/realtime/Log.vue
@@ -1,7 +1,8 @@
 <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 overflow-x-auto border-b bg-primary border-dividerLight"
+      v-if="log.length !== 0"
+      class="sticky top-0 z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
     >
       <label for="log" class="font-semibold truncate text-secondaryLight">
         {{ title }}
@@ -30,7 +31,9 @@
         <ButtonSecondary
           id="bottompage"
           v-tippy="{ theme: 'tooltip' }"
-          :title="t('action.autoscroll')"
+          :title="`${t('action.autoscroll')}: ${
+            autoScrollEnabled ? t('action.turn_off') : t('action.turn_on')
+          }`"
           :icon="IconChevronsDown"
           :class="toggleAutoscrollColor"
           @click="toggleAutoscroll()"
@@ -40,14 +43,16 @@
     <div
       v-if="log.length !== 0"
       ref="logs"
-      class="flex flex-col overflow-y-auto border-b border-dividerLight"
+      class="flex flex-col flex-1 overflow-y-auto"
     >
-      <div class="flex flex-col h-full divide-y divide-dividerLight">
-        <RealtimeLogEntry
-          v-for="(entry, index) in log"
-          :key="`entry-${index}`"
-          :entry="entry"
-        />
+      <div class="border-b border-dividerLight">
+        <div class="flex flex-col divide-y divide-dividerLight">
+          <RealtimeLogEntry
+            v-for="(entry, index) in log"
+            :key="`entry-${index}`"
+            :entry="entry"
+          />
+        </div>
       </div>
     </div>
     <AppShortcutsPrompt v-else class="p-4" />
diff --git a/packages/hoppscotch-app/src/components/realtime/LogEntry.vue b/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
index 23c97966..702665ce 100644
--- a/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
+++ b/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
@@ -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 overflow-x-auto border-t bg-primaryLight border-dividerLight flex-nowrap"
+        class="sticky bottom-0 z-10 flex flex-shrink-0 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 60c90fbb..ebc9e339 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 overflow-x-auto">
+          <div class="sticky top-0 flex-shrink-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 fa29a8db..f4ee49d1 100644
--- a/packages/hoppscotch-app/src/components/smart/Expand.vue
+++ b/packages/hoppscotch-app/src/components/smart/Expand.vue
@@ -5,7 +5,7 @@
   >
     <slot name="body"></slot>
     <div
-      class="sticky inset-x-0 bottom-0 flex items-center justify-center overflow-x-auto"
+      class="sticky inset-x-0 bottom-0 flex items-center justify-center flex-shrink-0 overflow-x-auto"
     >
       <ButtonSecondary
         :icon="expand ? IconChevronUp : IconChevronDown"
diff --git a/packages/hoppscotch-app/src/components/smart/Windows.vue b/packages/hoppscotch-app/src/components/smart/Windows.vue
index 4f8716bf..d7b6272c 100644
--- a/packages/hoppscotch-app/src/components/smart/Windows.vue
+++ b/packages/hoppscotch-app/src/components/smart/Windows.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="flex flex-col flex-1 h-auto overflow-y-hidden flex-nowrap">
     <div
-      class="relative sticky top-0 z-10 overflow-x-auto tabs bg-primaryLight"
+      class="relative sticky top-0 z-10 flex-shrink-0 overflow-x-auto tabs bg-primaryLight"
     >
-      <div class="flex flex-1 w-0 overflow-x-auto">
+      <div class="flex flex-1 flex-shrink-0 w-0 overflow-x-auto">
         <div class="flex justify-between divide-x divide-dividerLight">
           <div class="flex">
             <draggable
@@ -11,7 +11,7 @@
               :list="tabEntries"
               :style="tabsWidth"
               :item-key="'window-'"
-              class="flex overflow-x-auto transition divide-x divide-dividerLight"
+              class="flex flex-shrink-0 overflow-x-auto transition divide-x divide-dividerLight"
               @sort="sortTabs"
             >
               <template #item="{ element: [tabID, tabMeta] }">
@@ -51,7 +51,7 @@
             </draggable>
           </div>
           <div
-            class="sticky right-0 flex items-center justify-center overflow-x-auto z-8"
+            class="sticky right-0 flex items-center justify-center flex-shrink-0 overflow-x-auto z-8"
           >
             <slot name="actions">
               <span
diff --git a/packages/hoppscotch-app/src/pages/profile.vue b/packages/hoppscotch-app/src/pages/profile.vue
index 3d9a92a2..8003147a 100644
--- a/packages/hoppscotch-app/src/pages/profile.vue
+++ b/packages/hoppscotch-app/src/pages/profile.vue
@@ -89,7 +89,11 @@
               <FirebaseLogout outline />
             </div>
           </div>
-          <SmartTabs v-model="selectedProfileTab" render-inactive-tabs>
+          <SmartTabs
+            v-model="selectedProfileTab"
+            styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-0 z-10"
+            render-inactive-tabs
+          >
             <SmartTab :id="'sync'" :label="t('settings.account')">
               <div class="grid grid-cols-1">
                 <section class="p-4">
@@ -195,7 +199,7 @@
                   <div class="my-1 text-secondaryLight">
                     {{ t("settings.short_codes_description") }}
                   </div>
-                  <div class="relative py-4 overflow-x-auto">
+                  <div class="relative flex-shrink-0 py-4 overflow-x-auto">
                     <div
                       v-if="loading"
                       class="flex flex-col items-center justify-center"
diff --git a/packages/hoppscotch-app/src/pages/realtime.vue b/packages/hoppscotch-app/src/pages/realtime.vue
index a1c77e29..4e4df103 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 overflow-x-auto bg-primary top-0 z-10"
+    styles="sticky overflow-x-auto flex-shrink-0 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 102ef40a..46b9c161 100644
--- a/packages/hoppscotch-app/src/pages/realtime/mqtt.vue
+++ b/packages/hoppscotch-app/src/pages/realtime/mqtt.vue
@@ -116,7 +116,7 @@
     </template>
     <template #sidebar>
       <div
-        class="sticky z-10 flex flex-col overflow-x-auto border-b divide-y rounded-t divide-dividerLight bg-primary border-dividerLight"
+        class="sticky z-10 flex flex-col flex-shrink-0 overflow-x-auto border-b divide-y rounded-t divide-dividerLight bg-primary border-dividerLight"
       >
         <div class="flex justify-between flex-1">
           <ButtonSecondary
diff --git a/packages/hoppscotch-app/src/pages/realtime/socketio.vue b/packages/hoppscotch-app/src/pages/realtime/socketio.vue
index 973f8e52..589e53f3 100644
--- a/packages/hoppscotch-app/src/pages/realtime/socketio.vue
+++ b/packages/hoppscotch-app/src/pages/realtime/socketio.vue
@@ -95,7 +95,7 @@
       </div>
       <SmartTabs
         v-model="selectedTab"
-        styles="sticky overflow-x-auto bg-primary top-upperPrimaryStickyFold z-10"
+        styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-upperPrimaryStickyFold z-10"
         render-inactive-tabs
       >
         <SmartTab
@@ -113,7 +113,7 @@
         </SmartTab>
         <SmartTab :id="'protocols'" :label="`${t('request.authorization')}`">
           <div
-            class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+            class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
           >
             <span class="flex items-center">
               <label class="font-semibold truncate text-secondaryLight">
@@ -220,7 +220,7 @@
               </div>
             </div>
             <div
-              class="sticky h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
+              class="sticky flex-shrink-0 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 8c865b0c..d4030600 100644
--- a/packages/hoppscotch-app/src/pages/realtime/websocket.vue
+++ b/packages/hoppscotch-app/src/pages/realtime/websocket.vue
@@ -39,7 +39,7 @@
       </div>
       <SmartTabs
         v-model="selectedTab"
-        styles="sticky overflow-x-auto bg-primary top-upperPrimaryStickyFold z-10"
+        styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-upperPrimaryStickyFold z-10"
         render-inactive-tabs
       >
         <SmartTab
@@ -54,7 +54,7 @@
         </SmartTab>
         <SmartTab :id="'protocols'" :label="`${t('websocket.protocols')}`">
           <div
-            class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+            class="sticky z-10 flex items-center justify-between flex-shrink-0 pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
           >
             <label class="font-semibold truncate text-secondaryLight">
               {{ t("websocket.protocols") }}