Merge pull request #733 from mirumee/fix/table-layout

Fix staff members table

src/staff/components/StaffList/StaffList.tsx

@@ -51,6 +51,9 @@ const useStyles = makeStyles(
       pointerEvents: "none",
       width: "100%"
     },
+    colEmail: {
+      width: 400
+    },
     statusText: {
       color: "#9E9D9D"
     },
@@ -89,6 +92,10 @@ const StaffList: React.FC<StaffListProps> = props => {
 
   return (
     <ResponsiveTable>
+      <colgroup>
+        <col />
+        <col className={classes.colEmail} />
+      </colgroup>
       <TableHead>
         <TableRow>
           <TableCellHeader
@@ -186,7 +193,7 @@ const StaffList: React.FC<StaffListProps> = props => {
           ),
           () => (
             <TableRow>
-              <TableCell colSpan={3}>
+              <TableCell colSpan={numberOfColumns}>
                 <FormattedMessage defaultMessage="No staff members found" />
               </TableCell>
             </TableRow>

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -182391,6 +182391,12 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
         <table
           class="MuiTable-root-id"
         >
+          <colgroup>
+            <col />
+            <col
+              class="StaffList-colEmail-id"
+            />
+          </colgroup>
           <thead
             class="MuiTableHead-root-id"
           >
@@ -183070,6 +183076,12 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
         <table
           class="MuiTable-root-id"
         >
+          <colgroup>
+            <col />
+            <col
+              class="StaffList-colEmail-id"
+            />
+          </colgroup>
           <thead
             class="MuiTableHead-root-id"
           >