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