From 31f550901ae8e7bf983efb8b9f9d0d4b6cf058b3 Mon Sep 17 00:00:00 2001
From: Guido <guido.schmit03@gmail.com>
Date: Sat, 22 Aug 2026 20:20:01 +0200
Subject: [PATCH] fix: Postfach bearbeiten im Dialog statt in der Karte
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drei zusammenhaengende Aergernisse:

Der Papierkorb wurde zum roten Balken ueber die volle Breite. Ursache ist
.btn-pair: dort bekommt jeder Knopf flex:1, und ein umgebrochener Knopf
dehnt sich damit ueber die ganze Zeile. Die Aktionen haben jetzt eine
eigene Zeile, die umbricht ohne zu dehnen.

Das Formular wuchs innerhalb der Karte und ordnete damit den Spaltenfluss
der ganzen Einstellungsseite neu – deshalb sprang beim Bearbeiten das
Layout. Es liegt jetzt in einem Dialog, wie schon bei den Konten. Das
loest zugleich die Enge: im Dialog hat das Formular Platz.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 web/src/locales/de.json                |  3 ++-
 web/src/locales/en.json                |  3 ++-
 web/src/pages/settings/Postfaecher.jsx | 37 +++++++++++++++++---------
 web/src/styles.css                     |  5 ++++
 4 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/web/src/locales/de.json b/web/src/locales/de.json
index 2327b8c..573245c 100644
--- a/web/src/locales/de.json
+++ b/web/src/locales/de.json
@@ -528,6 +528,7 @@
     "secStarttls": "STARTTLS (Port 143)",
     "secNone": "keine",
     "secNoneWarn": "Ohne Verschlüsselung gehen Benutzername und Passwort im Klartext über das Netz. Nur sinnvoll, wenn der Mailserver auf demselben Rechner läuft.",
-    "addSender": "Absender zuordnen"
+    "addSender": "Absender zuordnen",
+    "edit": "Postfach bearbeiten"
   }
 }
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index a478473..c8bad95 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -528,6 +528,7 @@
     "secStarttls": "STARTTLS (port 143)",
     "secNone": "none",
     "secNoneWarn": "Without encryption the username and password travel in clear text. Only sensible when the mail server runs on the same machine.",
-    "addSender": "Map sender"
+    "addSender": "Map sender",
+    "edit": "Edit mailbox"
   }
 }
diff --git a/web/src/pages/settings/Postfaecher.jsx b/web/src/pages/settings/Postfaecher.jsx
index 3c7f03e..5f539c5 100644
--- a/web/src/pages/settings/Postfaecher.jsx
+++ b/web/src/pages/settings/Postfaecher.jsx
@@ -4,6 +4,7 @@ import { api } from "../../api";
 import { useToast } from "../../toast";
 import { useConfirm } from "../../confirm";
 import Icon from "../../components/Icon";
+import Modal from "../../components/Modal";
 
 const LEER = {
   name: "", host: "", port: 993, security: "ssl", username: "", password: "",
@@ -133,7 +134,7 @@ export default function Postfaecher() {
                 }).join(" · ")}
           </div>
           <SenderForm konten={konten} onAdd={(d) => absenderAnlegen(q, d)} t={t} />
-          <div className="btn-pair" style={{ marginTop: "var(--sp-2)" }}>
+          <div className="mail-actions">
             <button className="btn sm" disabled={busy} onClick={() => testen(q)}>{t("mailbox.test")}</button>
             <button className="btn sm primary" disabled={busy} onClick={() => abrufen(q)}>{t("mailbox.fetchNow")}</button>
             <button className="btn sm ghost" title={t("common.edit")}
@@ -146,12 +147,27 @@ export default function Postfaecher() {
         </div>
       ))}
 
-      {form === null ? (
-        <button className="btn" style={{ marginTop: "var(--sp-3)" }} onClick={() => setForm({ ...LEER })}>
-          <Icon name="plus" size={15} /> {t("mailbox.add")}
-        </button>
-      ) : (
-        <form onSubmit={speichern} style={{ marginTop: "var(--sp-3)" }}>
+      <button className="btn" style={{ marginTop: "var(--sp-3)" }} onClick={() => setForm({ ...LEER })}>
+        <Icon name="plus" size={15} /> {t("mailbox.add")}
+      </button>
+
+      {form !== null && (
+        <Modal
+          title={form.id ? t("mailbox.edit") : t("mailbox.add")}
+          onClose={() => { setForm(null); setOrdner(null); }}
+          footer={
+            <>
+              <button type="button" className="btn ghost"
+                      onClick={() => { setForm(null); setOrdner(null); }}>
+                {t("common.cancel")}
+              </button>
+              <button type="submit" form="postfach-form" className="btn primary" disabled={busy}>
+                {t("common.save")}
+              </button>
+            </>
+          }
+        >
+        <form id="postfach-form" onSubmit={speichern}>
           <label className="field">
             <span>{t("mailbox.name")}</span>
             <input value={form.name} onChange={(e) => setzen({ name: e.target.value })}
@@ -215,13 +231,8 @@ export default function Postfaecher() {
             <input type="number" min="5" max="1440" value={form.poll_minutes}
                    onChange={(e) => setzen({ poll_minutes: Number(e.target.value) })} />
           </label>
-          <div className="btn-pair">
-            <button className="btn primary" disabled={busy}>{t("common.save")}</button>
-            <button type="button" className="btn ghost" onClick={() => { setForm(null); setOrdner(null); }}>
-              {t("common.cancel")}
-            </button>
-          </div>
         </form>
+        </Modal>
       )}
     </div>
   );
diff --git a/web/src/styles.css b/web/src/styles.css
index 60df8b6..d898d9b 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -1150,3 +1150,8 @@ tr.row-active { background: var(--surface-2); }
 /* Postfach-Eintrag: gestapelt, weil die Einstellungsspalte schmal ist. */
 .mail-source { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
 .mail-source:last-of-type { border-bottom: 0; }
+
+/* Aktionen am Postfach: umbrechen ja, aber nicht auf volle Breite dehnen
+   (.btn-pair gibt seinen Knoepfen flex:1 – dort wird ein umgebrochener
+   Papierkorb zum roten Balken). */
+.mail-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }