From ea5948fb5d759c43519d6c3933c7b5c994daf5e7 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Sun, 1 Sep 2024 17:19:39 +0900
Subject: [PATCH] fix: fix sticky nav wrong position on small screen

---
 apps/ui/src/components/Ui/Label.vue   | 2 +-
 apps/ui/src/views/Proposal.vue        | 2 +-
 apps/ui/src/views/Space/Delegates.vue | 2 +-
 apps/ui/src/views/Space/Treasury.vue  | 2 +-
 apps/ui/src/views/SpaceUser.vue       | 5 +----
 5 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/apps/ui/src/components/Ui/Label.vue b/apps/ui/src/components/Ui/Label.vue
index 321707f9f..bafff8402 100644
--- a/apps/ui/src/components/Ui/Label.vue
+++ b/apps/ui/src/components/Ui/Label.vue
@@ -9,7 +9,7 @@ defineProps<{
   <h4
     class="eyebrow border-b py-2 px-4 text-skin-text"
     :class="{
-      'sticky z-10 top-[71px] lg:top-[72px] bg-skin-bg': sticky
+      'sticky z-10 top-[72px] bg-skin-bg': sticky
     }"
     v-text="label"
   />
diff --git a/apps/ui/src/views/Proposal.vue b/apps/ui/src/views/Proposal.vue
index ef9478fc6..ed9eceff1 100644
--- a/apps/ui/src/views/Proposal.vue
+++ b/apps/ui/src/views/Proposal.vue
@@ -148,7 +148,7 @@ watchEffect(() => {
     <template v-else>
       <div class="flex-1 md:mr-[340px]">
         <div
-          class="flex px-4 bg-skin-bg border-b sticky top-[71px] lg:top-[72px] z-40 space-x-3"
+          class="flex px-4 bg-skin-bg border-b sticky top-[72px] z-40 space-x-3"
         >
           <router-link
             :to="{
diff --git a/apps/ui/src/views/Space/Delegates.vue b/apps/ui/src/views/Space/Delegates.vue
index cba797c8e..4713f2dd5 100644
--- a/apps/ui/src/views/Space/Delegates.vue
+++ b/apps/ui/src/views/Space/Delegates.vue
@@ -24,7 +24,7 @@ watchEffect(() => setTitle(`Delegates - ${props.space.name}`));
   <template v-else>
     <UiScrollerHorizontal
       v-if="space.delegations.length > 1"
-      class="z-40 sticky top-[71px] lg:top-[72px]"
+      class="z-40 sticky top-[72px]"
       gradient="md"
     >
       <div class="flex px-4 space-x-3 bg-skin-bg border-b min-w-max">
diff --git a/apps/ui/src/views/Space/Treasury.vue b/apps/ui/src/views/Space/Treasury.vue
index 75d7f3523..58289a816 100644
--- a/apps/ui/src/views/Space/Treasury.vue
+++ b/apps/ui/src/views/Space/Treasury.vue
@@ -24,7 +24,7 @@ watchEffect(() => setTitle(`Treasury - ${props.space.name}`));
   <UiScrollerHorizontal
     v-if="filteredTreasuries.length !== 1"
     gradient="md"
-    class="z-40 sticky top-[71px] lg:top-[72px]"
+    class="z-40 sticky top-[72px]"
   >
     <div class="flex px-4 space-x-3 bg-skin-bg border-b min-w-max">
       <button
diff --git a/apps/ui/src/views/SpaceUser.vue b/apps/ui/src/views/SpaceUser.vue
index 6d8381950..bb76d3635 100644
--- a/apps/ui/src/views/SpaceUser.vue
+++ b/apps/ui/src/views/SpaceUser.vue
@@ -240,10 +240,7 @@ watch(
         </div>
       </div>
     </div>
-    <UiScrollerHorizontal
-      class="z-40 sticky top-[71px] lg:top-[72px]"
-      gradient="md"
-    >
+    <UiScrollerHorizontal class="z-40 sticky top-[72px]" gradient="md">
       <div class="flex px-4 space-x-3 bg-skin-bg border-b min-w-max">
         <router-link
           v-for="(item, i) in navigation"