From 8432da161cac7c9e13347488dfd1fa2c31d66a89 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Tue, 11 Aug 2020 00:49:47 -0600
Subject: [PATCH] Adjust styling of everything & make mobile friendly

---
 src/components/modals/DetailedTrack.vue | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/modals/DetailedTrack.vue b/src/components/modals/DetailedTrack.vue
index faed629..90f1aef 100644
--- a/src/components/modals/DetailedTrack.vue
+++ b/src/components/modals/DetailedTrack.vue
@@ -114,36 +114,41 @@ export default {
 .modal {
 	background-color: var(--modal-background);
 	border-radius: var(--corner-rounding);
+	padding: 0 15px 15px 15px;
+	overflow-y: auto;
 	max-height: 85%;
-	padding: 0 15px;
 	z-index: 11;
 	width: 90%;
 }
 
+h2 {
+	text-align: center;
+}
+
 .audio-features-container {
 	justify-content: space-evenly;
-	flex-direction: row;
+	flex-direction: column;
 	flex-wrap: wrap;
 	display: flex;
 }
 
 .audio-feature {
+	padding: 5px 5px 5px 27vw;
 	align-items: center;
 	display: flex;
-	padding: 5px;
 	margin: 5px;
 }
 
-div.separator {
-	background-color: var(--accent1);
-	height: 2px;
-	width: 100%;
-}
-
 @media only screen and (min-width: 768px) {
 	.modal {
-		width: 50%;
 		max-height: 75%;
+		width: 50%;
+	}
+	.audio-features-container {
+		flex-direction: row;
+	}
+	.audio-feature {
+		padding: 5px;
 	}
 }
 </style>
\ No newline at end of file