chore: minor ui improvements

2022-11-29 13:50:58 +05:30
parent 6141073137
commit 237455ab21
49 changed files with 148 additions and 122 deletions
--- a/packages/hoppscotch-app/src/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-app/src/components/app/Shortcuts.vue
@@ -1,7 +1,7 @@
 <template>
  <SmartSlideOver :show="show" :title="t('app.shortcuts')" @close="close()">
    <template #content>
-      <div class="sticky top-0 z-10 flex flex-col bg-primary">
+      <div class="sticky top-0 z-10 flex flex-col overflow-x-auto bg-primary">
        <div class="flex flex-col px-6 py-4 border-b border-dividerLight">
          <input
            v-model="filterText"
@@ -20,7 +20,7 @@
          open
        >
          <summary
-            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold cursor-pointer transition focus:outline-none text-secondaryLight hover:text-secondaryDark"
+            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
          >
            <icon-lucide-chevron-right class="mr-2 indicator" />
            <span
@@ -55,7 +55,7 @@
          open
        >
          <summary
-            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold cursor-pointer transition focus:outline-none text-secondaryLight hover:text-secondaryDark"
+            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
          >
            <icon-lucide-chevron-right class="mr-2 indicator" />
            <span
--- a/packages/hoppscotch-app/src/components/collections/graphql/index.vue
+++ b/packages/hoppscotch-app/src/components/collections/graphql/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div :class="{ 'rounded border border-divider': savingMode }">
    <div
-      class="sticky top-0 z-10 flex flex-col border-b divide-y divide-dividerLight border-dividerLight"
+      class="sticky top-0 z-10 flex flex-col overflow-x-auto border-b divide-y divide-dividerLight border-dividerLight"
      :class="{ 'bg-primary': !savingMode }"
    >
      <input
--- a/packages/hoppscotch-app/src/components/collections/index.vue
+++ b/packages/hoppscotch-app/src/components/collections/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div :class="{ 'rounded border border-divider': saveRequest }">
    <div
-      class="sticky z-10 flex flex-col border-b rounded-t bg-primary border-dividerLight"
+      class="sticky z-10 flex flex-col overflow-x-auto border-b rounded-t bg-primary border-dividerLight"
      :style="
        saveRequest ? 'top: calc(-1.35 * var(--font-size-body))' : 'top: 0'
      "
--- a/packages/hoppscotch-app/src/components/environments/index.vue
+++ b/packages/hoppscotch-app/src/components/environments/index.vue
@@ -1,6 +1,8 @@
 <template>
  <div>
-    <div class="sticky top-0 z-10 flex flex-col rounded-t bg-primary">
+    <div
+      class="sticky top-0 z-10 flex flex-col overflow-x-auto rounded-t bg-primary"
+    >
      <tippy
        v-if="environmentType.type === 'my-environments'"
        interactive
--- a/packages/hoppscotch-app/src/components/environments/my/index.vue
+++ b/packages/hoppscotch-app/src/components/environments/my/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <div
-      class="sticky z-10 flex justify-between flex-1 border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
+      class="sticky z-10 flex justify-between flex-1 overflow-x-auto border-b top-upperPrimaryStickyFold border-dividerLight bg-primary"
    >
      <ButtonSecondary
        :icon="IconPlus"
--- a/packages/hoppscotch-app/src/components/environments/teams/index.vue
+++ b/packages/hoppscotch-app/src/components/environments/teams/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <div
-      class="sticky z-10 flex justify-between flex-1 border-b top-upperSecondaryStickyFold border-dividerLight bg-primary"
+      class="sticky z-10 flex justify-between flex-1 overflow-x-auto border-b top-upperSecondaryStickyFold border-dividerLight bg-primary"
    >
      <ButtonSecondary
        v-if="team === undefined || team.myRole === 'VIEWER'"
--- a/packages/hoppscotch-app/src/components/graphql/Authorization.vue
+++ b/packages/hoppscotch-app/src/components/graphql/Authorization.vue
@@ -1,10 +1,10 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
    >
      <span class="flex items-center">
-        <label class="font-semibold text-secondaryLight">
+        <label class="font-semibold truncate text-secondaryLight">
          {{ t("authorization.type") }}
        </label>
        <tippy
@@ -224,7 +224,7 @@
        </div>
      </div>
      <div
-        class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
+        class="sticky h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
      >
        <div class="pb-2 text-secondaryLight">
          {{ t("helpers.authorization") }}
