From 46f7464bdbea6a5f5e9c0101efde6bb85c9450e0 Mon Sep 17 00:00:00 2001
From: Philipp Mandler <info@philipp-mandler.com>
Date: Sun, 14 Apr 2024 22:35:38 +0200
Subject: [PATCH] Make CorrectionAnimation responsive

---
 src/components/CorrectionAnimation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CorrectionAnimation.tsx b/src/components/CorrectionAnimation.tsx
index aed0df4..fedd8f4 100644
--- 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,{' '}