chore: resolved merge conflicts

packages/hoppscotch-ui/src/assets/scss/styles.scss

@@ -4,6 +4,7 @@
   @apply after:backface-hidden;
   @apply selection:bg-accentDark;
   @apply selection:text-accentContrast;
+  @apply overscroll-none;
 }
 
 :root {

packages/hoppscotch-ui/src/components/smart/Placeholder.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="flex flex-col items-center justify-center p-4">
+    <img
+      v-if="src"
+      :src="src"
+      loading="lazy"
+      class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
+      :alt="alt"
+    />
+
+    <slot name="icon"></slot>
+
+    <span v-if="heading" class="mb-2 font-semibold text-center">
+      {{ heading }}
+    </span>
+
+    <span
+      class="max-w-sm mb-4 text-center whitespace-normal text-secondaryLight"
+    >
+      {{ text }}
+    </span>
+
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    src?: string
+    alt?: string
+    heading?: string
+    text?: string
+  }>(),
+  {
+    alt: "",
+    text: "",
+  }
+)
+</script>

packages/hoppscotch-ui/src/components/smart/Windows.vue

@@ -4,7 +4,7 @@
       class="relative sticky top-0 z-10 flex-shrink-0 overflow-x-auto divide-x divide-dividerLight bg-primaryLight tabs group-tabs"
     >
       <div
-        class="flex flex-1 flex-shrink-0 w-0 overflow-x-auto"
+        class="flex flex-1 flex-shrink-0 w-0 overflow-hidden"
         ref="scrollContainer"
       >
         <div
@@ -455,6 +455,7 @@ $slider-height: 4px;
     @apply min-w-0;
     @apply bg-dividerDark;
     @apply hover:bg-secondaryLight;
+    @apply active:bg-secondaryLight;
 
     width: var(--thumb-width);
     height: $slider-height;
@@ -465,6 +466,7 @@ $slider-height: 4px;
     @apply min-w-0;
     @apply bg-dividerDark;
     @apply hover:bg-secondaryLight;
+    @apply active:bg-secondaryLight;
 
     width: var(--thumb-width);
     height: $slider-height;

packages/hoppscotch-ui/src/components/smart/index.ts

@@ -19,3 +19,4 @@ export { default as HoppSmartToggle } from "./Toggle.vue"
 export { default as HoppSmartWindow } from "./Window.vue"
 export { default as HoppSmartWindows } from "./Windows.vue"
 export { default as HoppSmartPicture } from "./Picture.vue"
+export { default as HoppSmartPlaceholder } from "./Placeholder.vue"