From b40c6fb0c64e96a679106db5e3ae05b86acf0a32 Mon Sep 17 00:00:00 2001
From: Robert Wilde <robert.wilde@siemens.com>
Date: Tue, 17 Mar 2026 17:56:30 +0100
Subject: [PATCH] fix(file-uploader): fix icon and text alignment

---
 ...d-element-examples-chromium-dark-linux.png |  4 +-
 ...-element-examples-chromium-light-linux.png |  4 +-
 ...d-element-examples-chromium-dark-linux.png |  4 +-
 ...-element-examples-chromium-light-linux.png |  4 +-
 .../si-file-uploader.component.html           | 56 +++++++++----------
 .../si-file-uploader.component.scss           |  3 +
 6 files changed, 39 insertions(+), 36 deletions(-)

diff --git a/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--added-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--added-element-examples-chromium-dark-linux.png
index b981304fbc..061db11226 100644
--- a/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--added-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--added-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4187c37eabea5f05ed8c93e980251bc430f64c5e051b3bffa7ce5ad38fde0d31
-size 31310
+oid sha256:f7a360c9b0ccab93e406357b01d1a3ca23ae47dda1a31494c2d15fb8c7730309
+size 31755
diff --git a/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--added-element-examples-chromium-light-linux.png b/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--added-element-examples-chromium-light-linux.png
index d68bc110c7..e92a130acd 100644
--- a/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--added-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--added-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0a8a10cc4d0c50084fd6dc442e2c5291f8b399442596d4e27ea5a9d91116daa3
-size 30333
+oid sha256:ad1434a21606f900932b71d9112e97123ad13955b55269ae3523e300f459469c
+size 30727
diff --git a/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--uploaded-element-examples-chromium-dark-linux.png b/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--uploaded-element-examples-chromium-dark-linux.png
index f418056fe3..f667cbf5f1 100644
--- a/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--uploaded-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--uploaded-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:aacc962b7dc8236b9345e4e9d5220a21d44e45a9c332c6a6356e003da1cc34f1
-size 34522
+oid sha256:0a394c81643eebd20a3897eae5f49582ce3d17d690a1e51e71039d83aeea1639
+size 34977
diff --git a/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--uploaded-element-examples-chromium-light-linux.png b/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--uploaded-element-examples-chromium-light-linux.png
index 38b2ce6997..e54ea3530e 100644
--- a/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--uploaded-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/si-file-uploader.spec.ts-snapshots/si-file-uploader--si-file-uploader--uploaded-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ec8173144b9affa66b1da542f3929fc7c500ea0538d0b2adee0982cd85c42dcc
-size 33844
+oid sha256:486c26daebcbc4e4c23e769b9a0709ae1e7c742e9df485a7b9db7c7463e80610
+size 34216
diff --git a/projects/element-ng/file-uploader/si-file-uploader.component.html b/projects/element-ng/file-uploader/si-file-uploader.component.html
index 9c4b32a4aa..c9dccf4fec 100644
--- a/projects/element-ng/file-uploader/si-file-uploader.component.html
+++ b/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') {
diff --git a/projects/element-ng/file-uploader/si-file-uploader.component.scss b/projects/element-ng/file-uploader/si-file-uploader.component.scss
index 874759d210..e81a3bd726 100644
--- a/projects/element-ng/file-uploader/si-file-uploader.component.scss
+++ b/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;
 }