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);
|
gap: var(--sp-2);
|
||||||
margin-bottom: var(--sp-2);
|
margin-bottom: var(--sp-2);
|
||||||
}
|
}
|
||||||
.checkline input[type="checkbox"] {
|
|
||||||
width: auto;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.checkline span {
|
.checkline span {
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
font-weight: 560;
|
font-weight: 560;
|
||||||
@@ -590,7 +586,6 @@ tr.row-dup {
|
|||||||
.datatable td input[inputmode],
|
.datatable td input[inputmode],
|
||||||
.datatable td input[type="text"] { max-width: none; width: 100%; }
|
.datatable td input[type="text"] { max-width: none; width: 100%; }
|
||||||
.datatable td .catsel { width: 100%; }
|
.datatable td .catsel { width: 100%; }
|
||||||
.datatable td input[type="checkbox"] { width: auto; }
|
|
||||||
|
|
||||||
/* ---------- Kategorie-Auswahl (auf-/zuklappbarer Baum, Ersatz für <select>) ---------- */
|
/* ---------- Kategorie-Auswahl (auf-/zuklappbarer Baum, Ersatz für <select>) ---------- */
|
||||||
.catsel {
|
.catsel {
|
||||||
|
|||||||
@@ -83,9 +83,11 @@ export default function PolicyCard() {
|
|||||||
}} />
|
}} />
|
||||||
</label>
|
</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)" }}>
|
<div style={{ marginTop: "var(--sp-3)" }}>
|
||||||
{SCHALTER.map((k) => (
|
{SCHALTER.map((k) => (
|
||||||
<label key={k} className="field-inline" style={{ marginBottom: 6 }}>
|
<label key={k} className="checkline">
|
||||||
<input type="checkbox" checked={entwurf[k]}
|
<input type="checkbox" checked={entwurf[k]}
|
||||||
onChange={(e) => setEntwurf({ ...entwurf, [k]: e.target.checked })} />
|
onChange={(e) => setEntwurf({ ...entwurf, [k]: e.target.checked })} />
|
||||||
<span>{t(`policy.${k}`)}</span>
|
<span>{t(`policy.${k}`)}</span>
|
||||||
@@ -94,7 +96,7 @@ export default function PolicyCard() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{ marginTop: "var(--sp-4)", paddingTop: "var(--sp-3)", borderTop: "1px solid var(--border)" }}>
|
<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}
|
<input type="checkbox" checked={entwurf.mfa_required}
|
||||||
onChange={(e) => setEntwurf({ ...entwurf, mfa_required: e.target.checked })} />
|
onChange={(e) => setEntwurf({ ...entwurf, mfa_required: e.target.checked })} />
|
||||||
<span>{t("policy.mfaRequired")}</span>
|
<span>{t("policy.mfaRequired")}</span>
|
||||||
|
|||||||
+10
-4
@@ -239,6 +239,16 @@ input:focus, select:focus {
|
|||||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||||
}
|
}
|
||||||
input::placeholder { color: var(--muted); opacity: 0.7; }
|
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 { display: flex; gap: var(--sp-3); align-items: flex-start; }
|
||||||
.row .grow { flex: 1; }
|
.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 { display: block; width: 100%; padding: 9px 4px; }
|
||||||
.picklist .link-btn:hover { text-decoration: none; background: var(--surface-2); }
|
.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 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); }
|
.checklist li.done .item-name { text-decoration: line-through; color: var(--muted); }
|
||||||
.item-name { font-weight: 560; }
|
.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-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 { 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); }
|
.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-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%; }
|
.dt-tree-cell { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
|
||||||
/* Kategorie-Pfad: Oberkategorien klein und gedämpft, Blatt normal. */
|
/* Kategorie-Pfad: Oberkategorien klein und gedämpft, Blatt normal. */
|
||||||
|
|||||||
Reference in New Issue
Block a user