fix: fretboard scrollbars on desktop

Author: krmax44

src/components/VirtualFretboard.pcss

@@ -26,16 +26,8 @@
 	.body {
 		width: 24rem;
 
-		& > div.fret {
-			background-color: transparent;
-		}
-
-		& div.string-container {
-			@apply cursor-auto;
-		}
-
-		& div.string:first-of-type {
-			@apply border-gray-600;
+		.string {
+			@apply m-0 w-full border-gray-600;
 		}
 	}
 }
@@ -46,13 +38,23 @@
 	height: 87.5%;
 	@apply flex w-full;
 
-	&.disabled {
-		opacity: 0.7;
+	& > .fret {
+		min-width: 50px;
+		@apply flex flex-col justify-around py-2 w-full relative;
 	}
 
+	.string-container {
+		@apply flex items-center h-6;
+	}
+
+	.string {
+		@apply border-gray-600 border-b-2;
+	}
+}
+
+.fretboard {
 	& > .fret {
-		min-width: 50px;
-		@apply flex flex-col justify-around py-2 border-gray-300 border-r-2 w-full relative bg-gray-800;
+		@apply bg-gray-800 border-gray-300 border-r-2;
 
 		&:first-of-type {
 			@apply bg-gray-600;
@@ -72,48 +74,47 @@
 		}
 	}
 
-	& .string-container {
-		@apply flex items-center h-6 cursor-pointer;
+	.string-container {
+		@apply cursor-pointer;
 	}
 
-	& .string {
+	.string {
 		margin: 0 -2px;
 		width: calc(100% + 2px);
-		@apply border-gray-600 border-b-2;
 	}
 
-	& .string-container:nth-child(n + 4) .string {
+	.string-container:nth-child(n + 4) .string {
 		border-bottom-width: 3px;
 	}
 
-	& .dots {
+	.dots {
 		top: 15%;
 		bottom: 15%;
 		@apply flex flex-col justify-around items-center absolute inset-x-0 py-2 pointer-events-none;
 	}
 
-	& .dot {
+	.dot {
 		transition: background-color 1s;
 		@apply rounded-full h-4 w-4 bg-gray-200;
 	}
 
-	& .dots.dots-feedback {
+	.dots.dots-feedback {
 		@apply inset-0;
 	}
 
-	& .dots-feedback .dot {
+	.dots-feedback .dot {
 		background-color: transparent;
 	}
 
-	& .dot.wrong {
+	.dot.wrong {
 		background-color: theme('colors.brand-red');
 	}
 
-	& .dot.correct {
+	.dot.correct {
 		@apply bg-green-500;
 	}
 
-	& .dot.no-transition {
+	.dot.no-transition {
 		transition: none;
 	}
 }