Try fixed height with matching line-height for vertical centering
Use height: 24px with line-height: 24px and no vertical padding. This forces text to center vertically within the fixed height container. Added box-sizing: border-box and vertical-align: middle for reliability. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
e071576765
commit
bfee60399c
1 changed files with 1 additions and 1 deletions
|
|
@ -75,7 +75,7 @@ const RagStatusBadge: React.FC<{ status: RagStatus }> = ({ status }) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<span style={{ backgroundColor: bgColor, color: textColor, padding: '3px 12px 5px 12px', borderRadius: '9999px', fontSize: '12px', fontWeight: 'bold', display: 'inline-block', minWidth: '50px', textAlign: 'center' }}>
|
||||
<span style={{ backgroundColor: bgColor, color: textColor, borderRadius: '9999px', fontSize: '12px', fontWeight: 'bold', display: 'inline-block', minWidth: '50px', textAlign: 'center', height: '24px', lineHeight: '24px', verticalAlign: 'middle', paddingLeft: '12px', paddingRight: '12px', paddingTop: '0', paddingBottom: '0', boxSizing: 'border-box' }}>
|
||||
{status}
|
||||
</span>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue