Add centered layout variant to Settings page header and content

src/client/components/SettingsPage.tsx

@@ -46,13 +46,13 @@ export function SettingsPage({ render }: { render: () => void }) {
 
   return (
     <Main>
-      <MainHeader>
+      <MainHeader centered>
         <MainTitle>Settings</MainTitle>
         <HeaderActions>
           <Button onClick={goBack}>Back</Button>
         </HeaderActions>
       </MainHeader>
-      <MainContent>
+      <MainContent centered>
         <Section>
           <SectionTitle>Install CLI</SectionTitle>
           <DashboardInstallCmd>

src/client/styles/layout.ts

@@ -148,6 +148,13 @@ export const MainHeader = define('MainHeader', {
   justifyContent: 'space-between',
   padding: '0 24px',
   borderBottom: `1px solid ${theme('colors-border')}`,
+  variants: {
+    centered: {
+      maxWidth: 560,
+      margin: '0 auto',
+      width: '100%',
+    },
+  },
 })
 
 export const MainTitle = define('MainTitle', {
@@ -196,6 +203,13 @@ export const MainContent = define('MainContent', {
   flexDirection: 'column',
   padding: '10px 24px',
   overflow: 'hidden',
+  variants: {
+    centered: {
+      maxWidth: 560,
+      margin: '0 auto',
+      width: '100%',
+    },
+  },
 })
 
 export const DashboardContainer = define('DashboardContainer', {