diff --git a/web/src/finance.css b/web/src/finance.css
index dd2e24e..357ea95 100644
--- a/web/src/finance.css
+++ b/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;
 }
diff --git a/web/src/pages/Transactions.jsx b/web/src/pages/Transactions.jsx
index 658a05c..eaa219f 100644
--- a/web/src/pages/Transactions.jsx
+++ b/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)] && (