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;
 }