From 05ccff46518c6a498febe82104b1529403e0dfae Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sun, 18 Sep 2022 20:38:22 +0200
Subject: [PATCH] web: fix checkbox styling on applications form

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/admin/applications/ApplicationForm.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/src/admin/applications/ApplicationForm.ts b/web/src/admin/applications/ApplicationForm.ts
index 7f1b2ae22..c3e34bba2 100644
--- a/web/src/admin/applications/ApplicationForm.ts
+++ b/web/src/admin/applications/ApplicationForm.ts
@@ -187,8 +187,15 @@ export class ApplicationForm extends ModelForm<Application, string> {
                             ${t`If left empty, authentik will try to extract the launch URL based on the selected provider.`}
                         </p>
                     </ak-form-element-horizontal>
-                    <ak-form-element-horizontal label=${t`Open in new tab`} name="openInNewTab">
-                        <input type="checkbox" ?checked=${this.instance?.openInNewTab} />
+                    <ak-form-element-horizontal name="openInNewTab">
+                        <div class="pf-c-check">
+                            <input
+                                type="checkbox"
+                                class="pf-c-check__input"
+                                ?checked=${first(this.instance?.openInNewTab, true)}
+                            />
+                            <label class="pf-c-check__label"> ${t`Open in new tab`} </label>
+                        </div>
                         <p class="pf-c-form__helper-text">
                             ${t`If checked, the launch URL will open in a new browser tab or window from the user's application library.`}
                         </p>