--- a/packages/hoppscotch-app/src/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/src/components/graphql/RequestOptions.vue
@@ -2,7 +2,7 @@
  <div class="flex flex-col flex-1 h-full">
    <SmartTabs
      v-model="selectedOptionTab"
-      styles="sticky bg-primary top-upperPrimaryStickyFold z-10"
+      styles="sticky overflow-x-auto bg-primary top-upperPrimaryStickyFold z-10"
      render-inactive-tabs
    >
      <SmartTab
@@ -11,9 +11,9 @@
        :indicator="gqlQueryString && gqlQueryString.length > 0 ? true : false"
      >
        <div
-          class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery"
+          class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold gqlRunQuery"
        >
-          <label class="font-semibold text-secondaryLight">
+          <label class="font-semibold truncate text-secondaryLight">
            {{ t("request.query") }}
          </label>
          <div class="flex">
@@ -79,9 +79,9 @@
        :indicator="variableString && variableString.length > 0 ? true : false"
      >
        <div
-          class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+          class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
        >
-          <label class="font-semibold text-secondaryLight">
+          <label class="font-semibold truncate text-secondaryLight">
            {{ t("request.variables") }}
          </label>
          <div class="flex">
@@ -129,9 +129,9 @@
        :info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
      >
        <div
-          class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+          class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
        >
-          <label class="font-semibold text-secondaryLight">
+          <label class="font-semibold truncate text-secondaryLight">
            {{ t("tab.headers") }}
          </label>
          <div class="flex">
--- a/packages/hoppscotch-app/src/components/graphql/Response.vue
+++ b/packages/hoppscotch-app/src/components/graphql/Response.vue
@@ -9,9 +9,9 @@
    </div>
    <div v-else-if="responseString" class="flex flex-col flex-1">
      <div
-        class="sticky top-0 z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
+        class="sticky top-0 z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
      >
-        <label class="font-semibold text-secondaryLight">
+        <label class="font-semibold truncate text-secondaryLight">
          {{ t("response.title") }}
        </label>
        <div class="flex items-center">
--- a/packages/hoppscotch-app/src/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-app/src/components/graphql/Sidebar.vue
@@ -1,7 +1,7 @@
 <template>
  <SmartTabs
    v-model="selectedNavigationTab"
-    styles="sticky bg-primary z-10 top-0"
+    styles="sticky overflow-x-auto bg-primary z-10 top-0"
    vertical
    render-inactive-tabs
  >
@@ -40,7 +40,7 @@
        </span>
      </div>
      <div v-else>
-        <div class="sticky top-0 z-10 flex bg-primary">
+        <div class="sticky top-0 z-10 flex overflow-x-auto bg-primary">
          <input
            v-model="graphqlFieldsFilterText"
            type="search"
@@ -60,7 +60,7 @@
        </div>
        <SmartTabs
          v-model="selectedGqlTab"
-          styles="border-t border-b border-dividerLight bg-primary sticky z-10 top-sidebarPrimaryStickyFold"
+          styles="border-t border-b border-dividerLight bg-primary sticky overflow-x-auto z-10 top-sidebarPrimaryStickyFold"
          render-inactive-tabs
        >
          <SmartTab
@@ -127,9 +127,9 @@
    <SmartTab :id="'schema'" :icon="IconBox" :label="`${t('tab.schema')}`">
      <div
        v-if="schemaString"
-        class="sticky top-0 z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
+        class="sticky top-0 z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
      >
-        <label class="font-semibold text-secondaryLight">
+        <label class="font-semibold truncate text-secondaryLight">
          {{ t("graphql.schema") }}
        </label>
        <div class="flex">
--- a/packages/hoppscotch-app/src/components/history/index.vue
+++ b/packages/hoppscotch-app/src/components/history/index.vue
@@ -1,6 +1,8 @@
 <template>
  <div>
-    <div class="sticky top-0 z-10 flex border-b bg-primary border-dividerLight">
+    <div
+      class="sticky top-0 z-10 flex overflow-x-auto border-b bg-primary border-dividerLight"
+    >
      <input
        v-model="filterText"
        type="search"
@@ -64,7 +66,7 @@
        open
      >
        <summary
-          class="flex items-center justify-between flex-1 min-w-0 cursor-pointer transition focus:outline-none text-secondaryLight text-tiny group"
+          class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer focus:outline-none text-secondaryLight text-tiny group"
        >
          <span
            class="inline-flex items-center justify-center px-4 py-2 transition group-hover:text-secondary"
--- a/packages/hoppscotch-app/src/components/http/Authorization.vue
+++ b/packages/hoppscotch-app/src/components/http/Authorization.vue
@@ -1,10 +1,10 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
    >
      <span class="flex items-center">
