From d6ae9632411b11a5c4412c80ec921768f47aa13d Mon Sep 17 00:00:00 2001
From: Guido <guido.schmit03@gmail.com>
Date: Thu, 27 Aug 2026 13:33:55 +0200
Subject: [PATCH] fix: Herkunft steht neben dem Titel, nicht kleingedruckt
 darunter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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            | 23 ++++++++++++++++-------
 web/src/pages/Transactions.jsx | 12 +++++++-----
 2 files changed, 23 insertions(+), 12 deletions(-)

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)] && (