Responsive tables.

components/common/Table.js

@@ -9,7 +9,7 @@ export default function Table({ columns, rows, empty }) {
 
   return (
     <div className={styles.table}>
-      <div className={styles.header}>
+      <div className={classNames(styles.header, 'row')}>
         {columns.map(({ key, label, className, style, header }) => (
           <div
             key={key}
@@ -22,7 +22,7 @@ export default function Table({ columns, rows, empty }) {
       </div>
       <div className={styles.body}>
         {rows.map((row, rowIndex) => (
-          <div className={styles.row} key={rowIndex}>
+          <div className={classNames(styles.row, 'row')} key={rowIndex}>
             {columns.map(({ key, render, className, style, cell }) => (
               <div
                 key={`${rowIndex}${key}`}

components/common/Table.module.css

@@ -1,26 +1,22 @@
 .table {
   display: flex;
   flex-direction: column;
-  flex: 1;
 }
 
 .header {
-  display: flex;
+  border-bottom: 1px solid var(--gray300);
 }
 
 .head {
   font-size: var(--font-size-small);
   font-weight: 600;
   line-height: 40px;
-  flex: 1;
-  border-bottom: 1px solid var(--gray300);
 }
 
 .body {
   position: relative;
   display: flex;
   flex-direction: column;
-  flex: 1;
 }
 
 .body:empty:before {
@@ -33,7 +29,6 @@
 }
 
 .row {
-  display: flex;
   border-bottom: 1px solid var(--gray300);
   padding: 10px 0;
 }
@@ -41,5 +36,4 @@
 .cell {
   display: flex;
   align-items: flex-start;
-  flex: 1;
 }

components/forms/LoginForm.module.css

@@ -5,7 +5,6 @@
 }
 
 .login form {
-  width: 300px;
   margin: 0 auto;
 }
 

components/layout/MenuLayout.module.css

@@ -2,6 +2,7 @@
   display: flex;
   flex: 1;
   position: relative;
+  height: 100%;
 }
 
 .container .menu {
@@ -35,6 +36,10 @@
 }
 
 @media only screen and (max-width: 992px) {
+  .container {
+    height: auto;
+  }
+
   .container .content {
     border-top: 1px solid var(--gray300);
     border-left: 0;

components/layout/Page.js

@@ -2,5 +2,5 @@ import React from 'react';
 import styles from './Page.module.css';
 
 export default function Page({ children }) {
-  return <div className={styles.container}>{children}</div>;
+  return <div className={styles.page}>{children}</div>;
 }

components/layout/Page.module.css

@@ -1,7 +1,4 @@
-.container {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
+.page {
   padding: 0 30px;
   background: var(--gray50);
   height: 100%;

components/settings/AccountSettings.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { useSelector } from 'react-redux';
+import classNames from 'classnames';
 import PageHeader from 'components/layout/PageHeader';
 import Button from 'components/common/Button';
 import Icon from 'components/common/Icon';
@@ -12,7 +12,7 @@ import Trash from 'assets/trash.svg';
 import Check from 'assets/check.svg';
 import { get } from 'lib/web';
 import styles from './AccountSettings.module.css';
-import DeleteForm from './forms/DeleteForm';
+import DeleteForm from '../forms/DeleteForm';
 
 export default function AccountSettings() {
   const [data, setData] = useState();
@@ -36,14 +36,15 @@ export default function AccountSettings() {
     ) : null;
 
   const columns = [
-    { key: 'username', label: 'Username' },
+    { key: 'username', label: 'Username', className: 'col-6 col-md-4' },
     {
       key: 'is_admin',
       label: 'Administrator',
+      className: 'col-6 col-md-4',
       render: Checkmark,
     },
     {
-      className: styles.buttons,
+      className: classNames(styles.buttons, 'col-12 col-md-4'),
       render: Buttons,
     },
   ];

components/settings/ProfileSettings.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import PageHeader from 'components/layout/PageHeader';
 import Button from 'components/common/Button';
-import ChangePasswordForm from './forms/ChangePasswordForm';
+import ChangePasswordForm from '../forms/ChangePasswordForm';
 import Modal from 'components/common/Modal';
 import Dots from 'assets/ellipsis-h.svg';
 

components/settings/WebsiteSettings.js

@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react';
+import classNames from 'classnames';
 import Table from 'components/common/Table';
 import Button from 'components/common/Button';
 import PageHeader from 'components/layout/PageHeader';
 import Modal from 'components/common/Modal';
-import WebsiteEditForm from './forms/WebsiteEditForm';
-import DeleteForm from './forms/DeleteForm';
-import TrackingCodeForm from './forms/TrackingCodeForm';
-import ShareUrlForm from './forms/ShareUrlForm';
+import WebsiteEditForm from '../forms/WebsiteEditForm';
+import DeleteForm from '../forms/DeleteForm';
+import TrackingCodeForm from '../forms/TrackingCodeForm';
+import ShareUrlForm from '../forms/ShareUrlForm';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import Pen from 'assets/pen.svg';
 import Trash from 'assets/trash.svg';
@@ -53,11 +54,11 @@ export default function WebsiteSettings() {
   );
 
   const columns = [
-    { key: 'name', label: 'Name', className: styles.col },
-    { key: 'domain', label: 'Domain', className: styles.col },
+    { key: 'name', label: 'Name', className: 'col-6 col-md-4' },
+    { key: 'domain', label: 'Domain', className: 'col-6 col-md-4' },
     {
       key: 'action',
-      className: styles.buttons,
+      className: classNames(styles.buttons, 'col-12 col-md-4 pt-1'),
       render: Buttons,
     },
   ];

components/settings/WebsiteSettings.module.css

@@ -3,7 +3,5 @@
 }
 
 .buttons {
-  flex: 3;
-  display: flex;
   justify-content: flex-end;
 }

pages/account.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Layout from 'components/layout/Layout';
-import AccountSettings from 'components/AccountSettings';
+import AccountSettings from 'components/settings/AccountSettings';
 import useRequireLogin from 'hooks/useRequireLogin';
 
 export default function AccountPage() {

pages/settings.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Layout from 'components/layout/Layout';
-import Settings from 'components/Settings';
+import Settings from 'components/settings/Settings';
 import useRequireLogin from 'hooks/useRequireLogin';
 
 export default function SettingsPage() {