feat: improve spacing

src/App.css

@@ -22,6 +22,13 @@ h2 {
   background-color: ghostwhite;
 }
 
+.container {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-evenly;
+  min-width: min(80vw, 800px);
+}
+
 .dragbox {
   display: flex;
   flex-direction: column;
@@ -33,14 +40,21 @@ h2 {
 
 .box {
   min-width: 30%;
+  max-width: 10vw;
   padding: 4px;
-  margin: 4px auto;
+  margin: 4px min(2px, 4%);
   border-style: solid;
   border-color: black;
 }
 
 .user {
-  max-width: 80%;
+  max-width: 80vw;
+  width: 80%;
+  margin: auto;
+  .item {
+    font-weight: bold;
+    border-style: solid;
+  }
 }
 
 .item {

src/App.tsx

@@ -1,7 +1,7 @@
 import "./App.css";
 
-import { Dispatch, FC, SetStateAction, useState } from "react";
+import { useState } from "react";
-import { ReactSortable, ReactSortableProps, Sortable } from "react-sortablejs";
+import { ReactSortable, ReactSortableProps } from "react-sortablejs";
 
 interface Player {
   id: number;
@@ -33,7 +33,7 @@ type PlayerListProps = Partial<ReactSortableProps<any>> & {
 
 function PlayerList(props: PlayerListProps) {
   return (
-    <ReactSortable {...props} animation={200} className="dragbox">
+    <ReactSortable {...props} animation={200}>
       {props.list?.map((item, index) => (
         <div key={item.id} className="item">
           {props.orderedList ? index + 1 + ". " + item.name : item.name}
@@ -43,23 +43,23 @@ function PlayerList(props: PlayerListProps) {
   );
 }
 
-function handleSubmit(
-  user: Player[],
-  playersLeft: Player[],
-  playersMiddle: Player[],
-  playersRight: Player[]
-) {
-  console.log(user);
-  console.log(JSON.stringify(playersLeft));
-  console.log(JSON.stringify(playersRight));
-}
-
 function App() {
   const players = loadPlayers();
   const [user, setUser] = useState<Player[]>([]);
   const [playersLeft, setPlayersLeft] = useState<Player[]>([]);
   const [playersMiddle, setPlayersMiddle] = useState<Player[]>(players);
   const [playersRight, setPlayersRight] = useState<Player[]>([]);
+
+  function handleSubmit() {
+    if (user.length < 1) {
+      alert("who are you?");
+      return;
+    }
+    for (const u of user) {
+      console.log(u.name);
+    }
+  }
+
   return (
     <>
       <img alt="logo" height="128px" src="logo.svg" />
@@ -76,21 +76,17 @@ function App() {
               return to.el.children.length < 1;
             },
           }}
+          className="dragbox"
         />
       </div>
-      <div
+      <div className="container">
-        style={{
-          display: "flex",
-          flexWrap: "nowrap",
-          justifyContent: "space-evenly",
-        }}
-      >
         <div className="box">
           <h2>😬</h2>
           <PlayerList
             list={playersRight}
             setList={setPlayersRight}
             group={"shared"}
+            className="dragbox"
             orderedList
           />
         </div>
@@ -100,6 +96,7 @@ function App() {
             list={playersMiddle}
             setList={setPlayersMiddle}
             group={"shared"}
+            className="middle dragbox"
           />
         </div>
         <div className="box">
@@ -108,6 +105,7 @@ function App() {
             list={playersLeft}
             setList={setPlayersLeft}
             group={"shared"}
+            className="dragbox"
             orderedList
           />
         </div>