Added SettingsTable.

components/layout/NavBar.module.css

@@ -49,6 +49,10 @@
   border-bottom: 2px solid transparent;
 }
 
+.links span {
+  white-space: nowrap;
+}
+
 .links a:hover {
   color: var(--font-color100);
   border-bottom: 2px solid var(--primary400);

components/layout/PageHeader.js

@@ -1,13 +1,9 @@
 import React from 'react';
-import classNames from 'classnames';
-import { useBreakpoint } from 'react-basics';
 import styles from './PageHeader.module.css';
 
 export default function PageHeader({ title, children }) {
-  const breakPoint = useBreakpoint();
-
   return (
-    <div className={classNames(styles.header, { [styles[breakPoint]]: true })}>
+    <div className={styles.header}>
       <div className={styles.title}>{title}</div>
       <div className={styles.actions}>{children}</div>
     </div>

components/layout/PageHeader.module.css

@@ -16,6 +16,10 @@
   color: var(--base900);
 }
 
+.header > div {
+  line-height: 60px;
+}
+
 .title {
   display: flex;
   align-items: center;
@@ -25,7 +29,22 @@
   line-height: 50px;
 }
 
-.xs .actions,
-.sm .actions {
-  flex-basis: 100%;
+.actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media only screen and (max-width: 992px) {
+  .header {
+    margin-bottom: 10px;
+  }
+
+  .title {
+    font-size: 18px;
+  }
+
+  .actions {
+    flex-basis: 100%;
+    order: -1;
+  }
 }

components/layout/SettingsLayout.js

@@ -20,16 +20,16 @@ export default function SettingsLayout({ children }) {
     { key: 'profile', label: formatMessage(labels.profile), url: '/settings/profile' },
   ].filter(n => n);
 
-  const getKey = () => items.find(({ url }) => pathname.startsWith(url))?.key;
+  const getKey = () => items.find(({ url }) => pathname === url)?.key;
 
   return (
-    <Row className={classNames({ [styles.hideMenu]: cloudMode })}>
+    <Row>
       {!cloudMode && (
-        <Column className={styles.menu} defaultSize={12} md={3} lg={2} xl={2}>
+        <Column className={styles.menu} defaultSize={12} md={4} lg={3} xl={2}>
           <SideNav items={items} shallow={true} selectedKey={getKey()} />
         </Column>
       )}
-      <Column className={styles.content} defaultSize={12} md={9} lg={10} xl={10}>
+      <Column className={styles.content} defaultSize={12} md={8} lg={9} xl={10}>
         {children}
       </Column>
     </Row>

components/layout/SettingsLayout.module.css

@@ -8,6 +8,8 @@
   min-height: 50vh;
 }
 
-.hideMenu .content {
-  margin: 0 auto;
+@media only screen and (max-width: 768px) {
+  .menu {
+    display: none;
+  }
 }

components/layout/SideNav.module.css

@@ -13,10 +13,3 @@
   padding: 0;
   border-radius: var(--border-radius);
 }
-
-@media only screen and (max-width: 768px) {
-  .menu {
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-}