fix: Ankreuzfelder zentral von der Textfeld-Regel ausnehmen

In der Passwortrichtlinie stand das Haekchen mittig und der Text ganz rechts.
Ursache war die globale Regel "input, select { width: 100% }": sie erwischt
auch Ankreuzfelder und zieht sie ueber die volle Breite. Vier Stellen im
Code umgingen das bereits einzeln (.checklist, .dt-pop-opt, .checkline,
.datatable td) - eine fuenfte Umgehung waere die falsche Antwort gewesen.

Ankreuz- und Auswahlfelder sind jetzt zentral ausgenommen, die vier
Einzelfaelle entfallen. Nebeneffekt: sie tragen ueberall dieselbe
Akzentfarbe (bisher nur an zwei Stellen) und sitzen in Tabellenzellen
mittig, statt durch das geerbte margin-top um 5px nach unten gedrueckt zu
werden.

Die Karte selbst nutzt jetzt .checkline, das vorhandene Muster fuer
"Ankreuzfeld plus Text"; .field-inline richtet an der Grundlinie aus und
war hier von vornherein das falsche.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-08-20 14:10:56 +02:00
co-authored by Claude Opus 5
parent cdf21474cf
commit df5bfec331
3 changed files with 14 additions and 11 deletions
-5
View File
@@ -379,10 +379,6 @@ tr.budget-total-row td {
gap: var(--sp-2);
margin-bottom: var(--sp-2);
}
.checkline input[type="checkbox"] {
width: auto;
margin-top: 0;
}
.checkline span {
color: var(--text);
font-weight: 560;
@@ -590,7 +586,6 @@ tr.row-dup {
.datatable td input[inputmode],
.datatable td input[type="text"] { max-width: none; width: 100%; }
.datatable td .catsel { width: 100%; }
.datatable td input[type="checkbox"] { width: auto; }
/* ---------- Kategorie-Auswahl (auf-/zuklappbarer Baum, Ersatz für <select>) ---------- */
.catsel {
+4 -2
View File
@@ -83,9 +83,11 @@ export default function PolicyCard() {
}} />
</label>
{/* .checkline ist das Muster für „Ankreuzfeld plus Text"; .field-inline
richtet Felder an der Grundlinie aus und passt hier nicht. */}
<div style={{ marginTop: "var(--sp-3)" }}>
{SCHALTER.map((k) => (
<label key={k} className="field-inline" style={{ marginBottom: 6 }}>
<label key={k} className="checkline">
<input type="checkbox" checked={entwurf[k]}
onChange={(e) => setEntwurf({ ...entwurf, [k]: e.target.checked })} />
<span>{t(`policy.${k}`)}</span>
@@ -94,7 +96,7 @@ export default function PolicyCard() {
</div>
<div style={{ marginTop: "var(--sp-4)", paddingTop: "var(--sp-3)", borderTop: "1px solid var(--border)" }}>
<label className="field-inline">
<label className="checkline">
<input type="checkbox" checked={entwurf.mfa_required}
onChange={(e) => setEntwurf({ ...entwurf, mfa_required: e.target.checked })} />
<span>{t("policy.mfaRequired")}</span>
+10 -4
View File
@@ -239,6 +239,16 @@ input:focus, select:focus {
box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder { color: var(--muted); opacity: 0.7; }
/* Ankreuzfelder sind keine Textfelder: die Regel oben (width:100%, margin-top)
zoege sie sonst ueber die volle Breite, das Haekchen landete in der Mitte und
der Text daneben ganz rechts. Hier zentral ausgenommen, damit das nicht an
jeder Einsatzstelle einzeln nachgeholt werden muss. */
input[type="checkbox"], input[type="radio"] {
width: auto;
margin: 0;
flex: 0 0 auto;
accent-color: var(--accent);
}
.row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.row .grow { flex: 1; }
@@ -524,7 +534,6 @@ td select { width: auto; min-width: 0; max-width: 100%; }
.picklist .link-btn { display: block; width: 100%; padding: 9px 4px; }
.picklist .link-btn:hover { text-decoration: none; background: var(--surface-2); }
.checklist label { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: inherit; color: var(--text); }
.checklist input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent); }
.checklist li.done .item-name { text-decoration: line-through; color: var(--muted); }
.item-name { font-weight: 560; }
@@ -651,9 +660,6 @@ td select { width: auto; min-width: 0; max-width: 100%; }
.dt-pop-list { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; }
.dt-pop-opt { display: flex; align-items: center; gap: 8px; padding: 3px 4px; font-size: 0.85rem; cursor: pointer; margin: 0; }
.dt-pop-opt:hover { background: var(--surface-2); }
/* Ohne diese Ausnahme erben die Checkboxen die globale input-Regel (width:100%,
Rahmen, margin) und sprengen die Zeile. */
.dt-pop-opt input[type="checkbox"] { flex: 0 0 auto; width: auto; margin: 0; accent-color: var(--accent); }
.dt-pop-opt span { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-tree-cell { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
/* Kategorie-Pfad: Oberkategorien klein und gedämpft, Blatt normal. */