Responsive CSS updates.

components/layout/ButtonLayout.js

@@ -2,6 +2,16 @@ import React from 'react';
 import classNames from 'classnames';
 import styles from './ButtonLayout.module.css';
 
-export default function ButtonLayout({ className, children }) {
-  return <div className={classNames(styles.buttons, className)}>{children}</div>;
+export default function ButtonLayout({ className, children, align = 'center' }) {
+  return (
+    <div
+      className={classNames(styles.buttons, className, {
+        [styles.left]: align === 'left',
+        [styles.center]: align === 'center',
+        [styles.right]: align === 'right',
+      })}
+    >
+      {children}
+    </div>
+  );
 }

components/layout/ButtonLayout.module.css

@@ -6,3 +6,15 @@
 .buttons button + * {
   margin-left: 10px;
 }
+
+.center {
+  justify-content: center;
+}
+
+.left {
+  justify-content: flex-start;
+}
+
+.right {
+  justify-content: flex-end;
+}

components/layout/Page.module.css

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

components/layout/PageHeader.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import classNames from 'classnames';
 import styles from './PageHeader.module.css';
 
-export default function PageHeader({ children }) {
-  return <div className={styles.header}>{children}</div>;
+export default function PageHeader({ children, className }) {
+  return <div className={classNames(styles.header, className)}>{children}</div>;
 }