fix(ui): Akte-Header und Gründe-Liste überlappten sich
CI / backend-tests (push) Failing after 2m3s
CI / frontend-build (push) Successful in 18s

Beide Elemente trugen die Klasse akte-kopf und damit dasselbe
grid-area - das CSS-Grid platzierte sie übereinander statt
untereinander. Jetzt ein gemeinsamer Container mit einem grid-area.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV
This commit is contained in:
2026-09-06 23:24:27 +02:00
co-authored by Claude Sonnet 5
parent 2a4d391711
commit a12dfb305e
+17 -15
View File
@@ -55,24 +55,26 @@ export function AktePage() {
return ( return (
<main className={`page-wide akte-grid${istFahrzeug ? " ist-fahrzeug" : ""}`}> <main className={`page-wide akte-grid${istFahrzeug ? " ist-fahrzeug" : ""}`}>
<div className="akte-kopf row-between" style={{ alignItems: "flex-start" }}> <div className="akte-kopf">
<div> <div className="row-between" style={{ alignItems: "flex-start" }}>
<h1 style={{ marginBottom: "0.15rem" }}>{objekt.name}</h1> <div>
<div className="text-muted"> <h1 style={{ marginBottom: "0.15rem" }}>{objekt.name}</h1>
{objekt.code} · {akte.objekttyp_name} · Objekt-Status: {objekt.status} <div className="text-muted">
{objekt.code} · {akte.objekttyp_name} · Objekt-Status: {objekt.status}
</div>
</div> </div>
<ReadinessBadge status={akte.einsatzbereitschaft_status} />
</div> </div>
<ReadinessBadge status={akte.einsatzbereitschaft_status} /> {akte.einsatzbereitschaft_gruende.length > 0 && (
<ul className="card-list" style={{ marginTop: "0.5rem" }}>
{akte.einsatzbereitschaft_gruende.map((g) => (
<li key={g} className="text-muted" style={{ fontSize: "0.9rem" }}>
{GRUND_TEXT[g] ?? g}
</li>
))}
</ul>
)}
</div> </div>
{akte.einsatzbereitschaft_gruende.length > 0 && (
<ul className="akte-kopf card-list" style={{ marginTop: "0.5rem" }}>
{akte.einsatzbereitschaft_gruende.map((g) => (
<li key={g} className="text-muted" style={{ fontSize: "0.9rem" }}>
{GRUND_TEXT[g] ?? g}
</li>
))}
</ul>
)}
<div className="akte-aktionen row" style={{ flexWrap: "wrap" }}> <div className="akte-aktionen row" style={{ flexWrap: "wrap" }}>
<Link to={`/objekte/${objekt.id}/kontrolle`} className="btn btn-primary"> <Link to={`/objekte/${objekt.id}/kontrolle`} className="btn btn-primary">