From cb763090467fd88789205a02a72d4e969c10a7df Mon Sep 17 00:00:00 2001
From: Pinapelz <yukais@pinapelz.com>
Date: Sat, 5 Oct 2024 17:57:17 -0700
Subject: adjust channel card for mobile

---
 src/components/ChannelCard/ChannelCard.tsx | 2 +-
 src/components/Countdown.tsx               | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/ChannelCard/ChannelCard.tsx b/src/components/ChannelCard/ChannelCard.tsx
index 44541ad..0aefb97 100644
--- a/src/components/ChannelCard/ChannelCard.tsx
+++ b/src/components/ChannelCard/ChannelCard.tsx
@@ -81,7 +81,7 @@ const ChannelCard: React.FC<ChannelCardProps> = ({
         <p className="text-xs sm:text-sm text-gray-300">
           Estimated Date: {nextMilestoneDate}
         </p>
-        <div className="flex justify-center">
+        <div className="flex justify-center sm:p-4">
           <Countdown targetDate={nextMilestoneDate} />
         </div>
       </div>
diff --git a/src/components/Countdown.tsx b/src/components/Countdown.tsx
index 69e4bd0..a7af166 100644
--- a/src/components/Countdown.tsx
+++ b/src/components/Countdown.tsx
@@ -47,19 +47,19 @@ const Countdown: React.FC<CountdownProps> = ({ targetDate }) => {
     <div className="bg-gray-700 text-white font-sans">
       <div className="flex gap-2 text-2xl font-bold">
         <div className="flex flex-col items-center">
-          <div className="text-4xl">{timeLeft.days}</div>
+          <div className="text-4xl sm:text-2xl">{timeLeft.days}</div>
           <div className="text-xs uppercase">Days</div>
         </div>
         <div className="flex flex-col items-center">
-          <div className="text-4xl">{timeLeft.hours}</div>
+          <div className="text-4xl sm:text-2xl">{timeLeft.hours}</div>
           <div className="text-xs uppercase">Hours</div>
         </div>
         <div className="flex flex-col items-center">
-          <div className="text-4xl">{timeLeft.minutes}</div>
+          <div className="text-4xl sm:text-2xl">{timeLeft.minutes}</div>
           <div className="text-xs uppercase">Minutes</div>
         </div>
         <div className="flex flex-col items-center">
-          <div className="text-4xl">{timeLeft.seconds}</div>
+          <div className="text-4xl sm:text-2xl">{timeLeft.seconds}</div>
           <div className="text-xs uppercase">Seconds</div>
         </div>
       </div>
-- 
cgit v1.2.3