From e20a61bf3b2b24717b8fa0567bc27a4d6066c89a Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Wed, 22 Jul 2026 21:44:50 +0200
Subject: [PATCH] Notizfeld bei EAN-Codes bekommt Platz, Seite nutzt mehr
 Breite

Bei einem Code mit langem Artikelnamen war das Notizfeld auf wenige Pixel
zusammengequetscht ("Zucker - Feinkristallzucker" brach auf zwei Zeilen um und
nahm dem Feld den Raum), waehrend es beim Nachbarcode normal breit war.

Drei Ursachen, alle behoben:

Der Inhalt lag als Inline-Stil in einer Flex-Zeile ohne Regeln fuer den
Umgang mit Platzmangel. Jetzt eigene Klassen: Der Artikelname kuerzt mit
Auslassungspunkten statt umzubrechen, das Notizfeld hat eine Mindestbreite von
150px und waechst mit, die Zeile darf bei echtem Platzmangel umbrechen. Auch die
Zeile zum Hinzufuegen bricht jetzt um, statt "EAN scannen oder eingeben" auf
"EAN scani" zu stutzen.

Die Seite war auf 1080px begrenzt. Auf breiten Bildschirmen blieb dadurch viel
Flaeche leer, obwohl Tabelle und Seitenblock sie gut gebrauchen koennen; jetzt
1400px.

Der Seitenblock war exakt halb so breit wie die Tabelle. Auf der Gruppenseite
bekommt er nun eine Mindestbreite von 360px, damit Code, Kennzeichnung,
Artikelname und Notizfeld nebeneinander Platz haben. Unterhalb von 820px stapelt
sich weiterhin alles untereinander.

Getestet: Web-Build laeuft durch. Die Darstellung im Browser habe ich nicht
selbst angesehen - die Breiten sind rechnerisch gesetzt, nicht ausprobiert.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/components/BarcodeList.jsx | 13 ++++++-------
 web/src/pages/Groups.jsx           |  2 +-
 web/src/styles.css                 | 23 ++++++++++++++++++++---
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/web/src/components/BarcodeList.jsx b/web/src/components/BarcodeList.jsx
index a4b51be..2294fed 100644
--- a/web/src/components/BarcodeList.jsx
+++ b/web/src/components/BarcodeList.jsx
@@ -36,28 +36,27 @@ export default function BarcodeList({
       <ul className="simple-list">
         {productBarcodes.map((b) => (
           <li key={`p-${b.code}`}>
-            <span style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
+            <span className="code-row">
               <code className="strong">{b.code}</code>
               <span className="badge">Artikel</span>
-              <span className="muted small">{b.product_name}</span>
+              <span className="muted small owner">{b.product_name}</span>
             </span>
           </li>
         ))}
         {barcodes.map((b) => (
           <li key={b.id ?? b.code}>
-            <span style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0, flex: 1 }}>
+            <span className="code-row">
               <code className="strong">{b.code}</code>
               {/* Gehört der Code über einen Artikel zur Gruppe, steht das dabei –
                   eine Notiz ist trotzdem möglich. */}
               {b.product_name && (
                 <>
                   <span className="badge">Artikel</span>
-                  <span className="muted small">{b.product_name}</span>
+                  <span className="muted small owner">{b.product_name}</span>
                 </>
               )}
               {onEditNote && !disabled ? (
-                <input defaultValue={b.note || ""} placeholder="Notiz…"
-                  style={{ marginTop: 0, maxWidth: 220 }}
+                <input className="note-input" defaultValue={b.note || ""} placeholder="Notiz…"
                   onBlur={(e) => {
                     const wert = e.target.value.trim();
                     if (wert !== (b.note || "")) onEditNote(b.code, wert);
@@ -83,7 +82,7 @@ export default function BarcodeList({
       </ul>
 
       {!disabled && (
-        <form className="field-inline" onSubmit={add} style={{ marginTop: "var(--sp-3)" }}>
+        <form className="field-inline code-add" onSubmit={add} style={{ marginTop: "var(--sp-3)" }}>
           <input placeholder="EAN scannen oder eingeben" value={code}
             onChange={(e) => setCode(e.target.value)} />
           <input placeholder="Notiz, z.B. Mehl bei Aldi" value={note}
diff --git a/web/src/pages/Groups.jsx b/web/src/pages/Groups.jsx
index f8d66ec..390b4c3 100644
--- a/web/src/pages/Groups.jsx
+++ b/web/src/pages/Groups.jsx
@@ -84,7 +84,7 @@ export default function Groups() {
       </div>
       {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
 
-      <div className="grid-2">
+      <div className="grid-2 wide-aside">
         <div className="card" style={{ padding: 0 }}>
           <div className="table-wrap">
             <table className="table">
diff --git a/web/src/styles.css b/web/src/styles.css
index 558e54a..6e501a1 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -128,7 +128,7 @@ h2 { font-size: 0.95rem; font-weight: 650; margin: 0 0 var(--sp-3); letter-spaci
 .sidebar-user .role { font-size: 0.72rem; color: var(--muted); }
 
 .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
-.content { width: 100%; max-width: 1080px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) 64px; }
+.content { width: 100%; max-width: 1400px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) 64px; }
 
 .page-head {
   display: flex; align-items: center; justify-content: space-between;
@@ -151,7 +151,10 @@ h2 { font-size: 0.95rem; font-weight: 650; margin: 0 0 var(--sp-3); letter-spaci
 .card-head .icon { color: var(--muted); }
 .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
 .form-narrow { max-width: 600px; }
-@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }
+.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; }
+}
 
 /* ---------- Forms ---------- */
 label { display: block; margin-bottom: var(--sp-4); font-size: 0.8rem; color: var(--muted); font-weight: 580; }
@@ -305,7 +308,21 @@ td select { width: auto; min-width: 132px; max-width: 100%; }
 .precision-pick { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-weight: 400; }
 .precision-pick select { margin: 0; width: auto; padding-top: 3px; padding-bottom: 3px; font-size: 0.8rem; }
  /* Hinweis beim Einlagern: welche Kategorie automatisch zugeordnet wird */
-  /* ---------- Rueckfrage-Dialog ---------- */
+   /* ---------- EAN-Code-Zeile ---------- */
+.code-row { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; flex-wrap: wrap; }
+.code-row code { flex: 0 0 auto; }
+/* Ein langer Artikelname hat vorher umgebrochen und das Notizfeld auf null
+   gequetscht - jetzt kuerzt er stattdessen. */
+.code-row .owner {
+  flex: 0 1 auto; min-width: 0;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.code-row .note-input { flex: 1 1 180px; min-width: 150px; margin-top: 0; }
+/* Die Zeile zum Hinzufuegen darf umbrechen statt sich zusammenzuquetschen. */
+.code-add { flex-wrap: wrap; }
+.code-add > input { min-width: 140px; }
+
+/* ---------- Rueckfrage-Dialog ---------- */
 .modal-backdrop {
   position: fixed; inset: 0; z-index: 50;
   display: grid; place-items: center;