From 8c8777467c7a62535756e42066fdf6eab4e9552f Mon Sep 17 00:00:00 2001
From: Andrei Laas <a.laas@loudspring.at>
Date: Wed, 16 Sep 2026 22:27:22 +0200
Subject: [PATCH] Die Tabellenkarten scrollen nur noch waagrecht
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Zu Anmerkung 5 ("In Audit schaut die Scrollbar komisch aus").

`overflow-x-auto` allein genuegt nicht: nach CSS wird eine auf `visible`
stehende Ueberlaufachse auf `auto` hochgestuft, sobald die andere nicht
`visible` ist. Die Karte war damit ein Scrollbereich in beiden Richtungen
und konnte eine senkrechte Leiste zeigen, die nichts bewirkt — die Karte ist
so hoch wie ihr Inhalt, es gibt dort nichts zu scrollen.

Geklemmt wird durch `overflow-y-hidden` nichts, aus demselben Grund. Die
drei Stellen mit diesem Muster sind Protokoll, Mitarbeiterliste und
Importmappe; alle drei sind gleich behandelt.

Ob das *die* Ursache des gemeldeten Bildes ist, ist damit nicht bewiesen —
aus dem Bildschirmfoto allein laesst sich nicht ablesen, zu welchem Element
die zweite Leiste gehoert. Es ist der einzige Scrollbereich auf der Seite
und eine Aufraeumung, die fuer sich steht.
---
 app/(app)/audit/page.tsx              | 8 +++++++-
 app/(app)/employees/page.tsx          | 5 ++++-
 components/import/ImportWorkbench.tsx | 2 +-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/(app)/audit/page.tsx b/app/(app)/audit/page.tsx
index 28cb4a0..d58f128 100644
--- a/app/(app)/audit/page.tsx
+++ b/app/(app)/audit/page.tsx
@@ -80,7 +80,13 @@ export default async function AuditPage({ searchParams }: { searchParams: Promis
       </Suspense>
       <p className="text-sm text-ink-muted">{count} Einträge</p>
 
-      <div className={`overflow-x-auto ${CARD_CLASS}`}>
+      {/* `overflow-y-hidden` gehört zwingend dazu und ist keine Vorsicht:
+          nach CSS wird eine auf `visible` stehende Achse auf `auto`
+          hochgestuft, sobald die andere nicht `visible` ist. `overflow-x-auto`
+          allein macht aus der Karte also einen Scrollbereich in **beiden**
+          Richtungen — mit einer senkrechten Leiste, die niemand bestellt hat.
+          Geklemmt wird dabei nichts: die Karte ist so hoch wie ihr Inhalt. */}
+      <div className={`overflow-x-auto overflow-y-hidden ${CARD_CLASS}`}>
         <table className="w-full min-w-[800px] text-sm">
           <thead>
             <tr className="border-b border-border bg-surface text-left text-[11px] font-bold uppercase tracking-wider text-ink-muted">
diff --git a/app/(app)/employees/page.tsx b/app/(app)/employees/page.tsx
index ef0ff80..db5afa5 100644
--- a/app/(app)/employees/page.tsx
+++ b/app/(app)/employees/page.tsx
@@ -287,7 +287,10 @@ export default async function EmployeesPage({ searchParams }: EmployeesPageProps
         )}
       </p>
 
-      <div className={`overflow-x-auto ${CARD_CLASS}`}>
+      {/* Zur zweiten Achse siehe den Kommentar auf der Protokollseite: ohne
+          `overflow-y-hidden` stuft CSS sie auf `auto` hoch, und die Karte
+          bekommt eine senkrechte Leiste, die nichts bewirkt. */}
+      <div className={`overflow-x-auto overflow-y-hidden ${CARD_CLASS}`}>
         <table className="w-full min-w-[800px] text-sm">
           <thead>
             <tr className="border-b border-border bg-surface text-left text-[11px] font-bold uppercase tracking-wider text-ink-muted">
diff --git a/components/import/ImportWorkbench.tsx b/components/import/ImportWorkbench.tsx
index 784e520..4657650 100644
--- a/components/import/ImportWorkbench.tsx
+++ b/components/import/ImportWorkbench.tsx
@@ -171,7 +171,7 @@ export function ImportWorkbench() {
 function BefundListe({ titel, befunde, art }: { titel: string; befunde: Befund[]; art: "fehler" | "hinweis" }) {
   const sichtbar = befunde.slice(0, MAX_ANZEIGE);
   return (
-    <section className={`overflow-x-auto ${CARD_CLASS}`}>
+    <section className={`overflow-x-auto overflow-y-hidden ${CARD_CLASS}`}>
       <h2 className="px-5 pt-5 text-sm font-bold text-ink">
         {titel} <span className="font-normal text-ink-muted">({befunde.length})</span>
       </h2>