diff --git a/.changeset/old-beers-mix.md b/.changeset/old-beers-mix.md new file mode 100644 index 000000000..c1c929718 --- /dev/null +++ b/.changeset/old-beers-mix.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": patch +--- + +Make views with list full width diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 0ad333715..25fb56487 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -12,7 +12,6 @@ import { useDevModeContext } from "../DevModePanel/hooks"; import { useDevModeKeyTrigger } from "../DevModePanel/useDevModeKeyTrigger"; import Navigator from "../Navigator"; import { Sidebar } from "../Sidebar"; -import { contentMaxWidth } from "./consts"; import { useStyles } from "./styles"; import { extractQueryParams } from "./util"; @@ -64,7 +63,11 @@ const AppLayout: React.FC = ({ children }) => { visible={isNavigatorVisible} setVisibility={setNavigatorVisibility} /> - + {appState.loading && ( )} @@ -96,8 +99,6 @@ const AppLayout: React.FC = ({ children }) => { borderTopWidth={1} borderTopStyle="solid" borderColor="neutralPlain" - __maxWidth={contentMaxWidth} - margin="auto" zIndex="2" /> diff --git a/src/components/AppLayout/consts.ts b/src/components/AppLayout/consts.ts index 4ef4c0055..bcc8ade04 100644 --- a/src/components/AppLayout/consts.ts +++ b/src/components/AppLayout/consts.ts @@ -1,5 +1,4 @@ export const topBarHeight = "77px"; export const appLoaderHeight = 2; -export const contentMaxWidth = "1920px"; export const savebarHeight = "64px"; export const borderHeight = "1px"; diff --git a/src/components/Datagrid/Datagrid.tsx b/src/components/Datagrid/Datagrid.tsx index b25d80273..e25d0b1b2 100644 --- a/src/components/Datagrid/Datagrid.tsx +++ b/src/components/Datagrid/Datagrid.tsx @@ -33,7 +33,6 @@ import React, { } from "react"; import { FormattedMessage } from "react-intl"; -import { contentMaxWidth } from "../AppLayout/consts"; import { CardMenuItem } from "../CardMenu"; import { ColumnPickerProps } from "../ColumnPicker"; import { FullScreenContainer } from "./components/FullScreenContainer"; @@ -501,8 +500,6 @@ export const Datagrid: React.FC = ({ borderTopWidth={1} borderTopStyle="solid" borderColor="neutralPlain" - __maxWidth={contentMaxWidth} - margin="auto" /> = ({ // https://github.com/saleor/macaw-ui/issues/498 className="mobile-full-height" display="grid" - margin="auto" gridTemplateColumns={gridTemplateColumnsValue} __gridTemplateRows="auto 1fr" - __maxWidth={contentMaxWidth} __height={heightValue} > {children} diff --git a/src/components/Layouts/List/Root.tsx b/src/components/Layouts/List/Root.tsx index b7176e73c..f9a05db5c 100644 --- a/src/components/Layouts/List/Root.tsx +++ b/src/components/Layouts/List/Root.tsx @@ -1,4 +1,3 @@ -import { contentMaxWidth } from "@dashboard/components/AppLayout/consts"; import { Box } from "@saleor/macaw-ui/next"; import React from "react"; @@ -9,13 +8,7 @@ interface ListPageLayoutProps { } export const ListPageLayout: React.FC = ({ children }) => ( - + {children} ); diff --git a/src/components/Savebar.tsx b/src/components/Savebar.tsx index 8b934b2d9..75b7cf9b6 100644 --- a/src/components/Savebar.tsx +++ b/src/components/Savebar.tsx @@ -8,7 +8,7 @@ import { import React from "react"; import { useIntl } from "react-intl"; -import { contentMaxWidth, savebarHeight } from "./AppLayout/consts"; +import { savebarHeight } from "./AppLayout/consts"; export interface SavebarProps extends Omit { labels?: Partial; @@ -21,7 +21,7 @@ const useStyles = makeStyles( "& .MuiContainer-root": { paddingRight: 0, paddingLeft: 0, - maxWidth: contentMaxWidth, + maxWidth: "100%", margin: "0 auto", }, "& .MuiPaper-root": { diff --git a/src/index.css b/src/index.css index 40abad87c..c82d1f051 100644 --- a/src/index.css +++ b/src/index.css @@ -62,3 +62,10 @@ body { height: auto !important; } } + +@media screen and (min-width: 2048px) { + .big-desktop-max-width { + max-width: 1920px !important; + margin: 0 auto; + } +}