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;