update track carousel appearance

common/static/css/boofilsic.css

@@ -1203,7 +1203,6 @@ select::placeholder {
   letter-spacing: 0.1rem;
   word-break: keep-all;
   opacity: 0.8;
-
   position: relative;
   top: -1px;
 }
@@ -1679,32 +1678,39 @@ select::placeholder {
 
 .track-carousel {
   position: relative;
-  overflow: auto;
-  scroll-behavior: smooth;
-  scrollbar-width: none;
   margin-top: 5px;
 }
 
-.track-carousel::-webkit-scrollbar {
-  height: 0px;
-}
-
 .track-carousel__content {
-  display: -ms-grid;
-  display: grid;
-  grid-gap: 16px;
+  overflow: auto;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   margin: auto;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  grid-auto-flow: column;
+  padding-bottom: 10px;
+}
+
+.track-carousel__content::-webkit-scrollbar {
+  height: 3px;
+  width: 1px;
+  background-color: #e5e5e5;
+}
+
+.track-carousel__content::-webkit-scrollbar-thumb {
+  background-color: #bbb;
 }
 
 .track-carousel__track {
-  width: 10vw;
-  height: 13vw;
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
+  min-width: 18%;
+  max-width: 18%;
+  margin-right: 2.5%;
 }
 
 .track-carousel__track img {
@@ -1732,17 +1738,16 @@ select::placeholder {
   outline: 0;
   cursor: pointer;
   position: absolute;
+  top: 50%;
 }
 
 .track-carousel__button--prev {
-  top: 50%;
   left: 0;
   -webkit-transform: translate(50%, -50%);
           transform: translate(50%, -50%);
 }
 
 .track-carousel__button--next {
-  top: 50%;
   right: 0;
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
@@ -1821,9 +1826,13 @@ select::placeholder {
   .review-head .review-head__actions {
     float: unset;
   }
+  .track-carousel__content {
+    padding-bottom: 10px;
+  }
   .track-carousel__track {
-    width: 32vw;
-    height: 40vw;
+    min-width: 31%;
+    max-width: 31%;
+    margin-right: 4.5%;
   }
 }
 

common/static/sass/_MainSection.sass

@@ -379,28 +379,34 @@ $mark-review-padding-wider: 6px 0
 
 .track-carousel
 	position: relative
-	overflow: auto
-	scroll-behavior: smooth
-	scrollbar-width: none
 	margin-top: 5px
 	// padding: 0
 
-	&::-webkit-scrollbar
-		height: 0px
 	&__content
-		display: grid
-		grid-gap: 16px
+		overflow: auto
+		scroll-behavior: smooth
+		scrollbar-width: none
+		display: flex
 		margin: auto
 		box-sizing: border-box
-		grid-auto-flow: column
-		// grid-template-columns:  max-content
+		padding-bottom: 10px
+		&::-webkit-scrollbar
+			// horizontal scrollbar width
+			height: 3px
+			// vertical scrollbar width
+			width: 1px
+			background-color: $color-quinary
+		&::-webkit-scrollbar-thumb
+			background-color: $color-tertiary
+
+
 	&__track
-		width: 10vw
-		height: 13vw
-		// grid-column: 1
 		text-align: center
 		overflow: hidden
 		text-overflow: ellipsis
+		min-width: 18%
+		max-width: 18%
+		margin-right: 2.5%
 		& img
 			object-fit: contain
 	&__track-title
@@ -419,12 +425,11 @@ $mark-review-padding-wider: 6px 0
 		outline: 0
 		cursor: pointer
 		position: absolute
+		top: 50%
 		&--prev
-			top: 50%
 			left: 0
 			transform: translate(50%, -50%)
 		&--next
-			top: 50%
 			right: 0
 			transform: translate(-50%, -50%)
 
@@ -495,9 +500,12 @@ $mark-review-padding-wider: 6px 0
 			float: unset
 	
 	.track-carousel
+		&__content
+			padding-bottom: 10px
 		&__track
-			width: 32vw
-			height: 40vw
+			min-width: 31%
+			max-width: 31%
+			margin-right: 4.5%
 
 
 // Medium devices (tablets, 768px and up)

music/templates/music/album_detail.html

@@ -188,18 +188,18 @@
                                         </div>
                                         {% endfor %}
                                     </div>
-                                    <!-- <button class="track-carousel__button track-carousel__button--prev">
+                                    <!-- <div class="track-carousel__button track-carousel__button--prev">
                                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                             <path fill="none" d="M0 0h24v24H0V0z" />
                                             <path d="M15.61 7.41L14.2 6l-6 6 6 6 1.41-1.41L11.03 12l4.58-4.59z" />
                                         </svg>
-                                    </button>
-                                    <button class="track-carousel__button track-carousel__button--next">
+                                    </div>
+                                    <div class="track-carousel__button track-carousel__button--next">
                                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                             <path fill="none" d="M0 0h24v24H0V0z" />
                                             <path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z" />
                                         </svg>
-                                    </button> -->
+                                    </div> -->
                                 </div>
                                     
                             </div>