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:
1 parent
08eb0bd87e
commit
82ed25b63f
4 files changed
+9
-9
No files matched your search
@@ -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"
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
Reference in new issue
Block a user