From 25253c4bdf59dc59d8994956fd36bc8f9e992c7d Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 7 Jun 2022 14:34:00 +0530
Subject: [PATCH] chore: improve ui consistency in realtime pages

---
 packages/hoppscotch-app/components/app/Header.vue             | 2 +-
 packages/hoppscotch-app/components/realtime/Communication.vue | 2 +-
 packages/hoppscotch-app/components/realtime/Socketio.vue      | 4 ++--
 packages/hoppscotch-app/components/realtime/Websocket.vue     | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/hoppscotch-app/components/app/Header.vue b/packages/hoppscotch-app/components/app/Header.vue
index 897fe59ae..401940af6 100644
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <header
-      class="flex items-center justify-between flex-1 px-2 py-2 space-x-2"
+      class="flex items-center justify-between flex-1 px-2 py-2 space-x-2 overflow-x-auto"
     >
       <div class="inline-flex items-center space-x-2">
         <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/realtime/Communication.vue b/packages/hoppscotch-app/components/realtime/Communication.vue
index 1eebd452f..6750965c7 100644
--- a/packages/hoppscotch-app/components/realtime/Communication.vue
+++ b/packages/hoppscotch-app/components/realtime/Communication.vue
@@ -12,7 +12,7 @@
       />
     </div>
     <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 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
     >
       <span class="flex items-center">
         <label class="font-semibold text-secondaryLight">
diff --git a/packages/hoppscotch-app/components/realtime/Socketio.vue b/packages/hoppscotch-app/components/realtime/Socketio.vue
index fc02f857d..6650892c5 100644
--- a/packages/hoppscotch-app/components/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/components/realtime/Socketio.vue
@@ -85,7 +85,7 @@
 
       <SmartTabs
         v-model="selectedTab"
-        styles="sticky bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
+        styles="sticky bg-primary top-upperPrimaryStickyFold z-10"
       >
         <SmartTab
           :id="'communication'"
@@ -99,7 +99,7 @@
         </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-upperPrimaryStickyFold"
+            class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
           >
             <span class="flex items-center">
               <label class="font-semibold text-secondaryLight">
diff --git a/packages/hoppscotch-app/components/realtime/Websocket.vue b/packages/hoppscotch-app/components/realtime/Websocket.vue
index ecf21fe4f..753bcf283 100644
--- a/packages/hoppscotch-app/components/realtime/Websocket.vue
+++ b/packages/hoppscotch-app/components/realtime/Websocket.vue
@@ -37,7 +37,7 @@
       </div>
       <SmartTabs
         v-model="selectedTab"
-        styles="sticky bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
+        styles="sticky bg-primary top-upperPrimaryStickyFold z-10"
       >
         <SmartTab
           :id="'communication'"
@@ -50,7 +50,7 @@
         </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-upperPrimaryStickyFold"
+            class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
           >
             <label class="font-semibold text-secondaryLight">
               {{ t("websocket.protocols") }}