From 1c76475d9565a9f590eead7b8eed8ea3ee598e4e Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Sat, 9 Aug 2025 19:44:51 +0700
Subject: [PATCH] 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 | 44 ++++++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss
index 1d69f196a..22d495704 100644
--- a/apps/client/src/styles/theme.scss
+++ b/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.tabs-overrides(
+    @include mat.dialog-overrides(
       (
-        container-height: 3rem
+        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),
-      label-text-tracking: normal
+      inactive-ripple-color: var(--gf-theme-primary-500)
     )
   );
+
+  .page.has-tabs {
+    @include mat.tabs-overrides(
+      (
+        active-indicator-height: 0,
+        label-text-tracking: normal
+      )
+    );
+  }
 }
 
 :root {