fix: Eingangsliste – Name bekommt Platz, Auswahl nicht mehr die ganze Zeile

Die Kategorie-Auswahl traegt "width: 100%". In einer Flex-Zeile heisst das
"ich haette gern die ganze Zeile", also blieb fuer den Namen daneben nur der
Rest – Buchungstexte brachen mitten im Wort um, waehrend das Auswahlfeld
uebertrieben breit dastand.

Jetzt hat die Auswahl in einer Listenzeile eine eigene Breite, die nur noch
schrumpfen darf, der Name nimmt den Rest, und die Betraege stehen in einer
Spalte statt ausgefranst. Auf dem Telefon rutschen Auswahl und Knoepfe unter
den Namen statt ihn zusammenzuquetschen; Datum und Kontoname bleiben dabei je
fuer sich unzertrennlich, damit "Revolut CHF" nicht umbricht – die Waehrung
im Namen unterscheidet die beiden Revolut-Konten.

Wirkt genauso auf die Seite "Ohne Kategorie", die dieselbe Zeile benutzt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/finance.css

@@ -229,6 +229,56 @@
 .account-row:last-child {
   border-bottom: none;
 }
+
+/* Die Kategorie-Auswahl ist `width: 100%` – als Flex-Element heisst das „ich
+   brauche die ganze Zeile", und alles daneben wird bis zum Umbruch
+   zusammengedrückt. In einer Listenzeile bekommt sie deshalb eine eigene
+   Breite, die nur noch schrumpfen darf. */
+.account-row .catsel {
+  flex: 0 1 clamp(180px, 26%, 300px);
+  width: auto;
+  /* Ohne das schrumpft ein Flex-Element nie unter die Breite seines längsten
+     Wortes – die Auswahl bliebe breiter als vorgesehen und schöbe die Knöpfe
+     aus der Zeile. Der Text darin kürzt sich selbst mit „…". */
+  min-width: 0;
+}
+/* Der Abstand darüber ist für Formulare gedacht, wo die Auswahl unter ihrer
+   Beschriftung steht. In einer mittig ausgerichteten Zeile verrutscht sie nur. */
+.account-row .catsel-btn {
+  margin-top: 0;
+}
+/* Beträge in einer Spalte statt ausgefranst. */
+.account-row .money {
+  flex: 0 0 auto;
+  min-width: 104px;
+  white-space: nowrap;
+}
+/* Der Name nimmt den übrigen Platz. Nicht mit „…" abschneiden: Die Texte
+   sollen sich weiterhin vollständig markieren und kopieren lassen. */
+.account-row .named-text {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+@media (max-width: 820px) {
+  /* Auf dem Telefon passt das nicht in eine Zeile. Zwei Zeilen: oben Name und
+     Betrag, darunter Auswahl und Knöpfe. Die Prozentwerte sind die Bruchstelle
+     – sie sind gross genug, dass unten kein Platz mehr für Name und Betrag
+     bleibt, und klein genug, dass die Knöpfe neben der Auswahl bleiben. */
+  .account-row {
+    flex-wrap: wrap;
+    row-gap: var(--sp-2);
+  }
+  .account-row .named-text {
+    flex: 1 1 50%;
+  }
+  .account-row .money {
+    min-width: 0;
+  }
+  .account-row .catsel {
+    flex: 1 1 40%;
+  }
+}
 .row-actions {
   display: flex;
   gap: 4px;

web/src/pages/Eingang.jsx

@@ -116,7 +116,12 @@ export default function Eingang() {
                   <div className="named-text grow">
                     <div><strong>{item.payee || t("inbox.noText")}</strong></div>
                     <div className="named-sub">
-                      {formatDate(item.date)} · {konto?.name || "—"}
+                      {/* Jede Angabe für sich unzertrennlich: Auf dem Telefon
+                          brach sonst „Revolut CHF" um oder wurde gekürzt – und
+                          genau die Währung im Namen unterscheidet die Konten. */}
+                      <span className="nowrap">{formatDate(item.date)}</span>
+                      {" · "}
+                      <span className="nowrap">{konto?.name || "—"}</span>
                       {item.source === "shortcut" && ` · ${t("inbox.viaShortcut")}`}
                       {item.source === "mail" && ` · ${t("inbox.viaMail")}`}
                       {item.status === "unclear" && ` · ${t("inbox.unclear")}`}