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`
+type ContentProps = { $maxWidth?: string };
-  max-width: 46em;
+
+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 ? (
+    {centered !== false ? (
-      <CenteredContent withStickyHeader>{children}</CenteredContent>
+      <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;

app/menus/UserMenu.tsx

@@ -195,7 +195,7 @@ function UserMenu({ user }: Props) {
             },
             {
               type: "button",
-              title: t("Activate account"),
+              title: t("Activate user"),
               onClick: handleActivate,
               visible: !user.isInvited && user.isSuspended,
             },

app/scenes/Settings/Members.tsx

@@ -164,6 +164,7 @@ function Members() {
           )}
         </>
       }
+      wide
     >
       <Heading>{t("Members")}</Heading>
       <Text type="secondary">

app/scenes/Settings/components/PeopleTable.tsx

@@ -58,8 +58,13 @@ function PeopleTable({ canManage, ...rest }: Props) {
           Cell: observer(({ row }: { row: { original: User } }) => (
             <Badges>
               {!row.original.lastActiveAt && <Badge>{t("Invited")}</Badge>}
-              {row.original.isAdmin && <Badge primary>{t("Admin")}</Badge>}
+              {row.original.isAdmin ? (
-              {row.original.isViewer && <Badge>{t("Viewer")}</Badge>}
+                <Badge primary>{t("Admin")}</Badge>
+              ) : row.original.isViewer ? (
+                <Badge>{t("Viewer")}</Badge>
+              ) : (
+                <Badge>{t("Editor")}</Badge>
+              )}
               {row.original.isSuspended && <Badge>{t("Suspended")}</Badge>}
             </Badges>
           )),

shared/i18n/locales/en_US/translation.json

@@ -414,7 +414,7 @@
   "User options": "User options",
   "Resend invite": "Resend invite",
   "Revoke invite": "Revoke invite",
-  "Activate account": "Activate account",
+  "Activate user": "Activate user",
   "template": "template",
   "document": "document",
   "published": "published",