fix: collection properties styles

packages/hoppscotch-common/assets/themes/base-themes.scss

@@ -17,7 +17,7 @@
   --lower-tertiary-sticky-fold: 7.125rem;
   --lower-fourth-sticky-fold: 9.188rem;
   --sidebar-primary-sticky-fold: 2rem;
-  --properties-primary-sticky-fold: 2.05rem;
+  --properties-primary-sticky-fold: 2.063rem;
 }
 
 @mixin light-theme {

packages/hoppscotch-common/src/components/collections/Properties.vue

@@ -18,12 +18,11 @@
             :is-collection-property="true"
             @change-tab="changeOptionTab"
           />
-          <div class="bg-bannerInfo p-2 flex items-center">
+          <div
+            class="bg-bannerInfo px-4 py-2 flex items-center sticky bottom-0"
+          >
             <icon-lucide-info class="svg-icons mr-2" />
             {{ t("helpers.collection_properties_header") }}
-            <a href="hopp.sh" target="_blank" class="underline">{{
-              t("action.learn_more")
-            }}</a>
           </div>
         </HoppSmartTab>
         <HoppSmartTab
@@ -36,12 +35,11 @@
             :is-root-collection="editingProperties?.isRootCollection"
             :inherited-properties="editingProperties?.inheritedProperties"
           />
-          <div class="bg-bannerInfo p-2 flex items-center">
+          <div
+            class="bg-bannerInfo px-4 py-2 flex items-center sticky bottom-0"
+          >
             <icon-lucide-info class="svg-icons mr-2" />
             {{ t("helpers.collection_properties_authorization") }}
-            <a href="hopp.sh" target="_blank" class="underline">{{
-              t("action.learn_more")
-            }}</a>
           </div>
         </HoppSmartTab>
       </HoppSmartTabs>

packages/hoppscotch-common/src/components/graphql/Authorization.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="flex flex-1 flex-col">
     <div
-      class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
+      class="sticky z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
+      :class="[
+        isCollectionProperty
+          ? 'top-propertiesPrimaryStickyFold'
+          : 'top-sidebarPrimaryStickyFold',
+      ]"
     >
       <span class="flex items-center">
         <label class="truncate font-semibold text-secondaryLight">

packages/hoppscotch-common/src/components/graphql/Headers.vue

@@ -1,6 +1,11 @@
 <template>
   <div
-    class="sticky top-sidebarPrimaryStickyFold z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
+    class="sticky z-10 flex items-center justify-between border-y border-dividerLight bg-primary pl-4"
+    :class="[
+      isCollectionProperty
+        ? 'top-propertiesPrimaryStickyFold'
+        : 'top-sidebarPrimaryStickyFold',
+    ]"
   >
     <label class="font-semibold text-secondaryLight">
       {{ t("tab.headers") }}

packages/hoppscotch-common/src/components/http/Authorization.vue

@@ -2,11 +2,11 @@
   <div class="flex flex-1 flex-col">
     <div
       class="sticky z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
-      :class="{
+      :class="[
-        'top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold':
+        isCollectionProperty
-          !isCollectionProperty,
+          ? 'top-propertiesPrimaryStickyFold'
-        'top-propertiesPrimaryStickyFold': isCollectionProperty,
+          : 'top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold',
-      }"
+      ]"
     >
       <span class="flex items-center">
         <label class="truncate font-semibold text-secondaryLight">

packages/hoppscotch-common/src/components/http/Headers.vue

@@ -2,11 +2,11 @@
   <div class="flex flex-1 flex-col">
     <div
       class="sticky z-10 flex flex-shrink-0 items-center justify-between overflow-x-auto border-b border-dividerLight bg-primary pl-4"
-      :class="{
+      :class="[
-        'top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold':
+        isCollectionProperty
-          !isCollectionProperty,
+          ? 'top-propertiesPrimaryStickyFold'
-        'top-propertiesPrimaryStickyFold': isCollectionProperty,
+          : 'top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold',
-      }"
+      ]"
     >
       <label class="truncate font-semibold text-secondaryLight">
         {{ t("request.header_list") }}

packages/hoppscotch-selfhost-web/tailwind.config.ts

@@ -26,6 +26,7 @@ export default {
         lowerFourthStickyFold: "var(--lower-fourth-sticky-fold)",
         sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)",
         sidebarSecondaryStickyFold: "var(--line-height-body)",
+        propertiesPrimaryStickyFold: "var(--properties-primary-sticky-fold)",
       },
     },
   },

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

@@ -22,7 +22,7 @@
   --lower-tertiary-sticky-fold: 7.125rem;
   --lower-fourth-sticky-fold: 9.188rem;
   --sidebar-primary-sticky-fold: 2rem;
-  --properties-primary-sticky-fold: 2.05rem;
+  --properties-primary-sticky-fold: 2.063rem;
 }
 
 @mixin dark-theme {