-        <label class="font-semibold text-secondaryLight">
+        <label class="font-semibold truncate text-secondaryLight">
          {{ t("authorization.type") }}
        </label>
        <tippy
@@ -221,7 +221,7 @@
        </div>
      </div>
      <div
-        class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
+        class="sticky h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
      >
        <div class="pb-2 text-secondaryLight">
          {{ t("helpers.authorization") }}
--- a/packages/hoppscotch-app/src/components/http/Body.vue
+++ b/packages/hoppscotch-app/src/components/http/Body.vue
@@ -1,10 +1,10 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
    >
      <span class="flex items-center">
-        <label class="font-semibold text-secondaryLight">
+        <label class="font-semibold truncate text-secondaryLight">
          {{ t("request.content_type") }}
        </label>
        <tippy
--- a/packages/hoppscotch-app/src/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-app/src/components/http/BodyParameters.vue
@@ -1,9 +1,9 @@
 <template>
  <div>
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
    >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
        {{ t("request.body") }}
      </label>
      <div class="flex">
@@ -104,7 +104,7 @@
                :name="`attachment${index}`"
                type="file"
                multiple
-                class="p-1 cursor-pointer transition file:transition file:cursor-pointer text-secondaryLight hover:text-secondaryDark file:mr-2 file:py-1 file:px-4 file:rounded file:border-0 file:text-tiny text-tiny file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
+                class="p-1 transition cursor-pointer file:transition file:cursor-pointer text-secondaryLight hover:text-secondaryDark file:mr-2 file:py-1 file:px-4 file:rounded file:border-0 file:text-tiny text-tiny file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
                @change="setRequestAttachment(index, entry, $event)"
              />
            </label>
--- a/packages/hoppscotch-app/src/components/http/CodegenModal.vue
+++ b/packages/hoppscotch-app/src/components/http/CodegenModal.vue
@@ -28,7 +28,7 @@
          </span>
          <template #content="{ hide }">
            <div class="flex flex-col space-y-2">
-              <div class="sticky top-0">
+              <div class="sticky top-0 overflow-x-auto">
                <input
                  v-model="searchQuery"
                  type="search"
@@ -85,7 +85,7 @@
          class="mt-4 border rounded border-dividerLight"
        >
          <div class="flex items-center justify-between pl-4">
-            <label class="font-semibold text-secondaryLight">
+            <label class="font-semibold truncate text-secondaryLight">
              {{ t("request.generated_code") }}
            </label>
            <div class="flex items-center">
--- a/packages/hoppscotch-app/src/components/http/Headers.vue
+++ b/packages/hoppscotch-app/src/components/http/Headers.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
    >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
        {{ t("request.header_list") }}
      </label>
      <div class="flex">
--- a/packages/hoppscotch-app/src/components/http/ImportCurl.vue
+++ b/packages/hoppscotch-app/src/components/http/ImportCurl.vue
@@ -9,7 +9,9 @@
      <div class="border rounded border-dividerLight">
        <div class="flex flex-col">
          <div class="flex items-center justify-between pl-4">
-            <label class="font-semibold text-secondaryLight"> cURL </label>
+            <label class="font-semibold truncate text-secondaryLight">
+              cURL
+            </label>
            <div class="flex items-center">
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
--- a/packages/hoppscotch-app/src/components/http/Parameters.vue
+++ b/packages/hoppscotch-app/src/components/http/Parameters.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
    >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
        {{ t("request.parameter_list") }}
      </label>
      <div class="flex">
--- a/packages/hoppscotch-app/src/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-app/src/components/http/PreRequestScript.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
    >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
        {{ t("preRequest.javascript_code") }}
      </label>
      <div class="flex">
@@ -34,7 +34,7 @@
        <div ref="preRequestEditor" class="h-full"></div>
      </div>
      <div
-        class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
+        class="sticky h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
      >
        <div class="pb-2 text-secondaryLight">
          {{ t("helpers.pre_request_script") }}
--- a/packages/hoppscotch-app/src/components/http/RawBody.vue
+++ b/packages/hoppscotch-app/src/components/http/RawBody.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
    >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
        {{ t("request.raw_body") }}
      </label>
      <div class="flex">
