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