From 3a4b1573636597c8dfce82c53d83fa215ea2f3ef Mon Sep 17 00:00:00 2001
From: Zach Parks <zach@alliware.com>
Date: Sat, 12 Aug 2023 22:06:28 -0500
Subject: [PATCH] Adjustments to player-settings.css for better UI on small
 view-widths. (#2019)

Also removes "portrait" media query as it forces this display method for large monitors.
---
 WebHostLib/static/styles/player-settings.css | 27 +++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/WebHostLib/static/styles/player-settings.css b/WebHostLib/static/styles/player-settings.css
index 9ba47d5f..e6e0c292 100644
--- a/WebHostLib/static/styles/player-settings.css
+++ b/WebHostLib/static/styles/player-settings.css
@@ -5,7 +5,8 @@ html{
 }
 
 #player-settings{
-    max-width: 1000px;
+    box-sizing: border-box;
+    max-width: 1024px;
     margin-left: auto;
     margin-right: auto;
     background-color: rgba(0, 0, 0, 0.15);
@@ -163,6 +164,11 @@ html{
     background-color: #ffef00; /* Same as .interactive in globalStyles.css */
 }
 
+#player-settings table .randomize-button[data-tooltip]::after {
+    left: unset;
+    right: 0;
+}
+
 #player-settings table label{
     display: block;
     min-width: 200px;
@@ -177,18 +183,31 @@ html{
     vertical-align: top;
 }
 
-@media all and (max-width: 1000px), all and (orientation: portrait){
+@media all and (max-width: 1024px) {
+    #player-settings {
+        border-radius: 0;
+    }
+
     #player-settings #game-options{
         justify-content: flex-start;
         flex-wrap: wrap;
     }
 
-    #player-settings .left, #player-settings .right{
-        flex-grow: unset;
+    #player-settings .left,
+    #player-settings .right {
+        margin: 0;
+    }
+
+    #game-options table {
+        margin-bottom: 0;
     }
 
     #game-options table label{
         display: block;
         min-width: 200px;
     }
+
+    #game-options table tr td {
+        width: 50%;
+    }
 }