From c75eed630a041429abe693a90d64aacbc6ba40e8 Mon Sep 17 00:00:00 2001 From: Dominic R Date: Tue, 5 May 2026 00:17:23 -0400 Subject: [PATCH] web: remove native fieldset borders from action groups (#21334) * web: remove native fieldset borders from action groups Refs:\n- https://authentiksecurity.slack.com/archives/C08C0SCU2JV/p1775085687040019\n- https://authentiksecurity.slack.com/archives/C08C0SCU2JV/p1774988472501059 * Use consistent naming. * Fix up styles, selector specifics, compatibility mode. * Fix field autocapitalization, keyboard behavior. * Fix default height. * Fix for mid-size tablet viewports. - Helped with debugging on mobile. * Fix linter warning. --------- Co-authored-by: Teffen Ellis <592134+GirlBossRush@users.noreply.github.com> --- web/src/admin/ak-about-modal.ts | 4 - web/src/admin/ak-interface-admin.ts | 2 +- .../ak-application-wizard-submit-step.ts | 4 +- .../endpoints/connectors/agent/ConfigModal.ts | 2 +- .../admin/endpoints/devices/DeviceAddHowTo.ts | 2 +- .../admin/users/UserBulkRevokeSessionsForm.ts | 2 +- web/src/components/ak-page-navbar.css | 6 +- .../elements/ak-mdx/components/MDXAnchor.tsx | 3 +- .../commands/ak-command-palette-modal.css | 6 +- .../commands/ak-command-palette-modal.ts | 2 +- web/src/elements/dialogs/ak-modal.css | 4 +- web/src/elements/forms/ConfirmationForm.ts | 2 +- web/src/elements/forms/DeleteBulkForm.ts | 2 +- web/src/elements/forms/ModalForm.ts | 2 +- web/src/flow/inspector/FlowInspector.ts | 8 +- web/src/flow/stages/RedirectStage.ts | 2 +- .../stages/access_denied/AccessDeniedStage.ts | 2 +- .../AuthenticatorDuoStage.ts | 2 +- .../AuthenticatorEmailStage.ts | 4 +- .../AuthenticatorSMSStage.ts | 4 +- .../AuthenticatorStaticStage.ts | 2 +- .../AuthenticatorTOTPStage.ts | 2 +- .../AuthenticatorValidateStage.css | 11 ++ .../AuthenticatorValidateStage.ts | 7 +- .../AuthenticatorValidateStageCode.ts | 4 +- .../AuthenticatorValidateStageDuo.ts | 2 +- .../AuthenticatorValidateStageWebAuthn.ts | 2 +- .../WebAuthnAuthenticatorRegisterStage.ts | 2 +- web/src/flow/stages/consent/ConsentStage.ts | 2 +- web/src/flow/stages/dummy/DummyStage.ts | 2 +- web/src/flow/stages/email/EmailStage.ts | 2 +- .../identification/IdentificationStage.ts | 28 ++--- web/src/flow/stages/password/PasswordStage.ts | 5 +- web/src/flow/stages/prompt/PromptStage.ts | 2 +- .../flow/stages/user_login/UserLoginStage.ts | 2 +- web/src/styles/authentik/base.css | 1 + web/src/styles/authentik/base/common.css | 91 +++++++++++++++ .../styles/authentik/components/Card/card.css | 8 +- .../components/Fieldset/fieldset.css | 102 +++++++++++++++++ .../styles/authentik/components/Form/form.css | 105 +----------------- .../styles/authentik/components/Page/page.css | 4 +- .../authentik/components/Wizard/wizard.css | 4 +- web/src/styles/authentik/static.global.css | 1 + web/src/user/LibraryPage/ApplicationList.css | 2 +- web/src/user/LibraryPage/ApplicationList.ts | 1 + web/tsconfig.json | 1 + 46 files changed, 289 insertions(+), 171 deletions(-) create mode 100644 web/src/styles/authentik/components/Fieldset/fieldset.css diff --git a/web/src/admin/ak-about-modal.ts b/web/src/admin/ak-about-modal.ts index 59f78395ee..be67d50450 100644 --- a/web/src/admin/ak-about-modal.ts +++ b/web/src/admin/ak-about-modal.ts @@ -52,10 +52,6 @@ export class AboutModal extends WithLicenseSummary(WithBrandConfig(AKModal)) { ...AKModal.styles, PFAbout, css` - :host { - height: 100%; - } - .pf-c-about-modal-box { --pf-c-about-modal-box--BackgroundColor: var(--ak-c-dialog--BackgroundColor); width: unset; diff --git a/web/src/admin/ak-interface-admin.ts b/web/src/admin/ak-interface-admin.ts index 1090fbdeef..e185684b49 100644 --- a/web/src/admin/ak-interface-admin.ts +++ b/web/src/admin/ak-interface-admin.ts @@ -135,7 +135,7 @@ export class AdminInterface extends WithCapabilitiesConfig( WebsocketClient.connect(); - this.#sidebarMatcher = window.matchMedia("(width >= 1200px)"); + this.#sidebarMatcher = window.matchMedia("(width > 1210px)"); this.sidebarOpen = this.#sidebarMatcher.matches; } diff --git a/web/src/admin/applications/wizard/steps/ak-application-wizard-submit-step.ts b/web/src/admin/applications/wizard/steps/ak-application-wizard-submit-step.ts index f856c4c8a7..2bacaa752f 100644 --- a/web/src/admin/applications/wizard/steps/ak-application-wizard-submit-step.ts +++ b/web/src/admin/applications/wizard/steps/ak-application-wizard-submit-step.ts @@ -381,7 +381,7 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio return html`

${msg("Review the Application and Provider")}

-
+
${msg("Application Details")}
@@ -419,7 +419,7 @@ export class ApplicationWizardSubmitStep extends CustomEmitterElement(Applicatio ${ renderer - ? html`
+ ? html`
${msg("Provider Details")} ${renderer(provider)}
` diff --git a/web/src/admin/endpoints/connectors/agent/ConfigModal.ts b/web/src/admin/endpoints/connectors/agent/ConfigModal.ts index 9894629054..7b5d474789 100644 --- a/web/src/admin/endpoints/connectors/agent/ConfigModal.ts +++ b/web/src/admin/endpoints/connectors/agent/ConfigModal.ts @@ -86,7 +86,7 @@ export class ConfigModal extends ModalButton { >
-
+
${msg("Form actions")}