fix: Positioning on wide settings header

app/components/CenteredContent.tsx

@@ -4,6 +4,7 @@ import breakpoint from "styled-components-breakpoint";
 
 type Props = {
   children?: React.ReactNode;
+  maxWidth?: string;
   withStickyHeader?: boolean;
 };
 
@@ -18,18 +19,24 @@ const Container = styled.div<Props>`
   `};
 `;
 
-const Content = styled.div`
-  max-width: 46em;
+type ContentProps = { $maxWidth?: string };
+
+const Content = styled.div<ContentProps>`
+  max-width: ${(props) => props.$maxWidth ?? "46em"};
   margin: 0 auto;
 
   ${breakpoint("desktopLarge")`
-    max-width: 52em;
+    max-width: ${(props: ContentProps) => props.$maxWidth ?? "52em"};
   `};
 `;
 
-const CenteredContent: React.FC<Props> = ({ children, ...rest }: Props) => (
+const CenteredContent: React.FC<Props> = ({
+  children,
+  maxWidth,
+  ...rest
+}: Props) => (
   <Container {...rest}>
-    <Content>{children}</Content>
+    <Content $maxWidth={maxWidth}>{children}</Content>
   </Container>
 );
 

app/components/Scene.tsx

@@ -33,7 +33,7 @@ const Scene: React.FC<Props> = ({
   centered,
   wide,
 }: Props) => (
-  <FillWidth $wide={wide}>
+  <FillWidth>
     <PageTitle title={textTitle || title} />
     <Header
       hasSidebar
@@ -49,17 +49,18 @@ const Scene: React.FC<Props> = ({
       actions={actions}
       left={left}
     />
-    {centered !== false && wide !== true ? (
-      <CenteredContent withStickyHeader>{children}</CenteredContent>
+    {centered !== false ? (
+      <CenteredContent maxWidth={wide ? "100vw" : undefined} withStickyHeader>
+        {children}
+      </CenteredContent>
     ) : (
       children
     )}
   </FillWidth>
 );
 
-const FillWidth = styled.div<{ $wide?: boolean }>`
+const FillWidth = styled.div`
   width: 100%;
-  ${(props) => props.$wide && `padding: 0px 32px 16px;`}
 `;
 
 export default Scene;