Update bootstrap to version 5.3.8

apps/client/src/app/app.component.ts

@@ -350,11 +350,9 @@ export class GfAppComponent implements OnInit {
     if (isDarkColorScheme(userPreferredColorScheme)) {
       this.document.body.classList.add('theme-dark');
       this.document.body.classList.remove('theme-light');
-      this.document.documentElement.setAttribute('data-bs-theme', 'dark');
     } else {
       this.document.body.classList.add('theme-light');
       this.document.body.classList.remove('theme-dark');
-      this.document.documentElement.setAttribute('data-bs-theme', 'light');
     }
 
     this.document

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html

@@ -188,7 +188,7 @@
                   >Symbol</gf-value
                 >
               </div>
-              <div class="col-6 mb-3">
+              <div class="col-6 mb-3 position-relative">
                 <gf-value
                   i18n
                   size="medium"

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html

@@ -1,5 +1,5 @@
 <div class="container p-0">
-  <div class="d-flex">
+  <div class="d-flex flex-wrap">
     <div class="px-1 status-container text-muted text-right">
       @if ((errors()?.length ?? 0) > 0 && !isLoading()) {
         <ion-icon

apps/client/src/app/pages/landing/landing-page.html

@@ -360,10 +360,8 @@
 </div>
 
 <div class="container">
-  <div class="d-block">
-    <div class="outro-inner-container mx-auto">
-      <div class="h-100 w-100"></div>
-    </div>
+  <div class="outro-inner-container mx-auto">
+    <div class="h-100 w-100"></div>
   </div>
   <div class="d-flex justify-content-center mb-4">
     <div class="align-items-center d-flex flex-column justify-content-center">

apps/client/src/styles/bootstrap.scss

@@ -13,14 +13,27 @@
 $badge-padding-x: 0.4em;
 $badge-padding-y: 0.25em;
 $blue: #007bff;
+$body-secondary-color: #6c757d;
+$border-radius: 0.25rem;
+$code-color: inherit;
+$code-color-dark: inherit;
+$code-font-size: 1em;
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1140px
+);
 $cyan: #17a2b8;
+$enable-dark-mode: false;
 $enable-rfs: false;
+$enable-smooth-scroll: false;
 $green: #28a745;
 $grid-gutter-width: 30px;
 $hr-opacity: 1;
 $link-decoration: none;
 $link-hover-decoration: underline;
-$small-font-size: 80%;
 
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/variables-dark';
@@ -151,7 +164,7 @@ $utilities: map.merge(
 // @import 'bootstrap/scss/placeholders';
 
 // Helpers
-@import 'bootstrap/scss/helpers';
+@import 'bootstrap/scss/helpers/text-truncation';
 
 // Utilities
 @import 'bootstrap/scss/utilities/api';
@@ -162,21 +175,11 @@ $utilities: map.merge(
   --bs-gutter-y: 0;
 }
 
-// Maintain 1140px container max-width at >=1400px (avoiding BS5 1320px stretch)
-@media (min-width: 1400px) {
-  .container-xxl,
-  .container-xl,
-  .container-lg,
-  .container-md,
-  .container-sm,
-  .container {
-    max-width: 1140px;
-  }
-}
-
 // Badge compatibility
 .badge-pill {
   border-radius: var(--bs-border-radius-pill, 50rem);
+  padding-left: 0.6em;
+  padding-right: 0.6em;
 }
 
 .badge-secondary {