fix(snippets): fragmetns scroll #92 (#105)

Author: antonreshetov

src/renderer/assets/scss/vendor.scss

@@ -13,26 +13,32 @@
     }
   }
   &__rail-x {
-    background-color: rgba(121, 121, 121, 0.5);
+    background-color: rgba(121, 121, 121, 0.8);
     width: 5px;
     &:hover {
       height: 4px;
       background-color: transparent !important;
       opacity: 0.4 !important;
       #{$r}__thumb-x {
-        height: 4px;
+        height: 5px;
         right: 0;
       }
     }
   }
-  &__thumb-y,
+  &__thumb-x,
   &__thumb-y {
     background-color: rgba(121, 121, 121, 0.8);
+  }
+  &__thumb-y {
     width: 5px;
     right: 0;
   }
+  &__thumb-x {
+    height: 5px;
+  }
 }
 
+
 .ti-tags {
   background-color: var(--color-bg) !important;
 }

src/renderer/components/snippets/SnippetFragments.vue

@@ -1,18 +1,20 @@
 <template>
-  <div class="fragments">
-    <div
-      v-for="(i, index) in snippetStore.fragmentLabels"
-      :key="index"
-      class="item"
-      :class="{ 'is-active': index == snippetStore.fragment }"
-      @click="onClickFragment(index)"
-    >
-      <SnippetsFragmentsInput
-        :name="i"
-        :index="index"
-      />
+  <PerfectScrollbar>
+    <div class="fragments">
+      <div
+        v-for="(i, index) in snippetStore.fragmentLabels"
+        :key="index"
+        class="item"
+        :class="{ 'is-active': index == snippetStore.fragment }"
+        @click="onClickFragment(index)"
+      >
+        <SnippetsFragmentsInput
+          :name="i"
+          :index="index"
+        />
+      </div>
     </div>
-  </div>
+  </PerfectScrollbar>
 </template>
 
 <script setup lang="ts">
@@ -34,7 +36,7 @@ const fragmentHeight = appStore.sizes.editor.fragmentsHeight + 'px'
   display: flex;
   align-items: center;
   height: v-bind(fragmentHeight);
-  overflow-y: auto;
+  // overflow-y: auto;
   .item {
     padding: 0 var(--spacing-xs);
     display: flex;