feat: add and improve hints

src/App.css

@@ -1,5 +1,5 @@
 body {
-  background-color: ghostwhite;
+  /* background-color: ghostwhite; */
   color: black;
   overflow-wrap: anywhere;
 }
@@ -15,6 +15,15 @@ body {
   color: #444;
 }
 
+.hint {
+  position: absolute;
+  top: auto;
+  left: 4px;
+  bottom: auto;
+  right: 4px;
+  z-index: -1;
+}
+
 h1,
 h2 {
   margin-top: 0px;
@@ -38,6 +47,7 @@ h2 {
 }
 
 .box {
+  position: relative;
   min-width: 30%;
   max-width: 10vw;
   padding: 4px;
@@ -47,9 +57,9 @@ h2 {
 }
 
 .user {
-  max-width: 80vw;
+  max-width: 400px;
-  width: 80%;
+  min-width: 200px;
-  margin: auto;
+  margin: 4px auto;
   .item {
     font-weight: bold;
     border-style: solid;

src/Chemistry.tsx

@@ -75,7 +75,9 @@ export default function Chemistry() {
       <span className="grey">cool ultimate team tool</span>
       <div className="box user">
         <h2>your name?</h2>
-        {user.length < 1 && <span className="grey">drag your name here:</span>}
+        {user.length < 1 && (
+          <span className="grey hint">drag your name here:</span>
+        )}
         <PlayerList
           list={user}
           setList={setUser}
@@ -92,7 +94,7 @@ export default function Chemistry() {
         <div className="box">
           <h2>😬</h2>
           {playersLeft.length < 1 && (
-            <span className="grey">
+            <span className="grey hint">
               drag people here that you'd rather not play with
             </span>
           )}
@@ -116,7 +118,7 @@ export default function Chemistry() {
         <div className="box">
           <h2>😍</h2>
           {playersRight.length < 1 && (
-            <span className="grey">
+            <span className="grey hint">
               drag people here that you love playing with
             </span>
           )}