From b704a701c6cc8e67b292b7550a24c86d05b764f9 Mon Sep 17 00:00:00 2001
From: Johnomated <34685272+Johnomated@users.noreply.github.com>
Date: Sat, 27 Jul 2024 10:16:22 -0500
Subject: [PATCH] Edited /components/Badge.tsx to be a block element

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.
---
 src/components/Badge.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 47505733..380b1dba 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -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'