feat: improve spacing

src/App.tsx

@@ -1,7 +1,7 @@
 import "./App.css";
 
-import { Dispatch, FC, SetStateAction, useState } from "react";
-import { ReactSortable, ReactSortableProps, Sortable } from "react-sortablejs";
+import { useState } from "react";
+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
-        style={{
-          display: "flex",
-          flexWrap: "nowrap",
-          justifyContent: "space-evenly",
-        }}
-      >
+      <div className="container">
         <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>