From 68e27c1868bffcb30e949387349974ff61f683f4 Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Sun, 26 Jul 2026 00:07:23 +0200
Subject: [PATCH] Web: Kategorie-Tabelle bekommt mehr Breite (kein
 Seitwaerts-Scrollen)

Durch die neue Spalte "Uebergeordnet" wurde die Kategorie-Tabelle im halben Grid
zu breit und scrollte seitwaerts. Die Kategorien-Seite nutzt jetzt das
wide-aside-Layout; dessen Block daneben ist zudem schmal gedeckelt (clamp), damit
die Tabelle den restlichen Platz bekommt. Gilt auch fuer die Gruppen-Seite.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/pages/Categories.jsx | 2 +-
 web/src/styles.css           | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/Categories.jsx b/web/src/pages/Categories.jsx
index cb24026..5b931de 100644
--- a/web/src/pages/Categories.jsx
+++ b/web/src/pages/Categories.jsx
@@ -140,7 +140,7 @@ export default function Categories() {
         <button type="button" className={typFilter === "object" ? "active" : ""} onClick={() => setTypFilter("object")}>Gegenstände</button>
       </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 9277bc9..4b1d518 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -166,7 +166,9 @@ h2 { font-size: 0.95rem; font-weight: 650; margin: 0 0 var(--sp-3); letter-spaci
 /* Tabelle plus Block daneben: Die Tabelle hat mehr Spalten und bekommt
    deshalb den groesseren Anteil - sonst rutscht sie unnoetig frueh in die
    Kartenansicht, obwohl daneben Platz frei waere. */
-.grid-2.wide-aside { grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr); }
+/* Tabelle bekommt den ganzen restlichen Platz, der Block daneben bleibt schmal
+   und gedeckelt - so scrollt die (breite) Tabelle nicht seitwaerts. */
+.grid-2.wide-aside { grid-template-columns: minmax(0, 1fr) clamp(300px, 26%, 360px); align-items: start; }
 @media (max-width: 1000px) {
   .grid-2.wide-aside { grid-template-columns: minmax(0, 1fr); }
 }