From 05d3aa8289b39815e09e789f86c7add13c62b03e Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Mon, 27 Nov 2023 10:41:59 +0100
Subject: [PATCH] Push items card inner navigator to the left [SCI-9690]

---
 .../RepositoryItemSidebar.vue                 | 34 ++++++++++++++++---
 .../repository_values/ScrollSpy.vue           |  1 -
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
index 7513af870..e3c03658e 100644
--- a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
+++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
@@ -190,12 +190,36 @@
 
             <!-- NAVIGATION -->
             <div v-if="isShowing && !dataLoading" ref="navigationRef" id="navigation"
-              class="flex item-end gap-x-4 min-w-[130px] min-h-[130px] h-fit sticky top-0 right-[4px] ">
+              class="flex item-end gap-x-4 min-w-[130px] min-h-[130px] h-fit sticky top-0 pr-6 [scrollbar-gutter:stable_both-edges] ">
               <scroll-spy :itemsToCreate="[
-                { id: 'highlight-item-1', textId: 'text-item-1', labelAlias: 'information_label', label: 'information-label', sectionId: 'information-section' },
-                { id: 'highlight-item-2', textId: 'text-item-2', labelAlias: 'custom_columns_label', label: 'custom-columns-label', sectionId: 'custom-columns-section' },
-                { id: 'highlight-item-3', textId: 'text-item-3', labelAlias: 'assigned_label', label: 'assigned-label', sectionId: 'assigned-section' },
-                { id: 'highlight-item-4', textId: 'text-item-4', labelAlias: 'QR_label', label: 'QR-label', sectionId: 'qr-section' }
+                {
+                  id: 'highlight-item-1',
+                  textId: 'text-item-1',
+                  labelAlias: 'information_label',
+                  label: 'information-label',
+                  sectionId: 'information-section'
+                },
+                {
+                  id: 'highlight-item-2',
+                  textId: 'text-item-2',
+                  labelAlias: 'custom_columns_label',
+                  label: 'custom-columns-label',
+                  sectionId: 'custom-columns-section'
+                },
+                {
+                  id: 'highlight-item-3',
+                  textId: 'text-item-3',
+                  labelAlias: 'assigned_label',
+                  label: 'assigned-label',
+                  sectionId: 'assigned-section'
+                },
+                {
+                  id: 'highlight-item-4',
+                  textId: 'text-item-4',
+                  labelAlias: 'QR_label',
+                  label: 'QR-label',
+                  sectionId: 'qr-section'
+                }
               ]" v-show="isShowing">
               </scroll-spy>
             </div>
diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/ScrollSpy.vue b/app/javascript/vue/repository_item_sidebar/repository_values/ScrollSpy.vue
index 2db7a371f..480080f38 100644
--- a/app/javascript/vue/repository_item_sidebar/repository_values/ScrollSpy.vue
+++ b/app/javascript/vue/repository_item_sidebar/repository_values/ScrollSpy.vue
@@ -42,7 +42,6 @@ export default {
   },
 
   mounted() {
-    console.log('mounted');
     window.addEventListener('resize', this.handleResize);
     this.initializeComponent();
     this.$nextTick(() => {