feat: improve TeamPanel input placement

src/App.css

@@ -480,6 +480,7 @@ button {
 
 /*========TEAM PANEL========*/
 .team-panel {
+  max-width: 800px;
   padding: 1em;
   border: 3px solid black;
   box-shadow: 8px 8px black;
@@ -492,44 +493,47 @@ button {
 }
 
 .team-player {
-  cursor: pointer;
   color: black;
   background-color: #36c4;
   border: 1px solid black;
-  border-radius: 1em;
+  border-radius: 1.4em;
   margin: 4px;
-  padding: 0 0.5em;
+  padding: 0.2em 0.5em;
 
   &:hover {
     background-color: #36c8;
   }
+
+  &.new-player {
+    background-color: #3838;
+  }
 }
 
 .new-player-inputs {
   margin: auto;
 
   div {
-    display: flex;
-    flex-wrap: wrap;
-    margin: auto;
+    display: grid;
+    grid-template-columns: 20ch auto;
+
+    @media only screen and (max-width: 768px) {
+      grid-template-columns: auto;
+      place-items: center;
+    }
 
     label {
-      text-align: right;
-      margin-left: 2em;
-      margin-right: auto;
+      text-align: left;
+      width: 20ch;
+      margin: auto 1em;
     }
 
     input {
-      width: 200px;
-      margin: 2px 1em;
+      width: 90%;
+      margin: 4px 0;
     }
   }
 }
 
-#new-team-player {
-  background-color: #3838;
-  font-weight: bold;
-}
 
 @keyframes blink {