diff --git a/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js b/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js index b24ca003545996abc6a5b6859e3218842601e13b..b88236b8a85d70c5f8f63330afa84c4120b1e04b 100644 --- a/packages/components-faraday/src/components/Reviewers/ReviewersDetailsList.js +++ b/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')};