style(table): stick header and scroll content

packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js

@@ -48,9 +48,9 @@ const TR = ({
         )}
       </td>
       <DateParser timestamp={r.invitedOn}>
-        {timestamp => <td>{timestamp}</td>}
+        {timestamp => <td width="150">{timestamp}</td>}
       </DateParser>
-      <td>
+      <td width="200">
         <StatusText>
           {`${r.status === 'accepted' ? 'Agreed' : r.status}`}
         </StatusText>
@@ -61,7 +61,7 @@ const TR = ({
         )}
       </td>
       <DateParser timestamp={submittedOn}>
-        {timestamp => <td>{timestamp}</td>}
+        {timestamp => <td width="150">{timestamp}</td>}
       </DateParser>
       <td width={100}>
         {r.status === 'pending' && (
@@ -83,31 +83,29 @@ const ReviewersDetailsList = ({
 }) =>
   reviewers.length > 0 ? (
     <Root>
-      <ScrollContainer>
-        <Table>
-          <thead>
-            <tr>
-              <td>Full Name</td>
-              <td>Invited On</td>
-              <td>Responded On</td>
-              <td>Submitted On</td>
-              <td />
-            </tr>
-          </thead>
-          <tbody>
-            {reviewers.map((r, index) => (
-              <TR
-                index={index}
-                key={r.email}
-                renderAcceptedLabel={renderAcceptedLabel}
-                reviewer={r}
-                showConfirmResend={showConfirmResend}
-                showConfirmRevoke={showConfirmRevoke}
-              />
-            ))}
-          </tbody>
-        </Table>
-      </ScrollContainer>
+      <Table>
+        <thead>
+          <tr>
+            <td>Full Name</td>
+            <td width="150">Invited On</td>
+            <td width="200">Responded On</td>
+            <td width="150">Submitted On</td>
+            <td width="100" />
+          </tr>
+        </thead>
+        <tbody>
+          {reviewers.map((r, index) => (
+            <TR
+              index={index}
+              key={r.email}
+              renderAcceptedLabel={renderAcceptedLabel}
+              reviewer={r}
+              showConfirmResend={showConfirmResend}
+              showConfirmRevoke={showConfirmRevoke}
+            />
+          ))}
+        </tbody>
+      </Table>
     </Root>
   ) : (
     <div> No reviewers details </div>
@@ -205,11 +203,6 @@ const StatusText = ReviewerEmail.extend`
 
 const DateText = ReviewerEmail.extend``
 
-const ScrollContainer = styled.div`
-  align-self: stretch;
-  flex: 1;
-  overflow: auto;
-`
 const Root = styled.div`
   align-items: stretch;
   align-self: stretch;
@@ -218,13 +211,28 @@ const Root = styled.div`
   flex-direction: column;
   justify-content: flex-start;
   height: 25vh;
+  display: table;
 `
 
 const Table = styled.table`
   border-spacing: 0;
   border-collapse: collapse;
   width: 100%;
-
+  thead {
+    display: table;
+    width: calc(100% - 1em);
+  }
+  tbody {
+    overflow: auto;
+    max-height: 180px;
+    margin-bottom: ${th('gridUnit')};
+    display: block;
+    tr {
+      display: table;
+      width: 100%;
+      table-layout: fixed;
+    }
+  }
   & thead tr {
     ${defaultText};
     border-bottom: ${th('borderDefault')};