Feature/decrease border radius and margin of dialogs on mobile (#5341)

* Decrease border radius and margin of dialogs on mobile

apps/client/src/styles/theme.scss

@@ -206,30 +206,62 @@ $_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
 .theme-dark,
 .theme-light {
   @media (max-width: 575.98px) {
+    @include mat.dialog-overrides(
+      (
+        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.dialog-overrides(
+    (
+      container-max-width: 80vw,
+      container-small-max-width: 96vw
+    )
+  );
 
   @include mat.fab-overrides(
     (
       container-color: var(--gf-theme-primary-500)
     )
   );
+
   @include mat.tabs-overrides(
     (
       active-focus-label-text-color: var(--gf-theme-primary-500),
       active-hover-label-text-color: var(--gf-theme-primary-500),
-      active-indicator-height: 0,
       active-label-text-color: var(--gf-theme-primary-500),
       active-ripple-color: var(--gf-theme-primary-500),
-      container-height: 2rem,
+      inactive-ripple-color: var(--gf-theme-primary-500)
-      inactive-ripple-color: var(--gf-theme-primary-500),
+    )
+  );
+
+  .page.has-tabs {
+    @include mat.tabs-overrides(
+      (
+        active-indicator-height: 0,
         label-text-tracking: normal
       )
     );
+  }
 }
 
 :root {