From 0749ae1f50fedc675b96629ce3b8ace42d62f979 Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 16 Sep 2023 16:47:28 +0200
Subject: [PATCH] Improve sidebar

---
 apps/client/src/app/app.component.html        |  1 +
 apps/client/src/app/app.component.scss        |  8 ++--
 apps/client/src/app/app.component.ts          |  9 ++++
 .../admin-settings.component.ts               |  1 -
 .../components/header/header.component.html   | 47 +++++++++++--------
 .../components/header/header.component.scss   | 16 +++++++
 .../app/components/header/header.component.ts |  1 +
 .../app/pages/about/about-page.component.ts   |  2 +-
 .../src/app/pages/about/about-page.html       |  7 ++-
 .../changelog/changelog-page.component.ts     |  1 -
 .../about/license/license-page.component.ts   |  1 -
 .../oss-friends/oss-friends-page.component.ts |  1 -
 .../overview/about-overview-page.component.ts |  1 -
 .../privacy-policy-page.component.ts          |  1 -
 .../app/pages/admin/admin-page.component.ts   |  2 +-
 .../src/app/pages/admin/admin-page.html       |  7 ++-
 .../src/app/pages/home/home-page.component.ts |  2 +-
 apps/client/src/app/pages/home/home-page.html |  7 ++-
 .../src/app/pages/landing/landing-page.html   |  2 +-
 .../activities/activities-page.component.ts   |  1 -
 .../allocations/allocations-page.component.ts |  1 -
 .../analysis/analysis-page.component.ts       |  1 -
 .../portfolio/fire/fire-page.component.ts     |  1 -
 .../holdings/holdings-page.component.ts       |  1 -
 .../portfolio/portfolio-page.component.ts     |  2 +-
 .../app/pages/portfolio/portfolio-page.html   |  7 ++-
 .../src/app/pages/zen/zen-page.component.ts   |  2 +-
 apps/client/src/app/pages/zen/zen-page.html   |  7 ++-
 apps/client/src/styles.scss                   | 29 +++++++++---
 29 files changed, 117 insertions(+), 52 deletions(-)

diff --git a/apps/client/src/app/app.component.html b/apps/client/src/app/app.component.html
index c9457cfc0..ec54e3c24 100644
--- a/apps/client/src/app/app.component.html
+++ b/apps/client/src/app/app.component.html
@@ -2,6 +2,7 @@
   <gf-header
     class="position-fixed w-100"
     [currentRoute]="currentRoute"
+    [hasTabs]="hasTabs"
     [info]="info"
     [pageTitle]="pageTitle"
     [user]="user"
diff --git a/apps/client/src/app/app.component.scss b/apps/client/src/app/app.component.scss
index 0c0828880..658ca4887 100644
--- a/apps/client/src/app/app.component.scss
+++ b/apps/client/src/app/app.component.scss
@@ -9,13 +9,15 @@
     font-size: 90%;
   }
 
