chore: minor ui improvements

2022-12-01 17:47:39 +05:30
parent 237455ab21
commit ccca183e08
50 changed files with 103 additions and 81 deletions
--- 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']
--- 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
--- 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"
--- 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
--- 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'
      "
--- 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'"
--- 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"
--- 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'"
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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"
--- 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") }}
--- 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">
--- 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") }}
--- 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"
--- 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") }}
--- 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") }}
--- 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") }}
--- 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") }}
--- 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"
--- 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
--- 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">
--- 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
  >
--- 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"
--- 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>
--- 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>
--- 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") }}
--- 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") }}
--- 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") }}
--- 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"
--- 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") }}
--- 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") }}
--- 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"
--- 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") }}
--- 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") }}
--- 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") }}
--- 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">
--- 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">
--- 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" />
--- 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"
--- 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"
--- 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"
--- 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
--- 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"
--- 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
--- 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
--- 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">
--- 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") }}