--- a/packages/hoppscotch-app/src/components/http/Request.vue
+++ b/packages/hoppscotch-app/src/components/http/Request.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="sticky top-0 z-20 flex-none p-4 sm:flex sm:flex-shrink-0 sm:space-x-2 bg-primary"
+    class="sticky top-0 z-20 flex-none p-4 overflow-x-auto sm:flex sm:flex-shrink-0 sm:space-x-2 bg-primary"
  >
    <div
      class="flex flex-1 border rounded min-w-52 border-divider whitespace-nowrap"
@@ -16,7 +16,7 @@
            <span class="select-wrapper">
              <input
                id="method"
-                class="flex px-4 py-2 font-semibold rounded-l cursor-pointer transition text-secondaryDark w-26 bg-primaryLight"
+                class="flex px-4 py-2 font-semibold transition rounded-l cursor-pointer text-secondaryDark w-26 bg-primaryLight"
                :value="newMethod"
                :readonly="!isCustomMethod"
                :placeholder="`${t('request.method')}`"
@@ -47,7 +47,7 @@
        </label>
      </div>
      <div
-        class="flex flex-1 overflow-auto border-l rounded-r transition border-divider bg-primaryLight whitespace-nowrap"
+        class="flex flex-1 overflow-auto transition border-l rounded-r border-divider bg-primaryLight whitespace-nowrap"
      >
        <SmartEnvInput
          v-model="newEndpoint"
@@ -131,7 +131,7 @@
        </tippy>
      </span>
      <span
-        class="flex ml-2 border rounded transition border-dividerLight hover:border-dividerDark"
+        class="flex ml-2 transition border rounded border-dividerLight hover:border-dividerDark"
      >
        <ButtonSecondary
          v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
--- a/packages/hoppscotch-app/src/components/http/RequestOptions.vue
+++ b/packages/hoppscotch-app/src/components/http/RequestOptions.vue
@@ -1,7 +1,7 @@
 <template>
  <SmartTabs
    v-model="selectedRealtimeTab"
-    styles="sticky bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
+    styles="sticky overflow-x-auto bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
    render-inactive-tabs
  >
    <SmartTab
--- a/packages/hoppscotch-app/src/components/http/ResponseMeta.vue
+++ b/packages/hoppscotch-app/src/components/http/ResponseMeta.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="sticky top-0 z-10 flex items-start justify-center p-4 overflow-auto bg-primary whitespace-nowrap"
+    class="sticky top-0 z-10 flex items-start justify-center p-4 overflow-auto overflow-x-auto bg-primary whitespace-nowrap"
  >
    <AppShortcutsPrompt v-if="response == null" class="flex-1" />
    <div v-else class="flex flex-col flex-1">
--- a/packages/hoppscotch-app/src/components/http/Sidebar.vue
+++ b/packages/hoppscotch-app/src/components/http/Sidebar.vue
@@ -1,7 +1,7 @@
 <template>
  <SmartTabs
    v-model="selectedNavigationTab"
-    styles="sticky bg-primary z-10 top-0"
+    styles="sticky overflow-x-auto bg-primary z-10 top-0"
    vertical
    render-inactive-tabs
  >
--- a/packages/hoppscotch-app/src/components/http/TestResult.vue
+++ b/packages/hoppscotch-app/src/components/http/TestResult.vue
@@ -9,9 +9,9 @@
      "
    >
      <div
-        class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
+        class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
      >
-        <label class="font-semibold text-secondaryLight">
+        <label class="font-semibold truncate text-secondaryLight">
          {{ t("test.report") }}
        </label>
        <ButtonSecondary
@@ -25,7 +25,7 @@
        <div v-if="haveEnvVariables" class="flex flex-col">
          <details class="flex flex-col divide-y divide-dividerLight" open>
            <summary
-              class="flex items-center justify-between flex-1 min-w-0 cursor-pointer transition focus:outline-none text-secondaryLight text-tiny group"
+              class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer focus:outline-none text-secondaryLight text-tiny group"
            >
              <span
                class="inline-flex items-center justify-center px-4 py-2 transition group-hover:text-secondary"
@@ -127,7 +127,7 @@
                "
              />
              <div
-                class="flex items-center flex-shrink overflow-x-auto space-x-2"
+                class="flex items-center flex-shrink space-x-2 overflow-x-auto"
              >
                <span
                  v-if="result.message"
--- a/packages/hoppscotch-app/src/components/http/Tests.vue
+++ b/packages/hoppscotch-app/src/components/http/Tests.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
    >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
        {{ t("test.javascript_code") }}
      </label>
      <div class="flex">
@@ -34,7 +34,7 @@
        <div ref="testScriptEditor" class="h-full"></div>
      </div>
      <div