+  header {
+    height: var(--mat-toolbar-standard-height);
+  }
+
   main {
-    min-height: 100vh;
-    padding-top: 5rem;
+    min-height: calc(100vh - var(--mat-toolbar-standard-height));
 
     .info-message-container {
       height: 3.5rem;
-      margin-top: -0.5rem;
 
       .info-message {
         background-color: rgba(var(--palette-foreground-text), 0.05);
diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts
index dd6240d98..fbcaa0fa9 100644
--- a/apps/client/src/app/app.component.ts
+++ b/apps/client/src/app/app.component.ts
@@ -36,6 +36,7 @@ export class AppComponent implements OnDestroy, OnInit {
   public hasPermissionForStatistics: boolean;
   public hasPermissionForSubscription: boolean;
   public hasPermissionToAccessFearAndGreedIndex: boolean;
+  public hasTabs = false;
   public info: InfoItem;
   public pageTitle: string;
   public routerLinkAbout = ['/' + $localize`about`];
@@ -103,6 +104,14 @@ export class AppComponent implements OnDestroy, OnInit {
         const urlSegments = urlSegmentGroup.segments;
         this.currentRoute = urlSegments[0].path;
 
+        this.hasTabs =
+          (this.currentRoute === this.routerLinkAbout[0].slice(1) ||
+            this.currentRoute === 'admin' ||
+            this.currentRoute === 'home' ||
+            this.currentRoute === 'portfolio' ||
+            this.currentRoute === 'zen') &&
+          this.deviceType !== 'mobile';
+
         this.showFooter =
           (this.currentRoute === 'blog' ||
             this.currentRoute === this.routerLinkFaq[0].slice(1) ||
diff --git a/apps/client/src/app/components/admin-settings/admin-settings.component.ts b/apps/client/src/app/components/admin-settings/admin-settings.component.ts
index 97066d533..35e6d5c63 100644
--- a/apps/client/src/app/components/admin-settings/admin-settings.component.ts
+++ b/apps/client/src/app/components/admin-settings/admin-settings.component.ts
@@ -8,7 +8,6 @@ import { Subject } from 'rxjs';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: 'page' },
   selector: 'gf-admin-settings',
   styleUrls: ['./admin-settings.component.scss'],
   templateUrl: './admin-settings.component.html'
diff --git a/apps/client/src/app/components/header/header.component.html b/apps/client/src/app/components/header/header.component.html
index 5c412a1b9..2c56cb742 100644
--- a/apps/client/src/app/components/header/header.component.html
+++ b/apps/client/src/app/components/header/header.component.html
@@ -1,14 +1,17 @@
-<mat-toolbar class="px-2">
+<mat-toolbar class="px-0">
   <ng-container *ngIf="user">
-    <a
-      class="align-items-center d-flex h-100 no-min-width px-2 rounded-0"
-      mat-button
-      [routerLink]="['/']"
-    >
-      <gf-logo [label]="pageTitle"></gf-logo>
-    </a>
+    <div class="d-flex h-100 logo-container" [ngClass]="{ filled: hasTabs }">
+      <a
+        class="align-items-center justify-content-start rounded-0"
+        mat-button
+        [ngClass]="{ 'w-100': hasTabs }"
+        [routerLink]="['/']"
+      >
+        <gf-logo class="px-2" [label]="pageTitle"></gf-logo>
+      </a>
+    </div>
     <span class="spacer"></span>
-    <ul class="alig-items-center d-flex list-inline m-0">
+    <ul class="alig-items-center d-flex list-inline m-0 px-2">
       <li class="list-inline-item">
         <a
           class="d-none d-sm-block"
@@ -246,18 +249,22 @@
     </ul>
   </ng-container>
   <ng-container *ngIf="user === null">
-    <a
-      class="align-items-center d-flex h-100 mx-2 no-min-width px-2 rounded-0"
-      mat-button
-      [routerLink]="['/']"
-    >
-      <gf-logo
-        [label]="pageTitle"
-        [showLabel]="currentRoute !== 'register'"
-      ></gf-logo>
-    </a>
+    <div class="d-flex h-100 logo-container" [ngClass]="{ filled: hasTabs }">
+      <a
+        class="align-items-center justify-content-start rounded-0"
+        mat-button
+        [ngClass]="{ 'w-100': hasTabs }"
+        [routerLink]="['/']"
+      >
+        <gf-logo
+          class="px-2"
+          [label]="pageTitle"
+          [showLabel]="currentRoute !== 'register'"
+        ></gf-logo>
+      </a>
+    </div>
     <span class="spacer"></span>
-    <ul class="alig-items-center d-flex list-inline m-0">
+    <ul class="alig-items-center d-flex list-inline m-0 px-2">
       <li class="list-inline-item">
         <a
           class="d-none d-sm-block"
diff --git a/apps/client/src/app/components/header/header.component.scss b/apps/client/src/app/components/header/header.component.scss
index d7c9491b1..ce43c55ab 100644
--- a/apps/client/src/app/components/header/header.component.scss
+++ b/apps/client/src/app/components/header/header.component.scss
@@ -7,6 +7,16 @@
   .mat-toolbar {
     background-color: var(--light-background);
 
+    .logo-container {
+      &.filled {
+        background-color: rgba(var(--palette-foreground-base), 0.02);
+      }
+
+      @media (min-width: 576px) {
+        width: 14rem;
+      }
+    }
+
     .list-inline-item {
       margin: 0;
     }
@@ -34,5 +44,11 @@
 :host-context(.is-dark-theme) {
   .mat-toolbar {
     background-color: var(--dark-background);
+
+    .logo-container {
+      &.filled {
+        background-color: rgba(var(--palette-foreground-base-dark), 0.02);
+      }
+    }
   }
 }
diff --git a/apps/client/src/app/components/header/header.component.ts b/apps/client/src/app/components/header/header.component.ts
index c2a0119f1..063a4d31c 100644
--- a/apps/client/src/app/components/header/header.component.ts
+++ b/apps/client/src/app/components/header/header.component.ts
@@ -29,6 +29,7 @@ import { catchError, takeUntil } from 'rxjs/operators';
 })
 export class HeaderComponent implements OnChanges {
   @Input() currentRoute: string;
+  @Input() hasTabs: boolean;
   @Input() info: InfoItem;
   @Input() pageTitle: string;
   @Input() user: User;
diff --git a/apps/client/src/app/pages/about/about-page.component.ts b/apps/client/src/app/pages/about/about-page.component.ts
index 6d9887dde..da2790b16 100644
--- a/apps/client/src/app/pages/about/about-page.component.ts
+++ b/apps/client/src/app/pages/about/about-page.component.ts
@@ -14,7 +14,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-  host: { class: 'page with-tabs' },
+  host: { class: 'page has-tabs' },
   selector: 'gf-about-page',
   styleUrls: ['./about-page.scss'],
   templateUrl: './about-page.html'
diff --git a/apps/client/src/app/pages/about/about-page.html b/apps/client/src/app/pages/about/about-page.html
index 014f68b9f..d3fbca534 100644
--- a/apps/client/src/app/pages/about/about-page.html
+++ b/apps/client/src/app/pages/about/about-page.html
@@ -2,7 +2,12 @@
   <router-outlet></router-outlet>
 </mat-tab-nav-panel>
 
-<nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
+<nav
+  mat-align-tabs="center"
+  mat-tab-nav-bar
+  [disablePagination]="true"
+  [tabPanel]="tabPanel"
+>
   <ng-container *ngFor="let tab of tabs">
     <a
       #rla="routerLinkActive"
diff --git a/apps/client/src/app/pages/about/changelog/changelog-page.component.ts b/apps/client/src/app/pages/about/changelog/changelog-page.component.ts
index e4528b1ad..0de907b6a 100644
--- a/apps/client/src/app/pages/about/changelog/changelog-page.component.ts
+++ b/apps/client/src/app/pages/about/changelog/changelog-page.component.ts
@@ -2,7 +2,6 @@ import { Component, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 
 @Component({
-  host: { class: 'page' },
   selector: 'gf-changelog-page',
   styleUrls: ['./changelog-page.scss'],
   templateUrl: './changelog-page.html'
diff --git a/apps/client/src/app/pages/about/license/license-page.component.ts b/apps/client/src/app/pages/about/license/license-page.component.ts
index 185fde025..3eadaa4de 100644
--- a/apps/client/src/app/pages/about/license/license-page.component.ts
+++ b/apps/client/src/app/pages/about/license/license-page.component.ts
@@ -2,7 +2,6 @@ import { Component, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 
 @Component({
-  host: { class: 'page' },
   selector: 'gf-license-page',
   styleUrls: ['./license-page.scss'],
   templateUrl: './license-page.html'
diff --git a/apps/client/src/app/pages/about/oss-friends/oss-friends-page.component.ts b/apps/client/src/app/pages/about/oss-friends/oss-friends-page.component.ts
index 9b5caa8a8..f0a2e70a3 100644
--- a/apps/client/src/app/pages/about/oss-friends/oss-friends-page.component.ts
+++ b/apps/client/src/app/pages/about/oss-friends/oss-friends-page.component.ts
@@ -4,7 +4,6 @@ import { Subject } from 'rxjs';
 const ossFriends = require('../../../../assets/oss-friends.json');
 
 @Component({
-  host: { class: 'page' },
   selector: 'gf-oss-friends-page',
   styleUrls: ['./oss-friends-page.scss'],
   templateUrl: './oss-friends-page.html'
diff --git a/apps/client/src/app/pages/about/overview/about-overview-page.component.ts b/apps/client/src/app/pages/about/overview/about-overview-page.component.ts
index d06ebcf1e..471874dc2 100644
--- a/apps/client/src/app/pages/about/overview/about-overview-page.component.ts
+++ b/apps/client/src/app/pages/about/overview/about-overview-page.component.ts
@@ -8,7 +8,6 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-  host: { class: 'page' },
   selector: 'gf-about-overview-page',
   styleUrls: ['./about-overview-page.scss'],
   templateUrl: './about-overview-page.html'
diff --git a/apps/client/src/app/pages/about/privacy-policy/privacy-policy-page.component.ts b/apps/client/src/app/pages/about/privacy-policy/privacy-policy-page.component.ts
index c00be0872..9ebddfab3 100644
--- a/apps/client/src/app/pages/about/privacy-policy/privacy-policy-page.component.ts
+++ b/apps/client/src/app/pages/about/privacy-policy/privacy-policy-page.component.ts
@@ -2,7 +2,6 @@ import { Component, OnDestroy } from '@angular/core';
 import { Subject } from 'rxjs';
 
 @Component({
-  host: { class: 'page' },
   selector: 'gf-privacy-policy-page',
   styleUrls: ['./privacy-policy-page.scss'],
   templateUrl: './privacy-policy-page.html'
diff --git a/apps/client/src/app/pages/admin/admin-page.component.ts b/apps/client/src/app/pages/admin/admin-page.component.ts
index 6ba5d0ac8..176e1083a 100644
--- a/apps/client/src/app/pages/admin/admin-page.component.ts
+++ b/apps/client/src/app/pages/admin/admin-page.component.ts
@@ -5,7 +5,7 @@ import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 
 @Component({
-  host: { class: 'page with-tabs' },
+  host: { class: 'page has-tabs' },
   selector: 'gf-admin-page',
   styleUrls: ['./admin-page.scss'],
   templateUrl: './admin-page.html'
diff --git a/apps/client/src/app/pages/admin/admin-page.html b/apps/client/src/app/pages/admin/admin-page.html
index 014f68b9f..d3fbca534 100644
--- a/apps/client/src/app/pages/admin/admin-page.html
+++ b/apps/client/src/app/pages/admin/admin-page.html
@@ -2,7 +2,12 @@
   <router-outlet></router-outlet>
 </mat-tab-nav-panel>
 
-<nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
+<nav
+  mat-align-tabs="center"
+  mat-tab-nav-bar
+  [disablePagination]="true"
+  [tabPanel]="tabPanel"
+>
   <ng-container *ngFor="let tab of tabs">
     <a
       #rla="routerLinkActive"
diff --git a/apps/client/src/app/pages/home/home-page.component.ts b/apps/client/src/app/pages/home/home-page.component.ts
index 13904e037..27c8444f8 100644
--- a/apps/client/src/app/pages/home/home-page.component.ts
+++ b/apps/client/src/app/pages/home/home-page.component.ts
@@ -14,7 +14,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-  host: { class: 'page with-tabs' },
+  host: { class: 'page has-tabs' },
   selector: 'gf-home-page',
   styleUrls: ['./home-page.scss'],
   templateUrl: './home-page.html'
diff --git a/apps/client/src/app/pages/home/home-page.html b/apps/client/src/app/pages/home/home-page.html
index 014f68b9f..d3fbca534 100644
--- a/apps/client/src/app/pages/home/home-page.html
+++ b/apps/client/src/app/pages/home/home-page.html
@@ -2,7 +2,12 @@
   <router-outlet></router-outlet>
 </mat-tab-nav-panel>
 
-<nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
+<nav
+  mat-align-tabs="center"
+  mat-tab-nav-bar
+  [disablePagination]="true"
+  [tabPanel]="tabPanel"
+>
   <ng-container *ngFor="let tab of tabs">
     <a
       #rla="routerLinkActive"
diff --git a/apps/client/src/app/pages/landing/landing-page.html b/apps/client/src/app/pages/landing/landing-page.html
index 29543baf1..334a90cd5 100644
--- a/apps/client/src/app/pages/landing/landing-page.html
+++ b/apps/client/src/app/pages/landing/landing-page.html
@@ -1,7 +1,7 @@
 <div class="container">
   <div class="row">
     <div class="col text-center">
-      <div class="mt-5">
+      <div>
         <div class="badge badge-light badge-pill border mb-3 px-3 py-2">
           <a href="../en/blog/2023/09/ghostfolio-2"
             ><span class="mr-1 text-uppercase" i18n>New</span>
diff --git a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts b/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts
index c89b6c490..34525436d 100644
--- a/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/activities/activities-page.component.ts
@@ -24,7 +24,6 @@ import { ImportActivitiesDialog } from './import-activities-dialog/import-activi
 import { ImportActivitiesDialogParams } from './import-activities-dialog/interfaces/interfaces';
 
 @Component({
-  host: { class: 'page' },
   selector: 'gf-activities-page',
   styleUrls: ['./activities-page.scss'],
   templateUrl: './activities-page.html'
diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
index ec7a07081..40bb38b8a 100644
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
@@ -27,7 +27,6 @@ import { Subject } from 'rxjs';
 import { distinctUntilChanged, switchMap, takeUntil } from 'rxjs/operators';
 
 @Component({
-  host: { class: 'page' },
   selector: 'gf-allocations-page',
   styleUrls: ['./allocations-page.scss'],
   templateUrl: './allocations-page.html'
diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
index 1fb25f44f..ddac55046 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
@@ -26,7 +26,6 @@ import { Subject } from 'rxjs';
 import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
 
 @Component({
-  host: { class: 'page' },
   selector: 'gf-analysis-page',
   styleUrls: ['./analysis-page.scss'],
   templateUrl: './analysis-page.html'
diff --git a/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts b/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts
index 551f2066e..58d0b3702 100644
--- a/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/fire/fire-page.component.ts
@@ -10,7 +10,6 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-  host: { class: 'page' },
   selector: 'gf-fire-page',
   styleUrls: ['./fire-page.scss'],
   templateUrl: './fire-page.html'
diff --git a/apps/client/src/app/pages/portfolio/holdings/holdings-page.component.ts b/apps/client/src/app/pages/portfolio/holdings/holdings-page.component.ts
index 6d27b70f7..d65f20165 100644
--- a/apps/client/src/app/pages/portfolio/holdings/holdings-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/holdings/holdings-page.component.ts
@@ -20,7 +20,6 @@ import { Subject } from 'rxjs';
 import { distinctUntilChanged, switchMap, takeUntil } from 'rxjs/operators';
 
 @Component({
-  host: { class: 'page' },
   selector: 'gf-holdings-page',
   styleUrls: ['./holdings-page.scss'],
   templateUrl: './holdings-page.html'
diff --git a/apps/client/src/app/pages/portfolio/portfolio-page.component.ts b/apps/client/src/app/pages/portfolio/portfolio-page.component.ts
index 8d4b3b628..e74e3558c 100644
--- a/apps/client/src/app/pages/portfolio/portfolio-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/portfolio-page.component.ts
@@ -18,7 +18,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-  host: { class: 'page with-tabs' },
+  host: { class: 'page has-tabs' },
   selector: 'gf-portfolio-page',
   styleUrls: ['./portfolio-page.scss'],
   templateUrl: './portfolio-page.html'
diff --git a/apps/client/src/app/pages/portfolio/portfolio-page.html b/apps/client/src/app/pages/portfolio/portfolio-page.html
index 014f68b9f..d3fbca534 100644
--- a/apps/client/src/app/pages/portfolio/portfolio-page.html
+++ b/apps/client/src/app/pages/portfolio/portfolio-page.html
@@ -2,7 +2,12 @@
   <router-outlet></router-outlet>
 </mat-tab-nav-panel>
 
-<nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
+<nav
+  mat-align-tabs="center"
+  mat-tab-nav-bar
+  [disablePagination]="true"
+  [tabPanel]="tabPanel"
+>
   <ng-container *ngFor="let tab of tabs">
     <a
       #rla="routerLinkActive"
diff --git a/apps/client/src/app/pages/zen/zen-page.component.ts b/apps/client/src/app/pages/zen/zen-page.component.ts
index ab164af4c..b0906ea6c 100644
--- a/apps/client/src/app/pages/zen/zen-page.component.ts
+++ b/apps/client/src/app/pages/zen/zen-page.component.ts
@@ -6,7 +6,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-  host: { class: 'page with-tabs' },
+  host: { class: 'page has-tabs' },
   selector: 'gf-zen-page',
   styleUrls: ['./zen-page.scss'],
   templateUrl: './zen-page.html'
diff --git a/apps/client/src/app/pages/zen/zen-page.html b/apps/client/src/app/pages/zen/zen-page.html
index 014f68b9f..d3fbca534 100644
--- a/apps/client/src/app/pages/zen/zen-page.html
+++ b/apps/client/src/app/pages/zen/zen-page.html
@@ -2,7 +2,12 @@
   <router-outlet></router-outlet>
 </mat-tab-nav-panel>
 
-<nav mat-align-tabs="center" mat-tab-nav-bar [tabPanel]="tabPanel">
+<nav
+  mat-align-tabs="center"
+  mat-tab-nav-bar
+  [disablePagination]="true"
+  [tabPanel]="tabPanel"
+>
   <ng-container *ngFor="let tab of tabs">
     <a
       #rla="routerLinkActive"
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 88a7f9dc5..27e81506a 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -275,12 +275,18 @@ body {
     }
 
     .page {
-      &.with-tabs {
+      &.has-tabs {
         .mat-mdc-tab-nav-bar {
           --mat-tab-header-inactive-label-text-color: rgba(
             var(--light-primary-text)
           );
         }
+
+        @media (min-width: 576px) {
+          .mat-mdc-tab-header {
+            background-color: rgba(var(--palette-foreground-base-dark), 0.02);
+          }
+        }
       }
     }
 
@@ -469,12 +475,14 @@ ngx-skeleton-loader {
   flex-direction: column;
   overflow-y: auto;
 
-  &:not(.with-tabs) {
-    padding-bottom: 5rem;
+  &:not(.has-tabs) {
+    @media (min-width: 576px) {
+      padding: 2rem 0;
+    }
   }
 
-  &.with-tabs {
-    height: calc(100vh - 5rem);
+  &.has-tabs {
+    height: calc(100vh - var(--mat-toolbar-standard-height));
     padding-bottom: env(safe-area-inset-bottom);
     padding-bottom: constant(safe-area-inset-bottom);
 
@@ -491,7 +499,10 @@ ngx-skeleton-loader {
       flex-direction: row-reverse;
 
       .mat-mdc-tab-header {
-        width: 12rem;
+        background-color: rgba(var(--palette-foreground-base), 0.02);
+        padding: 2rem 0;
+        width: 14rem;
+        --mat-tab-header-label-text-tracking: normal;
         --mdc-secondary-navigation-tab-container-height: 2rem;
 
         .mat-mdc-tab-links {
@@ -502,6 +513,10 @@ ngx-skeleton-loader {
           }
         }
       }
+
+      .mat-mdc-tab-nav-panel {
+        padding: 2rem 0;
+      }
     }
   }
 }
@@ -519,7 +534,7 @@ ngx-skeleton-loader {
 }
 
 .with-info-message {
-  height: calc(100vh - 5rem - 3.5rem + 0.5rem) !important;
+  height: calc(100vh - var(--mat-toolbar-standard-height) - 3.5rem) !important;
 }
 
 .with-placeholder-as-option {