drag drop sort swap

client/src/styles/app.css

@@ -25,26 +25,31 @@ h1, h2, h3, h4 {
     padding: 0;
 }
 button {
-margin: 0.2em;
 border: none;
 padding: 0.4em;
 }
-button.remove-box, button.edit-box {
-    width: 100%;
+button.box-function, button.item-function {
+    font-size: 1em;
 }
 button:hover {
     cursor: pointer;
 }
+.box {
+    box-sizing: content-box;
+    outline: 1px solid black;
+    box-shadow: 4px 4px black;
+}
 .box-subtitle {
+    margin: 0;
     display: grid;
     grid-template-columns: 1fr 1fr;
     font-size: 12px;
     text-transform: lowercase;
 }
 ul.list-box {
+    padding: 10px;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
-    padding: 0 0 0 1em;
     margin: 0;
     gap: 1em;
 }
@@ -55,3 +60,7 @@ ul.list-box-item {
 p {
     margin: 0;
 }
+.drop-zone {
+    width: 100px;
+    height: 100px;
+}