adapt padding of Dialog elements for mobile screens

vivid-planet · Jan 15, 2025 · 2d90daf · 2d90daf
1 parent 9f69e7b
commit 2d90daf
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiDialogActions.ts b/packages/admin/admin-theme/src/componentsTheme/MuiDialogActions.ts
@@ -1,14 +1,18 @@
 import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
 import { GetMuiComponentTheme } from "./getComponentsTheme";
 
-export const getMuiDialogActions: GetMuiComponentTheme<"MuiDialogActions"> = (component, { palette }) => ({
+export const getMuiDialogActions: GetMuiComponentTheme<"MuiDialogActions"> = (component, { palette, breakpoints }) => ({
     ...component,
     styleOverrides: mergeOverrideStyles<"MuiDialogActions">(component?.styleOverrides, {
         root: {
             borderTop: `1px solid ${palette.grey[100]}`,
-            padding: 20,
+            padding: 10,
             justifyContent: "space-between",
 
+            [breakpoints.up("sm")]: {
+                padding: 20,
+            },
+
             "&>:first-of-type:last-child": {
                 marginLeft: "auto",
             },

diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiDialogContent.ts b/packages/admin/admin-theme/src/componentsTheme/MuiDialogContent.ts
@@ -3,15 +3,23 @@ import { dialogTitleClasses } from "@mui/material";
 import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
 import { GetMuiComponentTheme } from "./getComponentsTheme";
 
-export const getMuiDialogContent: GetMuiComponentTheme<"MuiDialogContent"> = (component, { palette }) => ({
+export const getMuiDialogContent: GetMuiComponentTheme<"MuiDialogContent"> = (component, { palette, breakpoints }) => ({
     ...component,
     styleOverrides: mergeOverrideStyles<"MuiDialogContent">(component?.styleOverrides, {
         root: {
             backgroundColor: palette.grey[50],
-            padding: 40,
+            padding: 10,
 
             [`.${dialogTitleClasses.root} + &`]: {
-                paddingTop: 40,
+                paddingTop: 10,
+            },
+
+            [breakpoints.up("sm")]: {
+                padding: 40,
+
+                [`.${dialogTitleClasses.root} + &`]: {
+                    paddingTop: 40,
+                },
             },
         },
     }),

diff --git a/packages/admin/admin-theme/src/componentsTheme/MuiDialogTitle.ts b/packages/admin/admin-theme/src/componentsTheme/MuiDialogTitle.ts
@@ -1,7 +1,7 @@
 import { mergeOverrideStyles } from "../utils/mergeOverrideStyles";
 import { GetMuiComponentTheme } from "./getComponentsTheme";
 
-export const getMuiDialogTitle: GetMuiComponentTheme<"MuiDialogTitle"> = (component, { palette, typography }) => ({
+export const getMuiDialogTitle: GetMuiComponentTheme<"MuiDialogTitle"> = (component, { palette, typography, breakpoints }) => ({
     ...component,
     defaultProps: {
         variant: "subtitle1",
@@ -10,7 +10,14 @@ export const getMuiDialogTitle: GetMuiComponentTheme<"MuiDialogTitle"> = (compon
         root: {
             backgroundColor: palette.grey["A200"],
             color: "#ffffff",
-            padding: 20,
+            padding: 10,
+            fontSize: "14px",
+
+            [breakpoints.up("sm")]: {
+                minWidth: 0,
+                fontSize: "16px",
+                padding: 20,
+            },
         },
     }),
 });