From bedf548a5f1d73119a33734ff145c6b588259a53 Mon Sep 17 00:00:00 2001
From: RoboMagus <68224306+RoboMagus@users.noreply.github.com>
Date: Tue, 22 Apr 2025 04:47:02 +0200
Subject: [PATCH] web: fix scrollbar styling (#12600)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix `.pf-c-card__body` scrollbars

* Fallback scrollbar styling for browsers that don't support `::-webkit-scrollbar`

---------

Co-authored-by: Marcelo Elizeche Landó <marcelo@goauthentik.io>
---
 web/src/common/styles/authentik.css     | 32 +++++++++++++++----------
 web/src/elements/cards/AggregateCard.ts |  2 +-
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/web/src/common/styles/authentik.css b/web/src/common/styles/authentik.css
index a44989f3fe..b8d99d9b9e 100644
--- a/web/src/common/styles/authentik.css
+++ b/web/src/common/styles/authentik.css
@@ -19,19 +19,27 @@
     --ak-sidebar--minimum-auto-width: 80rem;
 }
 
-::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-    background-color: transparent;
+@supports selector(::-webkit-scrollbar) {
+    ::-webkit-scrollbar {
+        width: 5px;
+        height: 5px;
+        background-color: transparent;
+    }
+    ::-webkit-scrollbar-thumb {
+        background-color: var(--ak-accent);
+    }
+    ::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+    ::-webkit-scrollbar-corner {
+        background-color: transparent;
+    }
 }
-::-webkit-scrollbar-thumb {
-    background-color: var(--ak-accent);
-}
-::-webkit-scrollbar-track {
-    background-color: transparent;
-}
-::-webkit-scrollbar-corner {
-    background-color: transparent;
+
+@supports not selector(::-webkit-scrollbar) {
+    :root {
+        scrollbar-color: var(--ak-accent) transparent;
+    }
 }
 
 html {
diff --git a/web/src/elements/cards/AggregateCard.ts b/web/src/elements/cards/AggregateCard.ts
index e64d17952f..53f366993f 100644
--- a/web/src/elements/cards/AggregateCard.ts
+++ b/web/src/elements/cards/AggregateCard.ts
@@ -86,7 +86,7 @@ export class AggregateCard extends AKElement implements IAggregateCard {
                     font-size: var(--pf-global--FontSize--sm);
                 }
                 .pf-c-card__body {
-                    overflow-x: scroll;
+                    overflow-x: auto;
                     padding-left: calc(var(--pf-c-card--child--PaddingLeft) / 2);
                     padding-right: calc(var(--pf-c-card--child--PaddingRight) / 2);
                 }