From 5b2c75deb4f8cc90e3d2875c62bf4170f47bcd58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 8 Sep 2026 11:26:56 +0200
Subject: [PATCH] style: align file upload controls

---
 components/interactive-elements.html          | 11 +++++-----
 patterns/file-upload.html                     | 10 +++------
 styles/10-components-interactive-elements.css | 21 ++++++++++++-------
 styles/47-patterns-file-upload.css            | 17 ++++++++-------
 4 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/components/interactive-elements.html b/components/interactive-elements.html
index 5625d64..1ccb7f9 100644
--- a/components/interactive-elements.html
+++ b/components/interactive-elements.html
@@ -849,12 +849,13 @@
   <script src="../scripts/help-icon-overlays.js"></script>
   <section id="component-file-input">
     <p class="sg-preview-label">Component: File Input</p>
-    <div class="sg-form-preview-area">
+      <div class="sg-form-preview-area">
       <div class="sg-file-input" data-component="file-input">
-        <label class="sg-label" for="component-file-input-control">Dateien auswählen</label>
-        <p class="sg-file-input__description sg-body" id="component-file-input-description">Mehrere Dateien können ausgewählt werden.</p>
-        <input class="sg-file-input__control" id="component-file-input-control" type="file" multiple aria-describedby="component-file-input-description">
-        <button class="sg-interaction-element sg-button sg-button--active sg-file-input__trigger" type="button">Dateien auswählen</button>
+        <div class="sg-file-input__row sg-labeled-input-row">
+          <label class="sg-label" for="component-file-input-control">Datei auswählen</label>
+          <input class="sg-file-input__control" id="component-file-input-control" type="file" multiple>
+          <button class="sg-interaction-element sg-button sg-button--active sg-file-input__trigger" type="button">Dateien auswählen</button>
+        </div>
       </div>
     </div>
   </section>
diff --git a/patterns/file-upload.html b/patterns/file-upload.html
index 6e5c1e2..d8cee8d 100644
--- a/patterns/file-upload.html
+++ b/patterns/file-upload.html
@@ -11,13 +11,9 @@
   <section id="pattern-file-upload">
     <p class="sg-preview-label">Pattern: Datei-Upload</p>
     <form class="sg-file-upload" data-pattern="file-upload" action="#" method="post">
-      <div>
-        <label class="sg-label" for="file-upload-input">Dokumente hochladen</label>
-        <p class="sg-body sg-file-upload__description" id="file-upload-help">Mehrere Dateien auswählen. Erlaubte Formate: PDF, DOCX. Maximale Dateigröße: 10 MB pro Datei.</p>
-      </div>
-      <div class="sg-file-upload__dropzone" data-drag-over="false">
-        <input class="sg-file-input__control" id="file-upload-input" name="documents" type="file" multiple aria-describedby="file-upload-help file-upload-status">
-        <p class="sg-body sg-file-upload__prompt">Dateien hierher ziehen oder</p>
+      <div class="sg-file-upload__dropzone sg-labeled-input-row" data-drag-over="false">
+        <label class="sg-label" for="file-upload-input">Datei auswählen</label>
+        <input class="sg-file-input__control" id="file-upload-input" name="documents" type="file" multiple aria-describedby="file-upload-status">
         <button class="sg-interaction-element sg-button sg-button--active sg-file-upload__trigger" type="button">Dateien auswählen</button>
       </div>
       <p class="sg-body sg-file-upload__status" id="file-upload-status" aria-live="polite">Noch keine Dateien ausgewählt.</p>
diff --git a/styles/10-components-interactive-elements.css b/styles/10-components-interactive-elements.css
index d064e22..765fadd 100644
--- a/styles/10-components-interactive-elements.css
+++ b/styles/10-components-interactive-elements.css
@@ -1588,9 +1588,14 @@
 
 /* Component: File Input */
 .sg-file-input {
+  width: 100%;
+}
+
+.sg-file-input__row {
   display: flex;
-  flex-direction: column;
-  gap: var(--spacing-small);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
   width: 100%;
 }
 
@@ -1611,15 +1616,17 @@
   outline-offset: 2px;
 }
 
-.sg-file-input__description {
-  margin: 0;
-  color: var(--text-control-disabled);
-}
-
 .sg-file-input__trigger {
   align-self: flex-start;
 }
 
+@media (max-width: 48rem) {
+  .sg-file-input__row {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
 .sg-file-input--disabled {
   opacity: var(--disabled-opacity);
 }
diff --git a/styles/47-patterns-file-upload.css b/styles/47-patterns-file-upload.css
index 2af081a..3e1f594 100644
--- a/styles/47-patterns-file-upload.css
+++ b/styles/47-patterns-file-upload.css
@@ -14,7 +14,6 @@
   max-width: var(--layout-input-field-max-width);
 }
 
-.sg-file-upload__description,
 .sg-file-upload__status,
 .sg-file-upload__file-meta {
   margin: var(--spacing-small) 0 0;
@@ -22,9 +21,10 @@
 
 .sg-file-upload__dropzone {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--spacing-small);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-large);
+  width: 100%;
   padding: var(--spacing-large);
   background: var(--surface-file-upload-dropzone);
   border: 1px dashed var(--surface-button-active);
@@ -36,10 +36,6 @@
   outline-offset: 2px;
 }
 
-.sg-file-upload__prompt {
-  margin: 0;
-}
-
 .sg-file-upload__files {
   display: flex;
   flex-direction: column;
@@ -78,6 +74,11 @@
 }
 
 @media (max-width: 48rem) {
+  .sg-file-upload__dropzone {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
   .sg-file-upload__file {
     align-items: flex-start;
     flex-direction: column;