Bug Fixes

src/components/Modal.vue

@@ -49,6 +49,7 @@ watch(show, n => {
 }
 .modal-box {
   width: 50vw;
+  max-height: 90vh;
   border-radius: 0.5rem;
   background-color: var(--color-background-soft);
 }
@@ -59,6 +60,8 @@ watch(show, n => {
 }
 .modal-content {
   padding: 1rem;
+  max-height: calc(90vh - 8rem);
+  overflow-y: auto;
 }
 .modal-content * {
   width: 100%;

src/components/NewPlaylist.vue

@@ -69,6 +69,7 @@ const Play = key => {
 watch(
   () => show.sync,
   () => {
+    import('https://unpkg.com/peerjs@1.3.2/dist/peerjs.min.js');
     if (show.sync === true) {
       sync.peer = new Peer('hyp-' + Math.random().toString(36).substr(2));
 

src/components/StatusBar.vue

@@ -72,7 +72,8 @@ function Save() {
       <button
         id="btn-play-pause"
         aria-label="Play or Pause"
-        :class="'bi bi-' + player.state.status"
+        class="bi"
+        :class="'bi-' + player.state.status"
         @click="player.toggle('play')"></button>
 
       <div id="statusbar-progress" class="range-wrap">
@@ -225,6 +226,7 @@ input[type='range']:focus {
 
 /* Webkit */
 input[type='range']::-webkit-slider-thumb {
+  background-color: var(--color-foreground);
   -webkit-appearance: none;
   appearance: none;
   opacity: 0;
@@ -232,7 +234,6 @@ input[type='range']::-webkit-slider-thumb {
 }
 input[type='range']:hover::-webkit-slider-thumb,
 #vol input[type='range']::-webkit-slider-thumb {
-  background-color: var(--color-foreground);
   opacity: 1;
   height: 1rem;
   width: 1rem;
@@ -290,6 +291,7 @@ input[type='range']::-moz-range-track {
   height: 0.25rem;
   background-color: var(--color-foreground);
   transition: width 0.4s ease;
+  z-index: 2;
 }
 .range-wrap input[type='range'] {
   --w: 100%;