Marke statt Produktname am EAN-Code, Layout bricht um statt abzuschneiden

Am Gruppen-Code stand der Produktname. Innerhalb einer Gruppe hilft der aber
nicht weiter: In der Gruppe "Zucker" heisst jeder Artikel irgendwie "Zucker",
in "Mehl" irgendwie "…mehl". Unterscheiden laesst sich das nur ueber die Marke.
Der Endpunkt liefert jetzt beides; angezeigt wird die Marke, faellt bei
fehlender Marke auf den Namen zurueck und zeigt den vollen Namen im Tooltip.
Nebenbei ist die Marke meist deutlich kuerzer als der Name.

Abgeschnittene Tabelle: Die Spalte "verwalten" wurde gekappt. Ursache war nicht
die Breite an sich, sondern dass Grid-Kinder standardmaessig nicht unter ihre
Inhaltsbreite schrumpfen (min-width: auto). Dadurch lief die Tabelle aus ihrer
Karte heraus und wurde beschnitten, statt dass das vorhandene overflow-x
gegriffen haette. Mit min-width: 0 an den Grid-Kindern scrollt sie jetzt.
Zusaetzlich hat die Tabelle eine Mindestbreite von 640px - lieber waagerecht
scrollen als Spalten so weit quetschen, bis Text verschwindet.

Umbruch statt Quetschen: Die feste Umbruchbreite von 820px passte nicht zur
tatsaechlichen Lage - entscheidend ist, wie viel Platz die Spalten wirklich
brauchen, nicht wie breit der Bildschirm ist. Jetzt auto-fit mit Mindestbreite
je Spalte: Zwei Spalten, solange beide genug Platz haben, sonst automatisch
untereinander. Seiten mit inhaltsreichem Seitenblock (EAN-Codes) verlangen mehr
und stapeln frueher.

Durchgerechnet: Bei 1920 voller Breite zwei Spalten zu je 668px, Tabelle passt.
Bei halber Breite (960) eine Spalte zu 676px, Tabelle passt weiterhin. Erst bei
sehr schmalen Fenstern (unter etwa 900px Gesamtbreite) scrollt die Tabelle
waagerecht. In keinem Fall wird noch etwas abgeschnitten.

Getestet: 58 pytest-Tests gruen, Web-Build laeuft durch. Gegen die laufende API
geprueft, dass Marke und Name am Code mitkommen und die fehlende Marke sauber
auf den Namen zurueckfaellt. Die Breiten sind rechnerisch geprueft, die
Darstellung im Browser habe ich nicht selbst angesehen.

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

web/src/components/BarcodeList.jsx

@@ -11,6 +11,13 @@ import Icon from "./Icon";
  *
  * onAdd({ code, note }) und onDelete(code) werden vom Aufrufer bereitgestellt.
  */
+/** Innerhalb einer Gruppe unterscheidet die Marke besser als der Name –
+ *  in der Gruppe "Mehl" heisst jeder Artikel irgendwie "…mehl". Fehlt die
+ *  Marke, bleibt der Name als Rueckfall. */
+function besitzer(b) {
+  return b.product_brand || b.product_name || "";
+}
+
 export default function BarcodeList({
   barcodes = [], productBarcodes = [], onAdd, onDelete, onEditNote, disabled = false, hint,
 }) {
@@ -39,7 +46,7 @@ export default function BarcodeList({
             <span className="code-row">
               <code className="strong">{b.code}</code>
               <span className="badge">Artikel</span>
-              <span className="muted small owner">{b.product_name}</span>
+              <span className="muted small owner" title={b.product_name}>{besitzer(b)}</span>
             </span>
           </li>
         ))}
@@ -52,7 +59,7 @@ export default function BarcodeList({
               {b.product_name && (
                 <>
                   <span className="badge">Artikel</span>
-                  <span className="muted small owner">{b.product_name}</span>
+                  <span className="muted small owner" title={b.product_name}>{besitzer(b)}</span>
                 </>
               )}
               {onEditNote && !disabled ? (

web/src/styles.css

@@ -149,11 +149,25 @@ h2 { font-size: 0.95rem; font-weight: 650; margin: 0 0 var(--sp-3); letter-spaci
 .card-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
 .card-head h2 { margin: 0; }
 .card-head .icon { color: var(--muted); }
-.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
+/* Zwei Spalten, solange beide genug Platz haben - sonst automatisch
+   untereinander. auto-fit statt fester Umbruchbreite, damit es auch passt,
+   wenn das Fenster nur die halbe Bildschirmbreite einnimmt.
+   min(100%, …) verhindert, dass die Spalte auf schmalen Geraeten breiter
+   wird als der Bildschirm. */
+.grid-2 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
+  gap: var(--sp-4);
+}
+/* Ohne min-width:0 schrumpfen Grid-Kinder nie unter ihre Inhaltsbreite. Genau
+   daran scheiterte das overflow-x der Tabelle: Sie wurde abgeschnitten,
+   statt zu scrollen. */
+.grid-2 > * { min-width: 0; }
 .form-narrow { max-width: 600px; }
-.grid-2.wide-aside { grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr); }
-@media (max-width: 820px) {
-  .grid-2, .grid-2.wide-aside { grid-template-columns: 1fr; }
+/* Seiten mit einem inhaltsreichen Block daneben (EAN-Codes) brauchen mehr
+   Mindestbreite und stapeln deshalb frueher. */
+.grid-2.wide-aside {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
 }
 
 /* ---------- Forms ---------- */
@@ -221,8 +235,10 @@ td select { width: auto; min-width: 132px; max-width: 100%; }
 .link-btn:hover { text-decoration: underline; }
 
 /* ---------- Tables ---------- */
-.table-wrap { overflow-x: auto; }
-.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
+.table-wrap { overflow-x: auto; max-width: 100%; }
+/* min-width: Lieber waagerecht scrollen als Spalten so weit quetschen, dass
+   Text abgeschnitten wird. */
+.table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.875rem; }
 .table th, .table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); }
 .table thead th {
   color: var(--muted); font-weight: 600; font-size: 0.72rem;