Extract page tabs

apps/client/src/styles.scss

@@ -265,16 +265,6 @@ body {
       }
     }
 
-    .page {
-      &.has-tabs {
-        @media (min-width: 576px) {
-          .mat-mdc-tab-header {
-            background-color: rgba(var(--palette-foreground-base-dark), 0.02);
-          }
-        }
-      }
-    }
-
     .svgMap-tooltip {
       background: var(--dark-background);
 

apps/client/src/styles/theme.scss

@@ -293,24 +293,6 @@ $gf-typography: (
         container-shape: 4px
       )
     );
-
-    .page.has-tabs {
-      @include mat.tabs-overrides(
-        (
-          container-height: 3rem
-        )
-      );
-    }
-  }
-
-  @media (min-width: 576px) {
-    .page.has-tabs {
-      @include mat.tabs-overrides(
-        (
-          container-height: 2rem
-        )
-      );
-    }
   }
 
   @include mat.badge-overrides(
@@ -436,15 +418,6 @@ $gf-typography: (
       )
     );
   }
-
-  .page.has-tabs {
-    @include mat.tabs-overrides(
-      (
-        active-indicator-height: 0,
-        label-text-tracking: normal
-      )
-    );
-  }
 }
 
 :root {

libs/ui/src/lib/page-tabs/page-tabs.component.scss

@@ -8,7 +8,9 @@
 
   @include mat.tabs-overrides(
     (
-      divider-height: 0
+      active-indicator-height: 0,
+      divider-height: 0,
+      label-text-tracking: normal
     )
   );
 
@@ -24,9 +26,23 @@
     }
   }
 
+  @media (max-width: 575.98px) {
+    @include mat.tabs-overrides(
+      (
+        container-height: 3rem
+      )
+    );
+  }
+
   @media (min-width: 576px) {
     flex-direction: row-reverse;
 
+    @include mat.tabs-overrides(
+      (
+        container-height: 2rem
+      )
+    );
+
     ::ng-deep {
       .mat-mdc-tab-header {
         background-color: rgba(var(--palette-foreground-base), 0.02);
@@ -44,3 +60,11 @@
     }
   }
 }
+
+:host-context(.theme-dark) {
+  @media (min-width: 576px) {
+    .mat-mdc-tab-header {
+      background-color: rgba(var(--palette-foreground-base-dark), 0.02);
+    }
+  }
+}