diff --git a/web/src/authentik.css b/web/src/authentik.css
index 614b6a22e..f5edceb1c 100644
--- a/web/src/authentik.css
+++ b/web/src/authentik.css
@@ -156,6 +156,10 @@ ak-message {
.pf-c-table__sort-indicator i {
color: var(--ak-dark-foreground) !important;
}
+ /* tabs, vertical */
+ .pf-c-tabs__link {
+ background-color: var(--ak-dark-background-light);
+ }
/* table, on mobile */
@media screen and (max-width: 1200px) {
.pf-m-grid-xl.pf-c-table tbody:first-of-type {
diff --git a/web/src/elements/Tabs.ts b/web/src/elements/Tabs.ts
index 814106eb4..2d1006f5c 100644
--- a/web/src/elements/Tabs.ts
+++ b/web/src/elements/Tabs.ts
@@ -4,6 +4,8 @@ import { ifDefined } from "lit-html/directives/if-defined";
import TabsStyle from "@patternfly/patternfly/components/Tabs/tabs.css";
// @ts-ignore
import GlobalsStyle from "@patternfly/patternfly/base/patternfly-globals.css";
+// @ts-ignore
+import AKGlobal from "../authentik.css";
import { CURRENT_CLASS } from "../constants";
import { gettext } from "django";
@@ -16,7 +18,7 @@ export class Tabs extends LitElement {
vertical = false;
static get styles(): CSSResult[] {
- return [GlobalsStyle, TabsStyle, css`
+ return [GlobalsStyle, TabsStyle, AKGlobal, css`
::slotted(*) {
height: 100%;
flex-grow: 2;
@@ -24,6 +26,9 @@ export class Tabs extends LitElement {
:host([vertical]) {
display: flex;
}
+ :host([vertical]) .pf-c-tabs__list {
+ height: 100%;
+ }
`];
}