From 430a928df6389140c3520fbc42c2197dfb6d2d03 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Sun, 5 Apr 2026 11:19:35 +0200
Subject: [PATCH] feat: Update settings page layout with improved field
 structure and accessibility

---
 frontend/src/app.css                | 26 ++++++++++++++++++++++++++
 frontend/src/pages/SettingsPage.jsx | 18 ++++++++++++------
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index 1f54390..dc81b06 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -87,6 +87,32 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
 }
 .form-input:focus { outline: none; border-color: var(--accent); }
 .form-unit { font-size: 12px; color: var(--text3); width: 24px; }
+
+/* Einstellungen Profil: Label als Überschrift oben, volle Breite, linksbündig */
+.settings-page__field {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+}
+.settings-page__field-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text1);
+  text-align: left;
+  line-height: 1.3;
+}
+.settings-page__field .form-input {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  text-align: left;
+  box-sizing: border-box;
+}
 .form-select {
   font-family: var(--font); font-size: 13px; color: var(--text1);
   background: var(--surface2); border: 1.5px solid var(--border2);
diff --git a/frontend/src/pages/SettingsPage.jsx b/frontend/src/pages/SettingsPage.jsx
index c40ee7e..d014779 100644
--- a/frontend/src/pages/SettingsPage.jsx
+++ b/frontend/src/pages/SettingsPage.jsx
@@ -258,27 +258,33 @@ export default function SettingsPage() {
           </div>
         )}
 
-        <div className="form-row">
-          <label className="form-label">Name</label>
+        <div className="settings-page__field">
+          <label className="settings-page__field-label" htmlFor="settings-profile-name">
+            Name
+          </label>
           <input
+            id="settings-profile-name"
             type="text"
             className="form-input"
             value={form.name}
             onChange={(e) => setF('name', e.target.value)}
+            autoComplete="name"
           />
-          <span className="form-unit" />
         </div>
 
-        <div className="form-row">
-          <label className="form-label">E-Mail</label>
+        <div className="settings-page__field">
+          <label className="settings-page__field-label" htmlFor="settings-profile-email">
+            E-Mail
+          </label>
           <input
+            id="settings-profile-email"
             type="email"
             className="form-input"
             placeholder="für Login, Recovery & Zusammenfassungen"
             value={form.email}
             onChange={(e) => setF('email', e.target.value)}
+            autoComplete="email"
           />
-          <span className="form-unit" />
         </div>
         {activeProfile?.email && activeProfile?.email_verified === false && (
           <div