fix(file-uploader): fix spacing

projects/element-ng/file-uploader/si-file-uploader.component.html

@@ -25,38 +25,38 @@
 
 <div class="file-list">
   @for (file of files; track file) {
-    <div [class]="`file d-flex ${autoUpload() ? 'mb-8' : 'mb-4'}`" [class.fade-out]="file.fadeOut">
-      <si-icon class="icon align-self-center ms-6 me-4" [icon]="icons.elementDocument" />
-      <div class="flex-fill overflow-hidden">
+    <div class="file" [class.fade-out]="file.fadeOut">
+      <si-icon class="icon align-self-center ms-6 me-4" icon="element-document" />
+      <div class="flex-fill overflow-hidden mt-6">
         <div class="file-info">
           <div class="file-name text-truncate si-h5">{{ file.fileName }}</div>
           <div class="file-size text-secondary">{{ file.size }}</div>
+          @if (file.errorText) {
+            <div
+              class="d-inline-flex gap-2 error text-truncate"
+              [class.text-warning]="file.status === 'invalid'"
+              [class.text-danger]="file.status === 'error'"
+            >
+              <si-status-icon
+                class="icon-sm"
+                [status]="file.status === 'invalid' ? 'warning' : 'danger'"
+              />
+              {{ file.errorText | translate }}
+              @if (file.httpErrorText) {
+                : {{ file.httpErrorText }}
+              }
+            </div>
+          } @else {
+            <div class="position-relative mt-1 mb-5">
+              <div class="position-absolute end-0 mt-n6">{{ file.progress }} %</div>
+              <si-progressbar
+                height="small"
+                [value]="file.progress"
+                [ariaLabel]="uploadingText() | translate"
+              />
+            </div>
+          }
         </div>
-        @if (file.errorText) {
-          <div
-            class="error text-truncate d-flex align-items-center"
-            [class.text-warning]="file.status === 'invalid'"
-            [class.text-danger]="file.status === 'error'"
-          >
-            <si-status-icon
-              class="icon-sm my-n2 me-2"
-              [status]="file.status === 'invalid' ? 'warning' : 'danger'"
-            />
-            {{ file.errorText | translate }}
-            @if (file.httpErrorText) {
-              : {{ file.httpErrorText }}
-            }
-          </div>
-        } @else {
-          <div class="position-relative">
-            <div class="position-absolute si-caption end-0 mt-n8">{{ file.progress }} %</div>
-            <si-progressbar
-              height="small"
-              [value]="file.progress"
-              [ariaLabel]="uploadingText() | translate"
-            />
-          </div>
-        }
       </div>
       <div class="status align-self-center text-nowrap ps-4 pe-6">
         @if (file.status === 'error') {

projects/element-ng/file-uploader/si-file-uploader.component.scss

@@ -28,6 +28,9 @@
 }
 
 .file {
+  display: flex;
+  position: relative;
+  margin-block-end: map.get(variables.$spacers, 4);
   min-block-size: map.get(variables.$spacers, 4) + map.get(variables.$spacers, 10);
   transition: opacity variables.$element-default-transition-duration;
 }