From 463128175895a7b6f6ed734aec58c07065e7c04c Mon Sep 17 00:00:00 2001
From: Siddheya Kulkarni <115717746+Asymtode712@users.noreply.github.com>
Date: Sat, 17 Oct 2026 13:14:03 +0530
Subject: [PATCH] Task/replace custom line height class with Bootstrap utility
 (#8194)

* Replaced custom line height class

* Replace line-height-normal with lh-normal
---
 .../admin-market-data/admin-market-data.html  | 12 +++-----
 .../admin-settings.component.html             |  2 +-
 .../components/footer/footer.component.html   |  2 +-
 .../src/app/components/markets/markets.html   |  2 +-
 .../about/oss-friends/oss-friends-page.html   |  2 +-
 apps/client/src/app/pages/blog/blog-page.html |  2 +-
 .../src/app/pages/features/features-page.html |  2 +-
 .../create-or-update-activity-dialog.html     | 28 +++++--------------
 .../import-activities-dialog.html             |  1 -
 .../src/app/pages/pricing/pricing-page.html   |  6 ++--
 apps/client/src/styles.scss                   |  8 ------
 apps/client/src/styles/bootstrap.scss         | 11 +++++++-
 .../account-selector.component.html           |  4 +--
 .../activities-table.component.html           |  2 +-
 .../assistant-list-item.html                  |  2 +-
 .../lib/benchmark/benchmark.component.html    |  6 +---
 .../currency-selector.component.html          |  2 +-
 .../entity-logo/entity-logo.component.html    |  2 +-
 .../holdings-table.component.html             |  2 +-
 .../lib/page-tabs/page-tabs.component.html    |  2 +-
 .../portfolio-filter-form.component.html      |  2 +-
 .../symbol-autocomplete.component.html        |  5 ++--
 .../top-holdings/top-holdings.component.html  |  2 +-
 23 files changed, 42 insertions(+), 67 deletions(-)

diff --git a/apps/client/src/app/components/admin-market-data/admin-market-data.html b/apps/client/src/app/components/admin-market-data/admin-market-data.html
index 32dc2cdfbe..16447fc1f4 100644
--- a/apps/client/src/app/components/admin-market-data/admin-market-data.html
+++ b/apps/client/src/app/components/admin-market-data/admin-market-data.html
@@ -87,11 +87,7 @@
             >
               <ng-container i18n>Name</ng-container>
             </th>
-            <td
-              *matCellDef="let element"
-              class="line-height-normal px-1"
-              mat-cell
-            >
+            <td *matCellDef="let element" class="lh-normal px-1" mat-cell>
               <div class="text-truncate">{{ element.name }}</div>
               @if (!isUUID(element.symbol)) {
                 <div>
@@ -110,7 +106,7 @@
             </th>
             <td
               *matCellDef="let element"
-              class="line-height-normal px-1 text-nowrap"
+              class="lh-normal px-1 text-nowrap"
               mat-cell
             >
               <div>
@@ -132,7 +128,7 @@
             </th>
             <td
               *matCellDef="let element"
-              class="line-height-normal px-1 text-nowrap"
+              class="lh-normal px-1 text-nowrap"
               mat-cell
             >
               <div>{{ translate(element.assetClass) }}</div>
@@ -152,7 +148,7 @@
             </th>
             <td
               *matCellDef="let element"
-              class="line-height-normal px-1 text-nowrap"
+              class="lh-normal px-1 text-nowrap"
               mat-cell
             >
               <div>{{ translate(element.assetSubClass) }}</div>
diff --git a/apps/client/src/app/components/admin-settings/admin-settings.component.html b/apps/client/src/app/components/admin-settings/admin-settings.component.html
index 32cd9eaf4c..a991b8a0f3 100644
--- a/apps/client/src/app/components/admin-settings/admin-settings.component.html
+++ b/apps/client/src/app/components/admin-settings/admin-settings.component.html
@@ -90,7 +90,7 @@
                   }
                 </a>
                 @if (isGhostfolioApiKeyValid === true) {
-                  <div class="line-height-1">
+                  <div class="lh-1">
                     <small class="text-body-secondary">
                       <ng-container i18n>Valid until</ng-container>
                       {{
diff --git a/apps/client/src/app/components/footer/footer.component.html b/apps/client/src/app/components/footer/footer.component.html
index dbaaab11a4..143fe27a7a 100644
--- a/apps/client/src/app/components/footer/footer.component.html
+++ b/apps/client/src/app/components/footer/footer.component.html
@@ -192,6 +192,6 @@
 </div>
 <div class="container d-none d-md-block mt-5">
   <div class="d-flex justify-content-center">
-    <div class="fw-bold line-height-1 logotype">Ghostfolio</div>
+    <div class="fw-bold lh-1 logotype">Ghostfolio</div>
   </div>
 </div>
diff --git a/apps/client/src/app/components/markets/markets.html b/apps/client/src/app/components/markets/markets.html
index eeb6ce5791..73e27e181e 100644
--- a/apps/client/src/app/components/markets/markets.html
+++ b/apps/client/src/app/components/markets/markets.html
@@ -58,7 +58,7 @@
       />
       @if (benchmarks()?.length) {
         <div
-          class="gf-text-wrap-balance line-height-1 mt-3 text-body-secondary text-center"
+          class="gf-text-wrap-balance lh-1 mt-3 text-body-secondary text-center"
         >
           <small i18n>
             Calculations are based on delayed market data and may not be
diff --git a/apps/client/src/app/pages/about/oss-friends/oss-friends-page.html b/apps/client/src/app/pages/about/oss-friends/oss-friends-page.html
index cf8bb9b804..b53b5096d1 100644
--- a/apps/client/src/app/pages/about/oss-friends/oss-friends-page.html
+++ b/apps/client/src/app/pages/about/oss-friends/oss-friends-page.html
@@ -1,7 +1,7 @@
 <div class="container">
   <div class="row">
     <div class="col">
-      <h1 class="h3 line-height-1 mb-4 text-center">
+      <h1 class="h3 lh-1 mb-4 text-center">
         <span class="d-none d-sm-block"
           ><ng-container i18n>Our</ng-container> OSS Friends</span
         >
diff --git a/apps/client/src/app/pages/blog/blog-page.html b/apps/client/src/app/pages/blog/blog-page.html
index 3c1aacddc5..3a09b108d4 100644
--- a/apps/client/src/app/pages/blog/blog-page.html
+++ b/apps/client/src/app/pages/blog/blog-page.html
@@ -1,7 +1,7 @@
 <div class="container">
   <div class="mb-5 row">
     <div class="col">
-      <h1 class="h3 line-height-1 mb-4 text-center">
+      <h1 class="h3 lh-1 mb-4 text-center">
         <span class="d-none d-sm-block" i18n>Blog</span>
         <small class="text-body-secondary" i18n
           >Discover the latest Ghostfolio updates and insights on personal
diff --git a/apps/client/src/app/pages/features/features-page.html b/apps/client/src/app/pages/features/features-page.html
index b57ecba2e4..2c3e25d0da 100644
--- a/apps/client/src/app/pages/features/features-page.html
+++ b/apps/client/src/app/pages/features/features-page.html
@@ -1,7 +1,7 @@
 <div class="container">
   <div class="row">
     <div class="col">
-      <h1 class="h3 line-height-1 mb-4 text-center">
+      <h1 class="h3 lh-1 mb-4 text-center">
         <span class="d-none d-sm-block" i18n>Features</span>
         <small class="text-body-secondary" i18n>
           Check out the numerous features of Ghostfolio to manage your wealth
diff --git a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
index 693e63dad2..608b1d9084 100644
--- a/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
+++ b/apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.html
@@ -21,9 +21,7 @@
             <span
               ><b>{{ typesTranslationMap['BUY'] }}</b></span
             >
-            <small
-              class="d-block line-height-1 text-body-secondary text-nowrap"
-              i18n
+            <small class="d-block lh-1 text-body-secondary text-nowrap" i18n
               >Stocks, ETFs, bonds, cryptocurrencies, commodities</small
             >
           </mat-option>
@@ -31,9 +29,7 @@
             <span
               ><b>{{ typesTranslationMap['FEE'] }}</b></span
             >
-            <small
-              class="d-block line-height-1 text-body-secondary text-nowrap"
-              i18n
+            <small class="d-block lh-1 text-body-secondary text-nowrap" i18n
               >One-time fee, annual account fees</small
             >
           </mat-option>
@@ -41,9 +37,7 @@
             <span
               ><b>{{ typesTranslationMap['DIVIDEND'] }}</b></span
             >
-            <small
-              class="d-block line-height-1 text-body-secondary text-nowrap"
-              i18n
+            <small class="d-block lh-1 text-body-secondary text-nowrap" i18n
               >Distribution of corporate earnings</small
             >
           </mat-option>
@@ -51,9 +45,7 @@
             <span
               ><b>{{ typesTranslationMap['INTEREST'] }}</b></span
             >
-            <small
-              class="d-block line-height-1 text-body-secondary text-nowrap"
-              i18n
+            <small class="d-block lh-1 text-body-secondary text-nowrap" i18n
               >Revenue for lending out money</small
             >
           </mat-option>
@@ -61,9 +53,7 @@
             <span
               ><b>{{ typesTranslationMap['LIABILITY'] }}</b></span
             >
-            <small
-              class="d-block line-height-1 text-body-secondary text-nowrap"
-              i18n
+            <small class="d-block lh-1 text-body-secondary text-nowrap" i18n
               >Mortgages, personal loans, credit cards</small
             >
           </mat-option>
@@ -71,9 +61,7 @@
             <span
               ><b>{{ typesTranslationMap['SELL'] }}</b></span
             >
-            <small
-              class="d-block line-height-1 text-body-secondary text-nowrap"
-              i18n
+            <small class="d-block lh-1 text-body-secondary text-nowrap" i18n
               >Stocks, ETFs, bonds, cryptocurrencies, commodities</small
             >
           </mat-option>
@@ -81,9 +69,7 @@
             <span
               ><b>{{ typesTranslationMap['VALUABLE'] }}</b></span
             >
-            <small
-              class="d-block line-height-1 text-body-secondary text-nowrap"
-              i18n
+            <small class="d-block lh-1 text-body-secondary text-nowrap" i18n
               >Luxury items, real estate, private companies</small
             >
           </mat-option>
diff --git a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
index ae67e5a97e..c68594c7b5 100644
--- a/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
+++ b/apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html
@@ -38,7 +38,6 @@
                 }}</mat-select-trigger>
                 @for (holding of holdings; track holding) {
                   <mat-option
-                    class="line-height-1"
                     [value]="{
                       assetProfile: {
                         dataSource: holding.assetProfile.dataSource,
diff --git a/apps/client/src/app/pages/pricing/pricing-page.html b/apps/client/src/app/pages/pricing/pricing-page.html
index b3a24fe323..c9202ce38e 100644
--- a/apps/client/src/app/pages/pricing/pricing-page.html
+++ b/apps/client/src/app/pages/pricing/pricing-page.html
@@ -236,7 +236,7 @@
                       <ion-icon name="information-circle-outline" />
                     </span>
                   </li>
-                  <li class="align-items-center d-flex line-height-1 mb-1">
+                  <li class="align-items-center d-flex lh-1 mb-1">
                     <ion-icon
                       class="invisible me-1"
                       name="checkmark-circle-outline"
@@ -300,9 +300,7 @@
               }
               @if (durationExtension) {
                 <div class="mt-3">
-                  <div
-                    class="badge bg-warning fw-normal line-height-1 p-3 text-dark w-100"
-                  >
+                  <div class="badge bg-warning fw-normal p-3 text-dark w-100">
                     <strong i18n>Limited Offer!</strong>
                     <ng-container>&nbsp;</ng-container>
                     <ng-container i18n
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index ce28a8add1..5771ebd6de 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -372,14 +372,6 @@ ngx-skeleton-loader {
   font-weight: unset;
 }
 
-.line-height-1 {
-  line-height: 1;
-}
-
-.line-height-normal {
-  line-height: normal !important;
-}
-
 .mat-mdc-button-base {
   .mdc-button__label {
     align-items: center;
diff --git a/apps/client/src/styles/bootstrap.scss b/apps/client/src/styles/bootstrap.scss
index 1f5ce6d19f..81055e9536 100644
--- a/apps/client/src/styles/bootstrap.scss
+++ b/apps/client/src/styles/bootstrap.scss
@@ -67,7 +67,6 @@ $unused-utilities: (
   'font-style',
   'gap',
   'gradient',
-  'line-height',
   'link-offset',
   'link-opacity',
   'link-underline',
@@ -106,6 +105,16 @@ $unused-utilities: (
 
 $utilities: map.remove($utilities, $unused-utilities...);
 
+$utilities: map.set(
+  $utilities,
+  'line-height',
+  'values',
+  (
+    1: 1,
+    normal: normal
+  )
+);
+
 // Layout & components
 @import 'bootstrap/scss/root';
 @import 'bootstrap/scss/reboot';
diff --git a/libs/ui/src/lib/account-selector/account-selector.component.html b/libs/ui/src/lib/account-selector/account-selector.component.html
index ff52e30d88..d155e83910 100644
--- a/libs/ui/src/lib/account-selector/account-selector.component.html
+++ b/libs/ui/src/lib/account-selector/account-selector.component.html
@@ -11,7 +11,7 @@
     (closed)="onPanelClosed()"
   >
     <mat-select-trigger>
-      <div class="align-items-center align-middle d-inline-flex line-height-1">
+      <div class="align-items-center align-middle d-inline-flex lh-1">
         @if (selectedAccount()?.platform?.url) {
           <gf-entity-logo
             class="me-1"
@@ -36,7 +36,7 @@
             [tooltip]="account.platform?.name ?? ''"
             [url]="account.platform?.url ?? ''"
           />
-          <div class="line-height-1">
+          <div class="lh-1">
             <span>{{ account.name }}</span>
             <br />
             <small class="text-body-secondary">
diff --git a/libs/ui/src/lib/activities-table/activities-table.component.html b/libs/ui/src/lib/activities-table/activities-table.component.html
index 8769d5c032..c0082f65ab 100644
--- a/libs/ui/src/lib/activities-table/activities-table.component.html
+++ b/libs/ui/src/lib/activities-table/activities-table.component.html
@@ -184,7 +184,7 @@
       <th *matHeaderCellDef class="px-1" mat-header-cell>
         <ng-container i18n>Name</ng-container>
       </th>
-      <td *matCellDef="let element" class="line-height-normal px-1" mat-cell>
+      <td *matCellDef="let element" class="lh-normal px-1" mat-cell>
         <div class="align-items-center d-flex text-nowrap">
           <span class="text-truncate">{{ element.assetProfile?.name }}</span>
           @if (isDraftActivity(element)) {
diff --git a/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html b/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html
index 2c7498754c..882e901fb5 100644
--- a/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html
+++ b/libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html
@@ -1,6 +1,6 @@
 <a
   #link
-  class="d-block line-height-1 px-3 py-1 text-truncate"
+  class="d-block lh-1 px-3 py-1 text-truncate"
   [queryParams]="queryParams"
   [routerLink]="routerLink"
   (click)="onClick()"
diff --git a/libs/ui/src/lib/benchmark/benchmark.component.html b/libs/ui/src/lib/benchmark/benchmark.component.html
index f65cb3045f..d2b0a5e328 100644
--- a/libs/ui/src/lib/benchmark/benchmark.component.html
+++ b/libs/ui/src/lib/benchmark/benchmark.component.html
@@ -22,11 +22,7 @@
       <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
         <ng-container i18n>Name</ng-container>
       </th>
-      <td
-        *matCellDef="let element"
-        class="line-height-normal px-1 text-nowrap"
-        mat-cell
-      >
+      <td *matCellDef="let element" class="lh-normal px-1 text-nowrap" mat-cell>
         <div class="text-truncate">
           {{ element?.name }}
         </div>
diff --git a/libs/ui/src/lib/currency-selector/currency-selector.component.html b/libs/ui/src/lib/currency-selector/currency-selector.component.html
index 6bf5e6f972..bf324574b3 100644
--- a/libs/ui/src/lib/currency-selector/currency-selector.component.html
+++ b/libs/ui/src/lib/currency-selector/currency-selector.component.html
@@ -20,7 +20,7 @@
   (optionSelected)="onUpdateCurrency($event)"
 >
   @for (currency of filteredCurrencies; track currency) {
-    <mat-option class="line-height-1" [value]="currency">
+    <mat-option [value]="currency">
       <span class="align-items-center d-flex">
         <gf-entity-logo
           class="me-1"
diff --git a/libs/ui/src/lib/entity-logo/entity-logo.component.html b/libs/ui/src/lib/entity-logo/entity-logo.component.html
index 6a486e2125..5a653b81e6 100644
--- a/libs/ui/src/lib/entity-logo/entity-logo.component.html
+++ b/libs/ui/src/lib/entity-logo/entity-logo.component.html
@@ -8,7 +8,7 @@
   >
     <span
       aria-hidden="true"
-      class="align-items-center d-flex emoji justify-content-center line-height-1 position-absolute"
+      class="align-items-center d-flex emoji justify-content-center lh-1 position-absolute"
     >
       {{ emojiFlag }}
     </span>
diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.html b/libs/ui/src/lib/holdings-table/holdings-table.component.html
index 49f2fa5967..025be8a723 100644
--- a/libs/ui/src/lib/holdings-table/holdings-table.component.html
+++ b/libs/ui/src/lib/holdings-table/holdings-table.component.html
@@ -36,7 +36,7 @@
       </th>
       <td
         *matCellDef="let element"
-        class="line-height-normal px-1"
+        class="lh-normal px-1"
         mat-cell
         [class.w-100]="mode() === 'simple'"
       >
diff --git a/libs/ui/src/lib/page-tabs/page-tabs.component.html b/libs/ui/src/lib/page-tabs/page-tabs.component.html
index 343ce24bcc..7d94772dfb 100644
--- a/libs/ui/src/lib/page-tabs/page-tabs.component.html
+++ b/libs/ui/src/lib/page-tabs/page-tabs.component.html
@@ -54,7 +54,7 @@
       [size]="deviceType === 'mobile' ? 'large' : 'small'"
     />
     <span
-      class="d-none d-sm-block line-height-normal ms-1 overflow-hidden p-0 text-truncate"
+      class="d-none d-sm-block lh-normal ms-1 overflow-hidden p-0 text-truncate"
       [innerHTML]="tab.label"
     ></span>
   </span>
diff --git a/libs/ui/src/lib/portfolio-filter-form/portfolio-filter-form.component.html b/libs/ui/src/lib/portfolio-filter-form/portfolio-filter-form.component.html
index 10a82c2823..385737d345 100644
--- a/libs/ui/src/lib/portfolio-filter-form/portfolio-filter-form.component.html
+++ b/libs/ui/src/lib/portfolio-filter-form/portfolio-filter-form.component.html
@@ -21,7 +21,7 @@
         <mat-option [value]="null" />
         @for (holding of holdings(); track holding.assetProfile.name) {
           <mat-option [value]="holding">
-            <div class="line-height-1 text-truncate">
+            <div class="lh-1 text-truncate">
               <span>{{ holding.assetProfile.name }}</span>
               <br />
               <small class="text-body-secondary"
diff --git a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html
index f6dc16b963..dc6199229e 100644
--- a/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html
+++ b/libs/ui/src/lib/symbol-autocomplete/symbol-autocomplete.component.html
@@ -15,11 +15,10 @@
   @if (!isLoading) {
     @for (lookupItem of lookupItems; track lookupItem) {
       <mat-option
-        class="line-height-1"
         [disabled]="lookupItem.dataProviderInfo.isPremium"
         [value]="lookupItem"
       >
-        <span class="align-items-center d-flex line-height-1"
+        <span class="align-items-center d-flex lh-1"
           ><span>{{ lookupItem.name }}</span>
           @if (lookupItem.dataProviderInfo.isPremium) {
             <gf-premium-indicator class="ms-1" [enableLink]="false" />
@@ -40,7 +39,7 @@
       </mat-option>
     } @empty {
       @if (control.value?.length > 1) {
-        <mat-option class="line-height-1" disabled="true" i18n
+        <mat-option disabled="true" i18n
           >Oops! Could not find any assets.</mat-option
         >
       }
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 bfa8da06c6..0749b958d8 100644
--- a/libs/ui/src/lib/top-holdings/top-holdings.component.html
+++ b/libs/ui/src/lib/top-holdings/top-holdings.component.html
@@ -74,7 +74,7 @@
               <ng-container matColumnDef="name">
                 <td
                   *matCellDef="let parentHolding"
-                  class="line-height-normal px-2"
+                  class="lh-normal px-2"
                   mat-cell
                 >
                   <div class="text-truncate">{{ parentHolding?.name }}</div>