From e2c477e01cb64e584bf1e75b65aea922c51e2a4f Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Wed, 14 Oct 2026 17:30:12 +0200
Subject: [PATCH] Task/replace custom utility classes with Bootstrap utilities
 (#8169)

Replace custom utility classes with Bootstrap utilities
---
 .../src/app/components/admin-users/admin-users.html  | 10 +++++++---
 .../subscription-interstitial-dialog.html            |  2 +-
 apps/client/src/app/pages/pricing/pricing-page.html  | 10 +++++-----
 apps/client/src/styles.scss                          | 12 ------------
 apps/client/src/styles/bootstrap.scss                |  1 -
 .../src/lib/top-holdings/top-holdings.component.html |  2 +-
 6 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/apps/client/src/app/components/admin-users/admin-users.html b/apps/client/src/app/components/admin-users/admin-users.html
index dbc78c74ae..7b49dc5f60 100644
--- a/apps/client/src/app/components/admin-users/admin-users.html
+++ b/apps/client/src/app/components/admin-users/admin-users.html
@@ -19,12 +19,16 @@
               <div class="align-items-center d-flex text-nowrap">
                 <span
                   class="d-none d-sm-inline-block font-monospace"
-                  [class.text-line-through]="element.role === 'INACTIVE'"
+                  [class.text-decoration-line-through]="
+                    element.role === 'INACTIVE'
+                  "
                   >{{ element.id }}</span
                 >
                 <span
                   class="d-inline-block d-sm-none font-monospace"
-                  [class.text-line-through]="element.role === 'INACTIVE'"
+                  [class.text-decoration-line-through]="
+                    element.role === 'INACTIVE'
+                  "
                   >{{ `${(element.id | slice: 0 : 5)}...` }}</span
                 >
                 @if (element.subscription?.expiresAt) {
@@ -200,7 +204,7 @@
                       [title]="translate(element.lastRequestClient)"
                     />
                   } @else {
-                    <ion-icon class="hidden me-1" />
+                    <ion-icon class="invisible me-1" />
                   }
                   {{
                     formatRelativeTime({
diff --git a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html
index 6ab23f6b06..8280067a87 100644
--- a/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html
+++ b/apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.html
@@ -166,7 +166,7 @@
     <div class="flex-grow-1 pt-0" mat-dialog-content>
       <div class="align-items-center d-flex h-100 justify-content-center">
         <gf-membership-card
-          class="gf-pointer-events-none"
+          class="pe-none"
           [name]="data?.user?.subscription?.type"
         />
       </div>
diff --git a/apps/client/src/app/pages/pricing/pricing-page.html b/apps/client/src/app/pages/pricing/pricing-page.html
index fa406dce5f..bef1dece51 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.html
+++ b/apps/client/src/app/pages/pricing/pricing-page.html
@@ -88,7 +88,7 @@
               <p i18n>Self-hosted, update manually.</p>
               <p class="h5 text-end" i18n>Free</p>
               @if (user?.subscription?.type === 'Basic') {
-                <div class="d-none d-lg-block hidden mt-3 text-center">
+                <div class="d-none d-lg-block invisible mt-3 text-center">
                   <a color="primary" mat-flat-button>&nbsp;</a>
                   <p class="m-0 text-muted">
                     <small>&nbsp;</small>
@@ -96,7 +96,7 @@
                 </div>
               }
               @if (durationExtension) {
-                <div class="d-none d-lg-block hidden mt-3">
+                <div class="d-none d-lg-block invisible mt-3">
                   <div class="badge p-3 w-100">&nbsp;</div>
                 </div>
               }
@@ -154,7 +154,7 @@
               <p i18n>Fully managed Ghostfolio cloud offering.</p>
               <p class="h5 text-end" i18n>Free</p>
               @if (user?.subscription?.type === 'Basic') {
-                <div class="d-none d-lg-block hidden mt-3 text-center">
+                <div class="d-none d-lg-block invisible mt-3 text-center">
                   <a color="primary" mat-flat-button>&nbsp;</a>
                   <p class="m-0 text-muted">
                     <small>&nbsp;</small>
@@ -162,7 +162,7 @@
                 </div>
               }
               @if (durationExtension) {
-                <div class="d-none d-lg-block hidden mt-3">
+                <div class="d-none d-lg-block invisible mt-3">
                   <div class="badge p-3 w-100">&nbsp;</div>
                 </div>
               }
@@ -238,7 +238,7 @@
                   </li>
                   <li class="align-items-center d-flex line-height-1 mb-1">
                     <ion-icon
-                      class="hidden me-1"
+                      class="invisible me-1"
                       name="checkmark-circle-outline"
                     />
                     <small
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index a2bae4d683..1742da70db 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -349,10 +349,6 @@ ngx-skeleton-loader {
   cursor: pointer;
 }
 
-.gf-pointer-events-none {
-  pointer-events: none;
-}
-
 .gf-spacer {
   flex: 1 1 auto;
 }
@@ -372,10 +368,6 @@ ngx-skeleton-loader {
   }
 }
 
-.hidden {
-  visibility: hidden;
-}
-
 .lead {
   font-weight: unset;
 }
@@ -511,10 +503,6 @@ ngx-skeleton-loader {
   }
 }
 
-.text-line-through {
-  text-decoration: line-through;
-}
-
 .with-placeholder-as-option {
   .mat-mdc-select-placeholder {
     color: rgba(var(--dark-primary-text));
diff --git a/apps/client/src/styles/bootstrap.scss b/apps/client/src/styles/bootstrap.scss
index 680971f77c..1f5ce6d19f 100644
--- a/apps/client/src/styles/bootstrap.scss
+++ b/apps/client/src/styles/bootstrap.scss
@@ -50,7 +50,6 @@ $table-cell-padding-y: 0.75rem;
 @import 'bootstrap/scss/utilities';
 
 // Remove the utility groups that the app does not use
-// (keep 'pointer-events' and 'visibility')
 $unused-utilities: (
   'align-content',
   'bg-opacity',
diff --git a/libs/ui/src/lib/top-holdings/top-holdings.component.html b/libs/ui/src/lib/top-holdings/top-holdings.component.html
index d1b52f4d38..6fea0f6b07 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.html
+++ b/libs/ui/src/lib/top-holdings/top-holdings.component.html
@@ -125,7 +125,7 @@
               ></tr>
               <tr
                 *matFooterRowDef="displayedColumns"
-                class="hidden"
+                class="invisible"
                 mat-footer-row
               ></tr>
             </table>