I'm having trouble containing the background color within the text content. I want the right spacing to be equal to the left, but as you can see in this screenshot, the right side is not adjusting:
https://i.sstatic.net/cD4GK.png
Here's the code I'm using:
<td>{user.workforce_roles.filter((wf_role) => wf_role.role.visible).map((wf_role) => {
return <span key={wf_role.id} className="d-block">{wf_role.role.friendly_name}</span>;
})}</td>
And here is the styling:
.d-block {
background-color: map-get($theme-colors, 'gapped');
border-radius: px-to-rem(4px);
margin-bottom: px-to-rem(6px);
margin-right: px-to-rem(6px);
padding: px-to-rem(2px) px-to-rem(8px);
padding-right: px-to-rem(8px);
position: relative;
}
It seems like the background width is being based on the longest text, but I need it to be specific to each text case. Any suggestions would be greatly appreciated!