From 6b70ce8bb2cdd1c83757712dab950f01e1ef5e61 Mon Sep 17 00:00:00 2001
From: julius <julius@0124816.xyz>
Date: Sat, 25 Jan 2025 15:02:34 +0100
Subject: [PATCH] feat: add and improve hints

---
 src/App.css       | 18 ++++++++++++++----
 src/Chemistry.tsx |  8 +++++---
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/App.css b/src/App.css
index 67f8394..cccd22c 100644
--- a/src/App.css
+++ b/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;
-  width: 80%;
-  margin: auto;
+  max-width: 400px;
+  min-width: 200px;
+  margin: 4px auto;
   .item {
     font-weight: bold;
     border-style: solid;
diff --git a/src/Chemistry.tsx b/src/Chemistry.tsx
index 0fba18a..01074d7 100644
--- a/src/Chemistry.tsx
+++ b/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>
           )}