From 0e5147bb1d14586692ad8f8803dc0fe9c0ad61bb Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Thu, 28 Apr 2022 14:34:29 -0700
Subject: [PATCH] Constraint PageLayout to max 1220px on large resolutions
 (#1919)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 .../ListBuckets/Objects/ListObjects/ListObjects.tsx   |  2 +-
 .../src/screens/Console/Common/Layout/PageLayout.tsx  | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
index cf36d4df2..0174aa0e0 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
@@ -1212,7 +1212,7 @@ const ListObjects = ({
           onClosePreview={closePreviewWindow}
         />
       )}
-      <PageLayout>
+      <PageLayout variant={"full"}>
         <Grid item xs={12} className={classes.screenTitleContainer}>
           <ScreenTitle
             className={classes.screenTitle}
diff --git a/portal-ui/src/screens/Console/Common/Layout/PageLayout.tsx b/portal-ui/src/screens/Console/Common/Layout/PageLayout.tsx
index 8d8d9f7bb..c19040595 100644
--- a/portal-ui/src/screens/Console/Common/Layout/PageLayout.tsx
+++ b/portal-ui/src/screens/Console/Common/Layout/PageLayout.tsx
@@ -13,14 +13,21 @@ const styles = (theme: Theme) =>
 type PageLayoutProps = {
   className?: string;
   classes?: any;
+  variant?: "constrained" | "full";
   children: any;
 };
 
-const PageLayout = ({ classes, className = "", children }: PageLayoutProps) => {
+const PageLayout = ({
+  classes,
+  className = "",
+  children,
+  variant = "constrained",
+}: PageLayoutProps) => {
+  let style = variant === "constrained" ? { maxWidth: 1220 } : {};
   return (
     <div className={classes.contentSpacer}>
       <Grid container>
-        <Grid item xs={12} className={className}>
+        <Grid item xs={12} className={className} style={style}>
           {children}
         </Grid>
       </Grid>