diff --git a/src/js/components/Ballot/PositionRowListCompressed.jsx b/src/js/components/Ballot/PositionRowListCompressed.jsx index 2900017a0..7535aff5e 100644 --- a/src/js/components/Ballot/PositionRowListCompressed.jsx +++ b/src/js/components/Ballot/PositionRowListCompressed.jsx @@ -298,7 +298,16 @@ class PositionRowListCompressed extends Component { alt="" /> ) : ( - + {speakerDisplayNameInitials} )} @@ -333,31 +342,56 @@ const CandidateEndorsementsContainer = styled('div')` align-items: flex-start; display: flex; flex-flow: column; + max-width: 212px; + overflow: hidden; + width: 100%; `; const CandidateEndorsementContainer = styled('div')(({ theme }) => (` - min-width: 42px; + min-width: 36px; + border-radius: 50%; + margin-right: -12px; + position: relative; + ${theme.breakpoints.down('xs')} { display: none; } + + img{ + border: 2px solid #FFFFFF; + border-radius: 50%; + height: 36px; + object-fit: cover; + width: 36px; + } `)); const CandidateEndorsementPhotos = styled('div')` + align-items: center; cursor: pointer; display: flex; - justify-content: flex-start; - margin-right: 0; + width: 100%; `; const CandidateEndorsementText = styled('div')` + color: #1073d4; cursor: pointer; + font-family: "Poppins", sans-serif; + font-size: 14px; + height: 54px; + letter-spacing: 0.5%; + line-height: 17.92px; + margin-top: 12px; overflow-wrap: break-word; + text-decoration: underline; + width: 100%; `; const CandidateEndorsementsWrapper = styled('div')` - height: 100%; - max-width: 400px; + height: 102px; + max-width: 100%; white-space: wrap; + width: 212px; `; export default withTheme(withStyles(styles)(PositionRowListCompressed));