update

app/public/css/style.scss

@@ -2,7 +2,6 @@ html,
 body {
   padding: 0;
   margin: 0;
-  border: none;
 }
 
 
@@ -41,6 +40,10 @@ canvas {
   text-align: center;
 }
 
+.free-width {
+    width: auto;
+}
+
 .vertical {
     flex-direction: column;
     justify-content: center;
@@ -68,6 +71,69 @@ canvas {
     flex-direction: column;
 }
 
+.file-view {
+    width: 40%;
+}
+
+.file-table {
+    border-collapse: separate;
+    width: 100%;
+    tr {
+        
+    }
+}
+
+
+
+.files {
+    #file {
+        margin-bottom: 5px;
+        display: flex;
+        height: 30px;
+        justify-content: center;
+        vertical-align: middle;
+        flex-direction: row;
+        gap: 0;
+        row-gap: 0;
+        #name {
+            display: flex;
+            flex-basis: 90%;
+            padding: 0;
+            vertical-align: middle;
+            p { 
+                line-height: 0.5;
+                display: inline-block;
+                text-align: left;
+                vertical-align: middle;
+                margin: 0;
+            }
+        }
+        #actions {
+            flex-basis: 10%;
+            height: 100%;
+            width: 15px;
+        }
+        .action-box {
+            display: grid;
+            background-color: #1b1b1b;
+            color: white;
+            padding: 2px;
+            width: 50%;
+        }
+        .action-box * {
+            height: 100%;
+            width: 100%;
+            grid-column: 1;
+            grid-row: 1;
+            margin: 0;
+        }
+    }
+}
+
+.img-download {
+    height: 100%;
+}
+
 .button {
     display: inline-block;
     border-radius: 4px;
@@ -125,6 +191,11 @@ canvas {
         flex-direction: row;
         justify-content: center;
         cursor: pointer;
+
+        #actions {
+            background-color: #1b1b1b;
+        }
+
         img {
             height: 100%;
             flex-basis: 40%;