fixed the bullshit scrollbar

package.json

@@ -2,7 +2,7 @@
   "name": "amethyst",
   "author": "Geoxor <[email protected]>",
   "productName": "Amethyst",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "./release/dist/main/main.js",
   "description": "A music box made of amethyst.",
   "scripts": {

src/renderer/App.vue

@@ -19,6 +19,24 @@ html, body, #app, #app > div {
   @apply h-full w-full ;
 }
 
+*::-webkit-scrollbar {
+  width: 4px;
+  height:4px;
+}
+*:hover::-webkit-scrollbar {
+  overflow-y: overlay;
+}
+*::-webkit-scrollbar-track,
+*::-webkit-scrollbar-corner {
+  border-radius: 20px;
+  @apply bg-gray-100;
+}
+*::-webkit-scrollbar-thumb {
+  border-radius: 20px;
+  @apply bg-gray-400;
+  border: transparent;
+}
+
 .fullscreen {
   @apply fixed top-0 left-0 z-0 w-full h-full;
 }

src/renderer/components/Explorer.vue

@@ -4,10 +4,10 @@ const state = useState();
 </script>
 
 <template>
-  <div class="min-w-48 max-w-48 p-2 flex h-full overflow-hidden overflow-y-scroll ">
+  <div class="min-w-48 max-w-48 p-2 flex h-full overflow-hidden overflow-y-auto ">
     <ul>
       <li v-for="(song, i) of state.queue" :key="song">
-        <p class="font-cozette hover:text-blue-300 cursor-default text-[11px] max-w-40 overflow-hidden overflow-ellipsis whitespace-nowrap" @click="state.currentlyPlaying = i">
+        <p class="font-cozette hover:text-blue-300 cursor-default text-[11px] max-w-43 overflow-hidden overflow-ellipsis whitespace-nowrap" @click="state.currentlyPlaying = i">
           {{ song.substring(song.lastIndexOf("\\") + 1) }}
         </p>
       </li>

src/renderer/views/Home.vue

@@ -117,7 +117,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex h-full ">
+  <div class="flex h-[calc(100%-24px)]">
     <explorer />
     <div v-if="sound && metadata" class="h-full flex w-full flex-col">
       <div class="flex p-1 gap-2 items-center">