fix: Herkunft steht neben dem Titel, nicht kleingedruckt darunter

Die zweite Zeile gehoert dem Verwendungszweck. Alles Neue dorthin zu stapeln
macht die Zeilen hoch und den Blick eng – und das Kennzeichen war zusaetzlich
kleiner gesetzt als alles andere.

Jetzt steht es neben dem Titel und in dessen Groesse. Wird es eng, kuerzt der
Titel und das Kennzeichen bleibt lesbar; die Mindestbreite der Spalte steigt
dafuer von 150 auf 190 Punkte. Die Tabelle passt damit weiterhin ohne
waagerechtes Scrollen in ein Fenster von 870 Punkten.

Im Browser an beiden Enden nachgemessen: bei voller Breite genug Platz fuer
beides, bei Mindestbreite kuerzt der richtige Teil.

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

web/src/finance.css

@@ -1316,15 +1316,24 @@ tr.row-dup {
   padding: 4px 8px;
 }
 
-/* Herkunft einer Buchung: Bank, Mail, Kurzbefehl, Datei, von Hand. Bewusst
-   klein und ruhig – sie beantwortet eine Rückfrage, sie ist nicht die
-   Hauptaussage der Zeile. */
+/* Herkunft einer Buchung: Bank, Mail, Kurzbefehl, Datei, von Hand. Sie steht
+   NEBEN dem Titel und in dessen Grösse – nicht kleingedruckt darunter, wo sich
+   sonst alles Neue stapelt. */
+.titelzeile {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  min-width: 0;
+}
+.titelzeile > .ellipsis {
+  min-width: 0;
+}
 .herkunft {
-  display: inline-block;
-  padding: 0 5px;
+  flex: 0 0 auto;
+  padding: 0 6px;
   border: 1px solid var(--border-strong);
   border-radius: var(--radius-sm);
-  font-size: 0.72rem;
-  line-height: 1.5;
+  font-size: inherit;
   color: var(--muted);
+  white-space: nowrap;
 }

web/src/pages/Transactions.jsx

@@ -252,7 +252,7 @@ export default function Transactions() {
     },
     {
       // Wofür die Zahlung war – danach sucht man in der Liste.
-      key: "text", header: t("transactions.subject"), grow: true, min: 150,
+      key: "text", header: t("transactions.subject"), grow: true, min: 190,
       filterText: (tx) => rowLabel(tx).title,
       sortValue: (tx) => rowLabel(tx).title,
       render: (tx) => {
@@ -261,14 +261,16 @@ export default function Transactions() {
           <div className="named">
             <IconChip name={l.icon} color={l.color} size={26} />
             <div className="named-text">
-              <div className="ellipsis">{l.title}</div>
-              <div className="named-sub ellipsis">
-                {/* Woher die Buchung stammt – man sieht es ihr sonst nicht an. */}
+              {/* Herkunft NEBEN dem Titel, nicht darunter: Die zweite Zeile
+                  gehört dem Verwendungszweck, und alles Neue dorthin zu
+                  stapeln macht die Zeilen hoch und den Blick eng. */}
+              <div className="titelzeile">
+                <span className="ellipsis">{l.title}</span>
                 <span className="herkunft">{t(`todo.from.${tx.herkunft}`, {
                   defaultValue: tx.herkunft,
                 })}</span>
-                {l.sub ? ` · ${l.sub}` : ""}
               </div>
+              {l.sub && <div className="named-sub ellipsis">{l.sub}</div>}
               {/* Verknüpft heisst: zählt nicht als Ausgabe oder Einnahme.
                   Ohne das Gegenkonto sagt „Übertrag" nichts. */}
               {links[String(tx.id)] && (