DESIGN_GUIDELINES.md

@@ -221,6 +221,11 @@ If these cannot be met, use `secondary`/`outline` instead of `ghost`.
 - **MUST:** Required fields are marked consistently (UI indicator + accessible text).
 - **SHOULD:** If required-ness is configurable via settings, display it consistently in the form.
 
+### 6.4 Form layout (settings / long forms)
+- **SHOULD:** On wide viewports, use a responsive grid so related fields share a row and reduce scrolling (e.g. `grid grid-cols-1 lg:grid-cols-2` or `lg:grid-cols-[2fr_5rem_1fr]` for mixed widths).
+- **SHOULD:** Limit the main content width for readability (e.g. Settings page uses `max-w-4xl mx-auto px-4` around the content area below the header).
+- **Example:** SMTP settings use three rows on large screens (Host, Port, TLS/SSL | Username, Password | Sender email, Sender name) without subsection labels.
+
 ---
 
 ## 7) Lists, Search & Filters (mandatory UX consistency)

docs/smtp-configuration-concept.md

@@ -44,6 +44,8 @@ When an ENV variable is set, the corresponding Settings field is read-only in th
 
 **Important:** On most SMTP servers (e.g. Postfix with strict relay policies) the sender email (`smtp_from_email`) must be the same address as `smtp_username` or an alias that is owned by that account.
 
+**Settings UI:** The form uses three rows on wide viewports: host, port, TLS/SSL | username, password | sender email, sender name. Content width is limited by the global settings wrapper (see `DESIGN_GUIDELINES.md` §6.4).
+
 ---
 
 ## 5. Password from File

priv/gettext/de/LC_MESSAGES/default.po

@@ -3306,7 +3306,7 @@ msgstr "Um die Löschung zu bestätigen, gib bitte den Gruppennamen ein:"
 msgid "To confirm deletion, please enter this text:"
 msgstr "Um die Löschung zu bestätigen, gib bitte folgenden Text ein:"
 
-#: lib/mv_web/components/layouts/sidebar.ex
+#: lib/mv_web/components/core_components.ex
 #, elixir-autogen, elixir-format
 msgid "Toggle dark mode"
 msgstr "Dunklen Modus umschalten"

priv/gettext/default.pot

@@ -3307,7 +3307,7 @@ msgstr ""
 msgid "To confirm deletion, please enter this text:"
 msgstr ""
 
-#: lib/mv_web/components/layouts/sidebar.ex
+#: lib/mv_web/components/core_components.ex
 #, elixir-autogen, elixir-format
 msgid "Toggle dark mode"
 msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -3307,7 +3307,7 @@ msgstr ""
 msgid "To confirm deletion, please enter this text:"
 msgstr ""
 
-#: lib/mv_web/components/layouts/sidebar.ex
+#: lib/mv_web/components/core_components.ex
 #, elixir-autogen, elixir-format
 msgid "Toggle dark mode"
 msgstr ""