-        class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
+        class="sticky h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
      >
        <div class="pb-2 text-secondaryLight">
          {{ t("helpers.post_request_tests") }}
--- a/packages/hoppscotch-app/src/components/http/URLEncodedParams.vue
+++ b/packages/hoppscotch-app/src/components/http/URLEncodedParams.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperMobileStickyFold sm:top-upperMobileTertiaryStickyFold"
    >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
        {{ t("request.body") }}
      </label>
      <div class="flex">
--- a/packages/hoppscotch-app/src/components/lenses/HeadersRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/HeadersRenderer.vue
@@ -1,9 +1,9 @@
 <template>
  <div>
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
    >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
        {{ t("request.header_list") }}
      </label>
      <div class="flex">
--- a/packages/hoppscotch-app/src/components/lenses/ResponseBodyRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/ResponseBodyRenderer.vue
@@ -2,7 +2,7 @@
  <SmartTabs
    v-if="response"
    v-model="selectedLensTab"
-    styles="sticky z-10 bg-primary top-lowerPrimaryStickyFold"
+    styles="sticky overflow-x-auto z-10 bg-primary top-lowerPrimaryStickyFold"
  >
    <SmartTab
      v-for="(lens, index) in validLenses"
--- a/packages/hoppscotch-app/src/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/HTMLLensRenderer.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
    >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
        {{ t("response.body") }}
      </label>
      <div class="flex">
@@ -80,7 +80,7 @@ import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 const t = useI18n()

 const props = defineProps<{
-  response: HoppRESTResponse
+  response: HoppRESTResponse & { type: "success" | "fail" }
 }>()

 const htmlResponse = ref<any | null>(null)
--- a/packages/hoppscotch-app/src/components/lenses/renderers/ImageLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/ImageLensRenderer.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
    >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
        {{ t("response.body") }}
      </label>
      <div class="flex">
--- a/packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/JSONLensRenderer.vue
@@ -4,9 +4,9 @@
    class="flex flex-col flex-1"
  >
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
    >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
        {{ t("response.body") }}
      </label>
      <div class="flex items-center">
@@ -48,7 +48,7 @@
    </div>
    <div
      v-if="toggleFilter"
-      class="sticky z-10 flex border-b bg-primary top-lowerTertiaryStickyFold border-dividerLight"
+      class="sticky z-10 flex overflow-x-auto border-b bg-primary top-lowerTertiaryStickyFold border-dividerLight"
    >
      <div
        class="inline-flex items-center flex-1 bg-primaryLight border-divider text-secondaryDark"
@@ -89,7 +89,7 @@
    <div ref="jsonResponse" class="flex flex-col flex-1 h-auto h-full"></div>
    <div
      v-if="outlinePath"
-      class="sticky bottom-0 z-10 flex px-2 overflow-auto border-t bg-primaryLight border-dividerLight flex-nowrap"
+      class="sticky bottom-0 z-10 flex px-2 overflow-auto overflow-x-auto border-t bg-primaryLight border-dividerLight flex-nowrap"
    >
      <div
        v-for="(item, index) in outlinePath"
--- a/packages/hoppscotch-app/src/components/lenses/renderers/PDFLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/PDFLensRenderer.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
    >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
        {{ t("response.body") }}
      </label>
      <div class="flex">
--- a/packages/hoppscotch-app/src/components/lenses/renderers/RawLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/RawLensRenderer.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
    >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
        {{ t("response.body") }}
      </label>
      <div class="flex">
@@ -62,7 +62,7 @@ import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
 const t = useI18n()

 const props = defineProps<{
-  response: HoppRESTResponse
+  response: HoppRESTResponse & { type: "success" | "fail" }
 }>()

 const { responseBodyText } = useResponseBody(props.response)
--- a/packages/hoppscotch-app/src/components/lenses/renderers/XMLLensRenderer.vue
+++ b/packages/hoppscotch-app/src/components/lenses/renderers/XMLLensRenderer.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
    >
-      <label class="font-semibold text-secondaryLight">
+      <label class="font-semibold truncate text-secondaryLight">
        {{ t("response.body") }}
      </label>
      <div class="flex">
@@ -42,6 +42,11 @@
 <script setup lang="ts">
 import IconWrapText from "~icons/lucide/wrap-text"
 import { computed, ref, reactive } from "vue"
