From d85d48bc1f728b575428a4d56630368c3d11dded Mon Sep 17 00:00:00 2001
From: KatieFrogs <23621460+KatieFrogs@users.noreply.github.com>
Date: Sat, 26 Feb 2022 03:24:46 +0300
Subject: [PATCH] CSS fixes

---
 public/src/css/search.css   | 19 +++++++++++++------
 public/src/js/songselect.js |  2 +-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/public/src/css/search.css b/public/src/css/search.css
index 1024e68..067d55f 100644
--- a/public/src/css/search.css
+++ b/public/src/css/search.css
@@ -18,7 +18,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    width: 60em;
+    width: min(100%, 60em);
     height: 80%;
     border-radius: 0.8em;
     border: 0.35em solid #8C0C42;
@@ -167,6 +167,7 @@
     width: 100%;
     padding: 0.1em 0;
     border-radius: 0 0 0.3em 0.3em;
+    overflow: hidden;
 }
 
 .song-search-result-easy {
@@ -218,21 +219,27 @@
     background-size: 1.4em;
     background-position-x: center;
     background-repeat: repeat-y;
-    width: 100%;
     position: absolute;
-    height: 2em;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    width: 1.4em;
+    height: 1.3em;
+    margin-bottom: 1.2em;
 }
 
 .song-search-result-gold {
-	background-position-y: 4.1em;
+	background-position-y: 59%;
 }
 
 .song-search-result-silver {
-	background-position-y: 6.1em;
+	background-position-y: 29%;
 }
 
 .song-search-result-noclear {
-	background-position-y: 0.15em;
+	background-position-y: -1%;
 }
 
 #song-search-tip {
diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js
index b22e995..2a224c7 100644
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -96,7 +96,7 @@ class SongSelect{
 			var stripped = key.replace(/\W/g, '')
 
 			document.styleSheets[0].insertRule('.song-search-' + stripped + ' { background-color: ' + skin.background + ' }')
-			document.styleSheets[0].insertRule('.song-search-' + stripped + '::before { border: 0.4vmax solid ' + skin.border[0] + ' ; border-bottom-color: ' + skin.border[1] + ' ; border-right-color: ' + skin.border[1] + ' }')
+			document.styleSheets[0].insertRule('.song-search-' + stripped + '::before { border: 0.4em solid ' + skin.border[0] + ' ; border-bottom-color: ' + skin.border[1] + ' ; border-right-color: ' + skin.border[1] + ' }')
 			document.styleSheets[0].insertRule('.song-search-' + stripped + ' .song-search-result-title::before { -webkit-text-stroke: 0.4em ' + skin.outline + ' }')
 			document.styleSheets[0].insertRule('.song-search-' + stripped + ' .song-search-result-subtitle::before { -webkit-text-stroke: 0.4em ' + skin.outline + ' }')
 		})