strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Edited /components/Badge.tsx to be a block element

Browse Source 
If the text for tags/cameras on the grid page overflowed to a second line then the background did not grow with the text. Making the element a block and slightly increasing the padding keeps the text/background similar to the original style while also allowing the background to match the text if it is multiple lines.
This commit is contained in:
Johnomated 2024-07-27 10:16:22 -05:00
parent 1b45eb41ae
commit b704a701c6
1 changed files with 3 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Badge.tsx
View File

@ -28,7 +28,9 @@ export default function Badge({
case 'small':
return clsx(
'h-max-baseline',
'px-[5px] py-[2.75px]',
// 'px-[5px] py-[2.75px]', //original padding
'block', // added to keep gray background around text when overflowed
'px-[6px] py-[5px]', // increased padding for block and to stop content shift
'text-[0.7rem] font-medium rounded-[0.25rem]',
highContrast
? 'text-invert bg-invert'