Die Tabellenkarten scrollen nur noch waagrecht

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.
This commit is contained in:
2026-09-16 22:27:22 +02:00
parent 9ad2954970
commit 8c8777467c
3 changed files with 12 additions and 3 deletions

View File

@@ -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">

View File

@@ -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">

View File

@@ -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>