Change layout on list and details views to full width (#4013)

.changeset/old-beers-mix.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Make views with list full width

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<AppLayoutProps> = ({ children }) => {
         visible={isNavigatorVisible}
         setVisibility={setNavigatorVisibility}
       />
-      <Box display="grid" __gridTemplateColumns="auto 1fr">
+      <Box
+        display="grid"
+        __gridTemplateColumns="auto 1fr"
+        className="big-desktop-max-width"
+      >
         {appState.loading && (
           <LinearProgress className={classes.appLoader} color="primary" />
         )}
@@ -96,8 +99,6 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
             borderTopWidth={1}
             borderTopStyle="solid"
             borderColor="neutralPlain"
-            __maxWidth={contentMaxWidth}
-            margin="auto"
             zIndex="2"
           />
         </Box>

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";

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<DatagridProps> = ({
                   borderTopWidth={1}
                   borderTopStyle="solid"
                   borderColor="neutralPlain"
-                  __maxWidth={contentMaxWidth}
-                  margin="auto"
                 />
                 <DataEditor
                   {...datagridProps}

src/components/Layouts/Detail/Root.tsx

@@ -1,6 +1,5 @@
 import {
   borderHeight,
-  contentMaxWidth,
   savebarHeight,
 } from "@dashboard/components/AppLayout/consts";
 import { Box, Sprinkles } from "@saleor/macaw-ui/next";
@@ -45,10 +44,8 @@ export const RootLayout: React.FC<DetailPageLayoutProps> = ({
       // 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}

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<ListPageLayoutProps> = ({ children }) => (
-  <Box
+  <Box display="grid" gridTemplateColumns={1} height="100%">
-    display="grid"
-    margin="auto"
-    gridTemplateColumns={1}
-    height="100%"
-    __maxWidth={contentMaxWidth}
-  >
     {children}
   </Box>
 );

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<MacawSavebarProps, "labels"> {
   labels?: Partial<SavebarLabels>;
@@ -21,7 +21,7 @@ const useStyles = makeStyles(
       "& .MuiContainer-root": {
         paddingRight: 0,
         paddingLeft: 0,
-        maxWidth: contentMaxWidth,
+        maxWidth: "100%",
         margin: "0 auto",
       },
       "& .MuiPaper-root": {

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;
+  }
+}