Web: Gruppentabelle auf volle Breite, Karten darunter

Die Seite hatte die Tabelle links und eine feste rechte Spalte (24% der
Breite). Seit die Tabelle Obergruppen, Bestand mit Einheit und die
Gebinde-Erlaeuterung traegt, war die rechte Spalte teurer als sie half - und sie
stand auch dann da, wenn gar keine Gruppe ausgewaehlt war.

Jetzt bekommt die Tabelle die volle Breite. "Neue Gruppe" steht darunter, die
Karten zur ausgewaehlten Gruppe (EAN-Codes, Mindestbestand) erscheinen beim
"verwalten" ebenfalls darunter, nebeneinander. Kein Springen des Layouts beim
Auswaehlen, weil die Tabelle ihre Breite nie aendert.

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

web/src/pages/Groups.jsx

@@ -246,7 +246,9 @@ export default function Groups() {
       </div>
       {error && <div className="alert error"><Icon name="alert" size={16} />{error}</div>}
 
-      <div className="grid-2 wide-aside">
+      {/* Die Tabelle bekommt die volle Breite – bei vielen Spalten (Obergruppen,
+          Bestand, Einheit) war die rechte Spalte teurer als sie half. Alles
+          Übrige steht darunter. */}
       <div className="card">
         <DataTable id="groups" columns={columns} rows={baumZeilen} loading={loading}
           getRowKey={(g) => g._pfad}
@@ -254,8 +256,9 @@ export default function Groups() {
           empty="Noch keine Gruppen." />
       </div>
 
-        <div>
+      {/* Karten zur AUSGEWÄHLTEN Gruppe – erscheinen erst beim „verwalten". */}
       {selected && (
+        <div className="grid-2" style={{ marginTop: "var(--sp-3)" }}>
           <section className="card">
             <div className="card-head">
               <Icon name="search" />
@@ -292,9 +295,8 @@ export default function Groups() {
             />
             <button className="btn ghost" onClick={() => setSelectedId(null)}>Schließen</button>
           </section>
-          )}
 
-          {selected && isAdmin && (
+          {isAdmin && (
             <section className="card">
               <div className="card-head">
                 <Icon name="location" />
@@ -318,9 +320,12 @@ export default function Groups() {
               />
             </section>
           )}
+        </div>
+      )}
 
       {isAdmin && (
-            <form className="card" onSubmit={add}>
+        <form className="card" onSubmit={add}
+          style={{ marginTop: "var(--sp-3)", maxWidth: 560 }}>
           <div className="card-head"><Icon name="tag" /><h2>Neue Gruppe</h2></div>
           <label>
             Name
@@ -362,7 +367,5 @@ export default function Groups() {
         </form>
       )}
     </div>
-      </div>
-    </div>
   );
 }