fix: Postfach bearbeiten im Dialog statt in der Karte

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

@@ -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"
   }
 }

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"
   }
 }

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)" }}>
+
+      {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>
   );

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); }