Make CorrectionAnimation responsive

bugbakery · Apr 14, 2024 · 46f7464 · 46f7464
1 parent 2524914
commit 46f7464
Showing 1 changed file with 1 addition and 1 deletion.
diff --git a/src/components/CorrectionAnimation.tsx b/src/components/CorrectionAnimation.tsx
@@ -27,7 +27,7 @@ export function CorrectionAnimation() {
   return (
     <div
       ref={ref}
-      className="text-[36px] leading-normal py-6 px-8 rounded-md w-[580px] shadow-[0px_4px_20px_rgba(0,0,0,0.15)]"
+      className="text-[calc(min(6vw,_36px))] md:text-[calc(min(7vw_-_33px,_36px))] leading-normal py-6 px-8 rounded-md max-w-[580px] shadow-[0px_4px_20px_rgba(0,0,0,0.15)]"
     >
       Transcript with <span style={{ color: '#aa0000' }}>low </span>
       <span style={{ color: '#550000' }}>confidence</span> is highlighted in red. With this,{' '}