From 1c0e396cd124d17d251dacea33d4b08efdc4a6dd Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 19 Dec 2023 10:55:19 -0500
Subject: [PATCH] fix: Positioning on wide settings header

---
 app/components/CenteredContent.tsx             | 17 ++++++++++++-----
 app/components/Scene.tsx                       | 11 ++++++-----
 app/menus/UserMenu.tsx                         |  2 +-
 app/scenes/Settings/Members.tsx                |  1 +
 app/scenes/Settings/components/PeopleTable.tsx |  9 +++++++--
 shared/i18n/locales/en_US/translation.json     |  2 +-
 6 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/app/components/CenteredContent.tsx b/app/components/CenteredContent.tsx
index f3405751a..888146b71 100644
--- a/app/components/CenteredContent.tsx
+++ b/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>
 );
 
diff --git a/app/components/Scene.tsx b/app/components/Scene.tsx
index 3c28c38b8..d01ce177a 100644
--- a/app/components/Scene.tsx
+++ b/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;
diff --git a/app/menus/UserMenu.tsx b/app/menus/UserMenu.tsx
index 11378019d..09a0a9b65 100644
--- a/app/menus/UserMenu.tsx
+++ b/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,
             },
diff --git a/app/scenes/Settings/Members.tsx b/app/scenes/Settings/Members.tsx
index 414839152..8c727a280 100644
--- a/app/scenes/Settings/Members.tsx
+++ b/app/scenes/Settings/Members.tsx
@@ -164,6 +164,7 @@ function Members() {
           )}
         </>
       }
+      wide
     >
       <Heading>{t("Members")}</Heading>
       <Text type="secondary">
diff --git a/app/scenes/Settings/components/PeopleTable.tsx b/app/scenes/Settings/components/PeopleTable.tsx
index 1910725ef..dcbc72a0d 100644
--- a/app/scenes/Settings/components/PeopleTable.tsx
+++ b/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.isViewer && <Badge>{t("Viewer")}</Badge>}
+              {row.original.isAdmin ? (
+                <Badge primary>{t("Admin")}</Badge>
+              ) : row.original.isViewer ? (
+                <Badge>{t("Viewer")}</Badge>
+              ) : (
+                <Badge>{t("Editor")}</Badge>
+              )}
               {row.original.isSuspended && <Badge>{t("Suspended")}</Badge>}
             </Badges>
           )),
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index 5b8aebb14..6ddaee755 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/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",