+import { flow, pipe } from "fp-ts/function"
+import * as S from "fp-ts/string"
+import * as RNEA from "fp-ts/ReadonlyNonEmptyArray"
+import * as A from "fp-ts/Array"
+import * as O from "fp-ts/Option"
 import { useCodemirror } from "@composables/codemirror"
 import type { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 import { useI18n } from "@composables/i18n"
@@ -52,23 +57,31 @@ import {
 } from "@composables/lens-actions"
 import { defineActionHandler } from "~/helpers/actions"
 import { getPlatformSpecialKey as getSpecialKey } from "~/helpers/platformutils"
+import { objFieldMatches } from "~/helpers/functional/object"

 const t = useI18n()

 const props = defineProps<{
-  response: HoppRESTResponse
+  response: HoppRESTResponse & { type: "success" | "fail" }
 }>()

 const { responseBodyText } = useResponseBody(props.response)

-const responseType = computed(() => {
-  return (
-    props.response.headers.find((h) => h.key.toLowerCase() === "content-type")
-      .value || ""
+const responseType = computed(() =>
+  pipe(
+    props.response,
+    O.fromPredicate(objFieldMatches("type", ["fail", "success"] as const)),
+    O.chain(
+      // Try getting content-type
+      flow(
+        (res) => res.headers,
+        A.findFirst((h) => h.key.toLowerCase() === "content-type"),
+        O.map(flow((h) => h.value, S.split(";"), RNEA.head, S.toLowerCase))
+      )
+    ),
+    O.getOrElse(() => "text/plain")
  )
-    .split(";")[0]
-    .toLowerCase()
-})
+)

 const { downloadIcon, downloadResponse } = useDownloadResponse(
  responseType.value,
--- a/packages/hoppscotch-app/src/components/realtime/Communication.vue
+++ b/packages/hoppscotch-app/src/components/realtime/Communication.vue
@@ -2,7 +2,7 @@
  <div class="flex flex-col flex-1">
    <div
      v-if="showEventField"
-      class="sticky z-10 flex items-center justify-center border-b bg-primary border-dividerLight"
+      class="sticky z-10 flex items-center justify-center overflow-x-auto border-b bg-primary border-dividerLight"
      :class="eventFieldStyles"
    >
      <icon-lucide-rss class="mx-4 svg-icons text-accentLight" />
@@ -17,11 +17,11 @@
      />
    </div>
    <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
+      class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
      :class="stickyHeaderStyles"
    >
      <span class="flex items-center">
-        <label class="font-semibold text-secondaryLight">
+        <label class="font-semibold truncate text-secondaryLight">
          {{ t("websocket.message") }}
        </label>
        <tippy
--- a/packages/hoppscotch-app/src/components/realtime/ConnectionConfig.vue
+++ b/packages/hoppscotch-app/src/components/realtime/ConnectionConfig.vue
@@ -1,10 +1,10 @@
 <template>
  <div class="flex flex-col flex-1">
    <div
-      class="sticky z-10 flex items-center justify-between py-2 pl-4 pr-2 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
+      class="sticky z-10 flex items-center justify-between py-2 pl-4 pr-2 overflow-x-auto border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
    >
      <span class="flex items-center">
-        <label class="font-semibold text-secondaryLight">
+        <label class="font-semibold truncate text-secondaryLight">
          {{ t("mqtt.connection_config") }}
        </label>
      </span>
@@ -58,7 +58,7 @@
          class="flex items-center justify-between px-4 border-b border-dividerLight"
        >
          <div class="flex items-center">
-            <label class="font-semibold text-secondaryLight">
+            <label class="font-semibold truncate text-secondaryLight">
              {{ t("mqtt.lw_qos") }}
            </label>
            <tippy interactive trigger="click" theme="popover">
--- a/packages/hoppscotch-app/src/components/realtime/Log.vue
+++ b/packages/hoppscotch-app/src/components/realtime/Log.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="flex flex-col flex-1 overflow-auto whitespace-nowrap">
    <div
-      class="sticky top-0 z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
+      class="sticky top-0 z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight"
    >
-      <label for="log" class="font-semibold text-secondaryLight">
+      <label for="log" class="font-semibold truncate text-secondaryLight">
        {{ title }}
      </label>
      <div class="flex">
--- a/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
+++ b/packages/hoppscotch-app/src/components/realtime/LogEntry.vue
@@ -23,7 +23,7 @@
            </span>
          </div>
          <div
-            class="items-center flex-1 min-w-0 p-2 inline-grid"
+            class="inline-grid items-center flex-1 min-w-0 p-2"
            @click="toggleExpandPayload()"
          >
            <div class="truncate">
@@ -61,7 +61,7 @@
      <div
        class="z-10 flex items-center justify-between pl-4 border-b border-dividerLight top-lowerSecondaryStickyFold"
      >
-        <label class="font-semibold text-secondaryLight">
+        <label class="font-semibold truncate text-secondaryLight">
          {{ t("response.body") }}
        </label>
        <div class="flex">
@@ -89,7 +89,7 @@
      <div ref="editor"></div>
      <div
        v-if="outlinePath && selectedTab === 'json'"
-        class="sticky bottom-0 z-10 flex px-2 overflow-auto border-t bg-primaryLight border-dividerLight flex-nowrap"
+        class="sticky bottom-0 z-10 flex px-2 overflow-auto overflow-x-auto border-t bg-primaryLight border-dividerLight flex-nowrap"
      >
        <div
          v-for="(item, index) in outlinePath"
--- a/packages/hoppscotch-app/src/components/smart/ChangeLanguage.vue
+++ b/packages/hoppscotch-app/src/components/smart/ChangeLanguage.vue
@@ -18,7 +18,7 @@
      </span>
      <template #content="{ hide }">
        <div class="flex flex-col space-y-2">
-          <div class="sticky top-0">
+          <div class="sticky top-0 overflow-x-auto">
            <input
              v-model="searchQuery"
              type="search"
--- a/packages/hoppscotch-app/src/components/smart/Expand.vue
+++ b/packages/hoppscotch-app/src/components/smart/Expand.vue
@@ -1,10 +1,12 @@
 <template>
  <div
-    class="relative flex flex-col overflow-hidden space-y-2"
+    class="relative flex flex-col space-y-2 overflow-hidden"
    :class="expand ? 'h-full' : 'max-h-32'"
  >
    <slot name="body"></slot>
-    <div class="sticky inset-x-0 bottom-0 flex items-center justify-center">
+    <div
+      class="sticky inset-x-0 bottom-0 flex items-center justify-center overflow-x-auto"
+    >
      <ButtonSecondary
        :icon="expand ? IconChevronUp : IconChevronDown"
        :label="expand ? t('action.less') : t('action.more')"
--- a/packages/hoppscotch-app/src/components/smart/Windows.vue
+++ b/packages/hoppscotch-app/src/components/smart/Windows.vue
@@ -1,6 +1,8 @@
 <template>
  <div class="flex flex-col flex-1 h-auto overflow-y-hidden flex-nowrap">
-    <div class="relative sticky top-0 z-10 tabs bg-primaryLight">
+    <div
+      class="relative sticky top-0 z-10 overflow-x-auto tabs bg-primaryLight"
+    >
      <div class="flex flex-1 w-0 overflow-x-auto">
        <div class="flex justify-between divide-x divide-dividerLight">
          <div class="flex">
@@ -48,7 +50,9 @@
              </template>
            </draggable>
          </div>
-          <div class="sticky right-0 flex items-center justify-center z-8">
+          <div
+            class="sticky right-0 flex items-center justify-center overflow-x-auto z-8"
+          >
            <slot name="actions">
              <span
                v-if="canAddNewTab"
--- a/packages/hoppscotch-app/src/components/teams/Edit.vue
+++ b/packages/hoppscotch-app/src/components/teams/Edit.vue
@@ -47,7 +47,7 @@
            E.isRight(teamDetails.data) &&
            teamDetails.data.right.team.teamMembers
          "
-          class="border rounded divide-y divide-dividerLight border-divider"
+          class="border rounded border-divider"
        >
          <div
            v-if="teamDetails.data.right.team.teamMembers === 0"
@@ -72,7 +72,7 @@
              "
            />
          </div>
-          <div v-else>
+          <div v-else class="divide-y divide-dividerLight">
            <div
              v-for="(member, index) in membersList"
              :key="`member-${index}`"
--- a/packages/hoppscotch-app/src/components/teams/Invite.vue
+++ b/packages/hoppscotch-app/src/components/teams/Invite.vue
@@ -58,6 +58,7 @@
          <div v-else>
            <div
              v-if="!pendingInvites.loading && E.isRight(pendingInvites.data)"
+              class="divide-y divide-dividerLight"
            >
              <div
                v-for="(invitee, index) in pendingInvites.data.right.team
--- a/packages/hoppscotch-app/src/helpers/shortcuts.ts
+++ b/packages/hoppscotch-app/src/helpers/shortcuts.ts
@@ -34,7 +34,7 @@ export default [
    section: "shortcut.request.title",
    shortcuts: [
      {
-        keys: [getPlatformSpecialKey(), "Enter"],
+        keys: [getPlatformSpecialKey(), "↩"],
        label: "shortcut.request.send_request",
      },
      {
--- a/packages/hoppscotch-app/src/pages/realtime.vue
+++ b/packages/hoppscotch-app/src/pages/realtime.vue
@@ -1,7 +1,7 @@
 <template>
  <SmartTabs
    v-model="currentTab"
-    styles="sticky bg-primary top-0 z-10"
+    styles="sticky overflow-x-auto bg-primary top-0 z-10"
    content-styles="h-[calc(100%-var(--sidebar-primary-sticky-fold)-1px)] !flex"
  >
    <SmartTab
--- a/packages/hoppscotch-app/src/pages/realtime/mqtt.vue
+++ b/packages/hoppscotch-app/src/pages/realtime/mqtt.vue
@@ -2,7 +2,7 @@
  <AppPaneLayout layout-id="mqtt">
    <template #primary>
      <div
-        class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
+        class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
      >
        <div class="inline-flex flex-1 space-x-2">
          <div class="flex flex-1">
@@ -116,7 +116,7 @@
    </template>
    <template #sidebar>
      <div
-        class="sticky z-10 flex flex-col border-b rounded-t divide-y divide-dividerLight bg-primary border-dividerLight"
+        class="sticky z-10 flex flex-col overflow-x-auto border-b divide-y rounded-t divide-dividerLight bg-primary border-dividerLight"
      >
        <div class="flex justify-between flex-1">
          <ButtonSecondary
@@ -174,7 +174,7 @@
              />
            </span>
            <span
-              class="flex flex-1 min-w-0 py-2 pr-2 cursor-pointer transition group-hover:text-secondaryDark"
+              class="flex flex-1 min-w-0 py-2 pr-2 transition cursor-pointer group-hover:text-secondaryDark"
              @click="openTopicAsTab(topic)"
            >
              <span class="truncate">
--- a/packages/hoppscotch-app/src/pages/realtime/socketio.vue
+++ b/packages/hoppscotch-app/src/pages/realtime/socketio.vue
@@ -2,7 +2,7 @@
  <AppPaneLayout layout-id="socketio">
    <template #primary>
      <div
-        class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
+        class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
      >
        <div class="inline-flex flex-1 space-x-2">
          <div class="flex flex-1">
@@ -95,7 +95,7 @@
      </div>
      <SmartTabs
        v-model="selectedTab"
-        styles="sticky bg-primary top-upperPrimaryStickyFold z-10"
+        styles="sticky overflow-x-auto bg-primary top-upperPrimaryStickyFold z-10"
        render-inactive-tabs
      >
        <SmartTab
@@ -113,10 +113,10 @@
        </SmartTab>
        <SmartTab :id="'protocols'" :label="`${t('request.authorization')}`">
          <div
-            class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+            class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
          >
            <span class="flex items-center">
-              <label class="font-semibold text-secondaryLight">
+              <label class="font-semibold truncate text-secondaryLight">
                {{ t("authorization.type") }}
              </label>
              <tippy
@@ -220,7 +220,7 @@
              </div>
            </div>
            <div
-              class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
+              class="sticky h-full p-4 overflow-auto overflow-x-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
            >
              <div class="p-2">
                <div class="pb-2 text-secondaryLight">
--- a/packages/hoppscotch-app/src/pages/realtime/websocket.vue
+++ b/packages/hoppscotch-app/src/pages/realtime/websocket.vue
@@ -2,7 +2,7 @@
  <AppPaneLayout layout-id="websocket">
    <template #primary>
      <div
-        class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary"
+        class="sticky top-0 z-10 flex flex-shrink-0 p-4 space-x-2 overflow-x-auto bg-primary"
      >
        <div class="inline-flex flex-1 space-x-2">
          <input
@@ -39,7 +39,7 @@
      </div>
      <SmartTabs
        v-model="selectedTab"
-        styles="sticky bg-primary top-upperPrimaryStickyFold z-10"
+        styles="sticky overflow-x-auto bg-primary top-upperPrimaryStickyFold z-10"
        render-inactive-tabs
      >
        <SmartTab
@@ -54,9 +54,9 @@
        </SmartTab>
        <SmartTab :id="'protocols'" :label="`${t('websocket.protocols')}`">
          <div
-            class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+            class="sticky z-10 flex items-center justify-between pl-4 overflow-x-auto border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
          >
-            <label class="font-semibold text-secondaryLight">
+            <label class="font-semibold truncate text-secondaryLight">
              {{ t("websocket.protocols") }}
            </label>
            <div class="flex">