fix(front): set gap between consecutive items in table (upload widget)

front/src/components/library/FileUpload.vue

@@ -349,7 +349,7 @@ useEventListener(window, 'beforeunload', (event) => {
 })
 
 // collapse section
-const section = ref(false)
+const isServerDisclosureOpen = ref(false)
 </script>
 
 <template>
@@ -393,6 +393,7 @@ const section = ref(false)
   <file-upload-widget
     ref="upload"
     v-model="files"
+    :class="$style.uploader"
     :data="uploadData"
     @input-file="inputFile"
   >
@@ -469,8 +470,8 @@ const section = ref(false)
   <!-- Edit the metadata of uploaded files -->
 
   <Table
-    :class="$style.table"
     v-if="files.length > 0"
+    :class="$style.table"
     :grid-template-columns="['1fr', 'auto', 'auto', 'auto']"
   >
     <template #header>
@@ -580,9 +581,9 @@ const section = ref(false)
     align-left
     no-items
     v-bind="
-      section
-        ? { collapse: () => { section = false } }
-        : { expand: () => { section = true } }
+      isServerDisclosureOpen
+        ? { collapse: () => { isServerDisclosureOpen = false } }
+        : { expand: () => { isServerDisclosureOpen = true } }
     "
   >
     <div style="grid-column: 1 / -1">
@@ -617,12 +618,12 @@ const section = ref(false)
 </template>
 
 <style module lang="scss">
-  .file-uploads {
+  .uploader {
     padding: 32px;
     border-radius: var(--fw-border-radius);
     border: 2px dashed var(--border-color);
   }
   .table {
-    b:not(:first-child) { margin-left: 12px; }
+    b { padding: 0 6px; }
   }
 </style>