fix: overflow on log entries - closed #2738

packages/hoppscotch-app/src/components.d.ts

@@ -98,17 +98,6 @@ declare module '@vue/runtime-core' {
     HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
     HttpTests: typeof import('./components/http/Tests.vue')['default']
     HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
-    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
-    IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
-    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
-    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
-    IconLucideInfo: typeof import('~icons/lucide/info')['default']
-    IconLucideLayers: typeof import('~icons/lucide/layers')['default']
-    IconLucideLoader: typeof import('~icons/lucide/loader')['default']
-    IconLucideMinus: typeof import('~icons/lucide/minus')['default']
-    IconLucideSearch: typeof import('~icons/lucide/search')['default']
-    IconLucideUser: typeof import('~icons/lucide/user')['default']
-    IconLucideUsers: typeof import('~icons/lucide/users')['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']

packages/hoppscotch-app/src/components/realtime/Log.vue

@@ -1,12 +1,12 @@
 <template>
-  <div ref="container" class="flex flex-col flex-1 overflow-y-auto">
+  <div class="flex flex-col flex-1 overflow-auto whitespace-nowrap">
     <div
-      class="sticky top-0 z-10 flex items-center justify-between flex-none pl-4 border-b bg-primary border-dividerLight"
+      class="sticky top-0 z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
     >
-      <label for="log" class="py-2 font-semibold text-secondaryLight">
+      <label for="log" class="font-semibold text-secondaryLight">
         {{ title }}
       </label>
-      <div>
+      <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('action.delete')"
@@ -40,10 +40,10 @@
     <div
       v-if="log.length !== 0"
       ref="logs"
-      class="overflow-y-auto border-b border-dividerLight"
+      class="flex flex-col overflow-y-auto border-b border-dividerLight"
     >
       <div
-        class="flex flex-col h-auto h-full border-r divide-y divide-dividerLight border-dividerLight"
+        class="flex flex-col h-full border-r divide-y divide-dividerLight border-dividerLight"
       >
         <RealtimeLogEntry
           v-for="(entry, index) in log"
@@ -86,8 +86,7 @@ const emit = defineEmits<{
 
 const t = useI18n()
 
-const container = ref<HTMLElement | null>(null)
-const logs = ref<HTMLElement | null>(null)
+const logs = ref<HTMLElement>()
 
 const autoScrollEnabled = ref(true)
 

packages/hoppscotch-app/src/components/smart/Tabs.vue

@@ -58,10 +58,13 @@
       </div>
     </div>
     <div
-      class="w-full h-full contents"
-      :class="{
-        '!flex flex-col flex-1 overflow-y-auto ': vertical,
-      }"
+      class="flex w-full h-full"
+      :class="[
+        {
+          'flex-col flex-1 overflow-y-auto ': vertical,
+        },
+        contentStyles,
+      ]"
     >
       <slot></slot>
     </div>
@@ -111,6 +114,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  contentStyles: {
+    type: String,
+    default: "",
+  },
 })
 
 const emit = defineEmits<{

packages/hoppscotch-app/src/pages/realtime.vue

@@ -1,5 +1,9 @@
 <template>
-  <SmartTabs v-model="currentTab">
+  <SmartTabs
+    v-model="currentTab"
+    styles="sticky bg-primary top-0 z-50"
+    content-styles="h-[calc(100%-var(--sidebar-primary-sticky-fold)-1px)]"
+  >
     <SmartTab
       v-for="{ target, title } in REALTIME_NAVIGATION"
       :id="target"