feat: add sticky prop to Label (#428)

* feat: add sticky prop to Label

* Update src/components/Label.vue

Co-authored-by: Fabien <bonustrack@users.noreply.github.com>

---------

Co-authored-by: Fabien <bonustrack@users.noreply.github.com>

src/App.vue

@@ -44,7 +44,7 @@ watch(route, () => {
 <template>
   <div
     :class="skin"
-    class="overflow-hidden font-serif text-base min-h-screen bg-skin-bg text-skin-text antialiased"
+    class="font-serif text-base min-h-screen bg-skin-bg text-skin-text antialiased"
   >
     <UiLoading v-if="app.loading || !app.init" class="overlay big" />
     <div v-else class="pb-6 flex">

src/components/Label.vue

@@ -1,7 +1,16 @@
 <script setup>
-defineProps({ label: String });
+defineProps({
+  label: String,
+  sticky: Boolean
+});
 </script>
 
 <template>
-  <h4 class="eyebrow border-b py-2 px-4 text-skin-text" v-text="label" />
+  <h4
+    class="eyebrow border-b py-2 px-4 text-skin-text"
+    :class="{
+      'sticky top-[72px] bg-skin-bg': sticky
+    }"
+    v-text="label"
+  />
 </template>

src/components/ProposalsList.vue

@@ -27,7 +27,7 @@ const currentLimit = computed(() => {
 
 <template>
   <div>
-    <Label :label="title" />
+    <Label :label="title" sticky />
     <UiLoading v-if="loading" class="block px-4 py-3" />
     <div v-else>
       <BlockInfiniteScroller :loading-more="loadingMore" @end-reached="emit('endReached')">

src/views/Space/Settings.vue

@@ -12,7 +12,7 @@ const network = computed(() => getNetwork(props.space.network));
 <template>
   <div class="space-y-3">
     <div>
-      <Label :label="'Voting'" />
+      <Label :label="'Voting'" sticky />
       <div class="mx-4 pt-3">
         <div class="mb-3">
           <div class="s-label !mb-0">Voting delay</div>
@@ -38,7 +38,7 @@ const network = computed(() => getNetwork(props.space.network));
     </div>
 
     <div>
-      <Label :label="'Controller'" />
+      <Label :label="'Controller'" sticky />
       <div class="py-3 mx-4">
         <a :href="network.helpers.getExplorerUrl(space.controller, 'contract')" target="_blank">
           <Stamp :id="space.controller" type="avatar" :size="18" class="mr-2 rounded-sm" />
@@ -49,7 +49,7 @@ const network = computed(() => getNetwork(props.space.network));
     </div>
 
     <div>
-      <Label :label="'Auth(s)'" />
+      <Label :label="'Auth(s)'" sticky />
       <div v-for="(auth, i) in space.authenticators" :key="i" class="mx-4 py-3 border-b">
         <a :href="network.helpers.getExplorerUrl(auth, 'contract')" target="_blank" class="flex">
           <h4 class="flex-auto" v-text="network.constants.AUTHS[auth]" />
@@ -62,7 +62,7 @@ const network = computed(() => getNetwork(props.space.network));
     </div>
 
     <div>
-      <Label :label="'Strategie(s)'" />
+      <Label :label="'Strategie(s)'" sticky />
       <div v-for="(strategy, i) in space.strategies" :key="i" class="mx-4 py-3 border-b">
         <a
           :href="network.helpers.getExplorerUrl(strategy, 'contract')"
@@ -79,7 +79,7 @@ const network = computed(() => getNetwork(props.space.network));
     </div>
 
     <div>
-      <Label :label="'Execution(s)'" />
+      <Label :label="'Execution(s)'" sticky />
       <div v-for="(executor, i) in space.executors" :key="i" class="mx-4 py-3 border-b">
         <a
           :href="network.helpers.getExplorerUrl(executor, 'contract')"

src/views/Space/Treasury.vue

@@ -72,7 +72,7 @@ onMounted(() => {
   </div>
   <div class="space-y-3">
     <div>
-      <Label label="Treasury" />
+      <Label label="Treasury" sticky />
       <a
         :href="explorerUrl('1', spaceData.wallet)"
         target="_blank"