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:
co-authored by
Claude Opus 5
parent
cdf21474cf
commit
df5bfec331
@@ -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 {
|
||||
|
||||
@@ -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
@@ -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. */
|
||||
|
||||
Reference in New Issue
Block a user