Fix checkbox/label spacing on Notifications and other form checkboxes

Tabler's form-check-single modifier zeroes margin on .form-check-input,
which cancels the -2rem margin-inline-start the base .form-check rule
relies on to offset the checkbox into its label's padding gutter. That
left checkboxes floating almost flush against their label text.

Removed the form-check-single class from all 9 affected checkboxes:
6 in NotificationSettings, 1 each in DnsProviderForm, IntegrationForm,
and IntegrationEditForm.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
bobbanandClaude Sonnet 5 committed 2026-09-19 01:43:45 +02:00
1 parent 08eb0bd87e
commit 82ed25b63f
4 files changed
+9 -9

No files matched your search

+1 -1
View File
@@ -108,7 +108,7 @@ export default function DnsProviderForm({
{fields.map((field) => ( {fields.map((field) => (
<div className="col-md-4" key={field.key}> <div className="col-md-4" key={field.key}>
{field.type === "checkbox" ? ( {field.type === "checkbox" ? (
<label className="form-check form-check-single mt-4"> <label className="form-check mt-4">
<input <input
type="checkbox" type="checkbox"
className="form-check-input" className="form-check-input"
+1 -1
View File
@@ -116,7 +116,7 @@ export default function IntegrationEditForm({
{fields?.map((field) => ( {fields?.map((field) => (
<div className="col-md-4" key={field.key}> <div className="col-md-4" key={field.key}>
{field.type === "checkbox" ? ( {field.type === "checkbox" ? (
<label className="form-check form-check-single mt-4"> <label className="form-check mt-4">
<input <input
type="checkbox" type="checkbox"
className="form-check-input" className="form-check-input"
+1 -1
View File
@@ -119,7 +119,7 @@ export default function IntegrationForm({ onCreated, onCancel }: { onCreated: ()
{fields.map((field) => ( {fields.map((field) => (
<div className="col-md-4" key={field.key}> <div className="col-md-4" key={field.key}>
{field.type === "checkbox" ? ( {field.type === "checkbox" ? (
<label className="form-check form-check-single mt-4"> <label className="form-check mt-4">
<input <input
type="checkbox" type="checkbox"
className="form-check-input" className="form-check-input"
@@ -185,7 +185,7 @@ export default function NotificationSettings() {
</div> </div>
<div className="card-body"> <div className="card-body">
<p className="text-secondary">Send push notifications to a self-hosted Gotify instance.</p> <p className="text-secondary">Send push notifications to a self-hosted Gotify instance.</p>
<label className="form-check form-check-single mb-3"> <label className="form-check mb-3">
<input <input
type="checkbox" type="checkbox"
className="form-check-input" className="form-check-input"
@@ -250,7 +250,7 @@ export default function NotificationSettings() {
<p className="text-secondary"> <p className="text-secondary">
Send notifications via <a href="https://ntfy.sh" target="_blank" rel="noreferrer">ntfy.sh</a> or a self-hosted instance. Send notifications via <a href="https://ntfy.sh" target="_blank" rel="noreferrer">ntfy.sh</a> or a self-hosted instance.
</p> </p>
<label className="form-check form-check-single mb-3"> <label className="form-check mb-3">
<input <input
type="checkbox" type="checkbox"
className="form-check-input" className="form-check-input"
@@ -324,7 +324,7 @@ export default function NotificationSettings() {
</div> </div>
<div className="card-body"> <div className="card-body">
<p className="text-secondary">Send notifications via email using any SMTP server.</p> <p className="text-secondary">Send notifications via email using any SMTP server.</p>
<label className="form-check form-check-single mb-3"> <label className="form-check mb-3">
<input <input
type="checkbox" type="checkbox"
className="form-check-input" className="form-check-input"
@@ -356,7 +356,7 @@ export default function NotificationSettings() {
/> />
</div> </div>
</div> </div>
<label className="form-check form-check-single mb-3"> <label className="form-check mb-3">
<input <input
type="checkbox" type="checkbox"
className="form-check-input" className="form-check-input"
@@ -434,7 +434,7 @@ export default function NotificationSettings() {
<p className="text-secondary"> <p className="text-secondary">
POST a JSON payload to any HTTP endpoint. Uses Discord/Slack-compatible <code>{"{ \"content\": \"…\" }"}</code> format. POST a JSON payload to any HTTP endpoint. Uses Discord/Slack-compatible <code>{"{ \"content\": \"…\" }"}</code> format.
</p> </p>
<label className="form-check form-check-single mb-3"> <label className="form-check mb-3">
<input <input
type="checkbox" type="checkbox"
className="form-check-input" className="form-check-input"
@@ -490,7 +490,7 @@ export default function NotificationSettings() {
{ key: "secretCheck" as const, label: "Secret expiry reminder" }, { key: "secretCheck" as const, label: "Secret expiry reminder" },
{ key: "tailscaleKeyCheck" as const, label: "Tailscale key expiry reminder" }, { key: "tailscaleKeyCheck" as const, label: "Tailscale key expiry reminder" },
].map(({ key, label }) => ( ].map(({ key, label }) => (
<label key={key} className="form-check form-check-single mb-2"> <label key={key} className="form-check mb-2">
<input <input
type="checkbox" type="checkbox"
className="form-check-input" className="form-check-input"