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:
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user