diff --git a/frontend/src/components/people-list/table/person-role.js b/frontend/src/components/people-list/table/person-role.js index 902f7af5..85531679 100644 --- a/frontend/src/components/people-list/table/person-role.js +++ b/frontend/src/components/people-list/table/person-role.js @@ -24,6 +24,8 @@ const borderSide = props => props.toggled const StyledWrapper = styled.div` position: relative; + display: inline-block; + min-width: ${remcalc(130)}; &:after { border-left: ${remcalc(5)} solid transparent; @@ -31,8 +33,8 @@ const StyledWrapper = styled.div` border-${borderSide}: ${remcalc(5)} solid black; ${pseudoEl({ - top: '50%', - right: remcalc(10) + top: '40%', + right: remcalc(-10) })} } `; @@ -58,7 +60,7 @@ const PersonRole = (props) => { orgIndex } = props; - const toggled = toggledID; + const toggled = toggledID === person.uuid; const handleClick = () => handleRoleTooltip(person.uuid); const handleOptionSelect = (updatedMember) => handleMemberUpdate(updatedMember); diff --git a/frontend/src/components/people-list/table/person-status.js b/frontend/src/components/people-list/table/person-status.js index 8c0f5164..c81059ef 100644 --- a/frontend/src/components/people-list/table/person-status.js +++ b/frontend/src/components/people-list/table/person-status.js @@ -24,6 +24,8 @@ const borderSide = props => props.toggled const StyledWrapper = styled.div` position: relative; + display: inline-block; + min-width: ${remcalc(130)}; &:after { border-left: ${remcalc(5)} solid transparent; @@ -31,8 +33,8 @@ const StyledWrapper = styled.div` border-${borderSide}: ${remcalc(5)} solid black; ${pseudoEl({ - top: '50%', - right: remcalc(10) + top: '40%', + right: remcalc(-10) })} } `; @@ -58,7 +60,7 @@ const PersonStatus = (props) => { orgIndex } = props; - const toggled = toggledID; + const toggled = toggledID === person.uuid; const handleClick = () => handleStatusTooltip(person.uuid); const handleOptionSelect = (updatedMember) => handleMemberUpdate(updatedMember); diff --git a/frontend/src/components/people-list/table/tooltip.js b/frontend/src/components/people-list/table/tooltip.js index 0d6b270c..83353dbd 100644 --- a/frontend/src/components/people-list/table/tooltip.js +++ b/frontend/src/components/people-list/table/tooltip.js @@ -5,7 +5,8 @@ const Tooltip = require('@ui/components/tooltip'); const tooltipStyle = { position: 'absolute', top: '30px', - zIndex: 1 + zIndex: 1, + right: '-36px', }; const arrowPosition = {