[UI]Everest 1004 max width for content container

ui/apps/everest/src/pages/database-form/database-form-side-drawer/DatabaseFormSideDrawer.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Divider, Drawer, Toolbar, useTheme } from '@mui/material';
+import { Divider, Drawer, useTheme } from '@mui/material';
 import { useActiveBreakpoint } from 'hooks/utils/useActiveBreakpoint';
 import { DatabasePreview } from '../database-preview/database-preview';
 import { DatabaseFormSideDrawerProps } from './DatabaseFormSideDrawer.types';
@@ -21,7 +21,6 @@ const DatabaseFormSideDrawer = ({
         longestAchievedStep={longestAchievedStep}
         onSectionEdit={handleSectionEdit}
         sx={{
-          mt: 2,
           ...(!isDesktop && {
             padding: 0,
           }),
@@ -37,19 +36,15 @@ const DatabaseFormSideDrawer = ({
         variant="permanent"
         anchor="right"
         sx={{
-          // MuiDrawer-paper will take 25% of the whole screen because it has a "fixed" positioning
-          // Hence, we must use vw here to have the same calculation
-          // We subtract the padding
-          width: (theme) => `calc(25vw - ${theme.spacing(4)})`,
+          width: '25%',
           flexShrink: 0,
           ml: 3,
           [`& .MuiDrawer-paper`]: {
-            width: '25%',
+            position: 'relative',
             boxSizing: 'border-box',
           },
         }}
       >
-        <Toolbar />
         {PreviewContent}
       </Drawer>
     );

ui/apps/everest/src/pages/database-form/database-form.tsx

@@ -16,7 +16,7 @@
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Stack, Step, StepLabel } from '@mui/material';
+import { Box, Stack, Step, StepLabel } from '@mui/material';
 import { Stepper } from '@percona/ui-lib';
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 import { useCreateDbCluster } from 'hooks/api/db-cluster/useCreateDbCluster';
@@ -156,7 +156,7 @@ export const DatabasePage = () => {
   return formSubmitted ? (
     <ConfirmationScreen />
   ) : (
-    <>
+    <Box sx={{ maxWidth: '1280px', mx: 'auto' }}>
       <Stepper noConnector activeStep={activeStep} sx={{ marginBottom: 4 }}>
         {steps.map((_, idx) => (
           <Step key={`step-${idx + 1}`}>
@@ -189,6 +189,6 @@ export const DatabasePage = () => {
         open={cancelModalOpen}
         onClose={() => setCancelModalOpen(false)}
       />
-    </>
+    </Box>
   );
 };

ui/apps/everest/src/pages/databases/DbClusterView.tsx

@@ -172,7 +172,16 @@ export const DbClusterView = () => {
     []
   );
   return (
-    <Stack direction="column" alignItems="center">
+    <Stack
+      direction="column"
+      alignItems="center"
+      sx={{
+        width: 'fit-content',
+        minWidth: 'min(100%, 1280px)',
+        maxWidth: '100%',
+        mx: 'auto',
+      }}
+    >
       <Box sx={{ width: '100%' }}>
         <Table
           tableName="dbClusterView"

ui/apps/everest/src/pages/db-cluster-details/db-cluster-details.tsx

@@ -43,7 +43,7 @@ export const DbClusterDetails = () => {
 
   // All clear, show the cluster data
   return (
-    <Box sx={{ width: '100%' }}>
+    <Box sx={{ maxWidth: '1280px', mx: 'auto' }}>
       <Box
         sx={{
           display: 'flex',

ui/apps/everest/src/pages/settings/namespaces/namespace-details/namespace-details.tsx

@@ -21,6 +21,7 @@ import {
   getOperatorVersions,
 } from 'api/dbEngineApi';
 import EngineLowerContent from './engine-lower-content';
+import { Box } from '@mui/material';
 
 const NamespaceDetails = () => {
   const queryClient = useQueryClient();
@@ -135,7 +136,7 @@ const NamespaceDetails = () => {
   }
 
   return (
-    <>
+    <Box sx={{ maxWidth: '1280px', mx: 'auto' }}>
       <BackNavigationText
         text={namespaceName}
         onBackClick={() => navigate('/settings/namespaces')}
@@ -192,7 +193,7 @@ const NamespaceDetails = () => {
         onClose={() => setModalOpen(false)}
         onConfirm={() => performUpgrade(selectedEngine!.name)}
       />
-    </>
+    </Box>
   );
 };
 

ui/apps/everest/src/pages/settings/settings.tsx

@@ -13,7 +13,7 @@ export const Settings = () => {
   }
 
   return (
-    <Box sx={{ width: '100%' }}>
+    <Box sx={{ maxWidth: '1280px', mx: 'auto' }}>
       <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
         <Tabs
           value={currentTab}