From 96bcc76d695ee7e26ad2538e1733f439e6a2983b Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Fri, 27 Feb 2026 08:51:56 +0300
Subject: [PATCH] fix: prevent countdown timer overflow on narrow mobile
 screens

Add min-w-0 + overflow-hidden to the countdown card to prevent it from
blowing out the grid column. Reduce number font from 20px to 18px on
mobile (20px on sm+), tighten gaps and colon sizes to fit within the
50% grid column on 375px screens.
---
 src/pages/Subscription.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index 52733bf..ec29ae3 100644
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -60,7 +60,7 @@ const CountdownTimer = memo(function CountdownTimer({
 
   return (
     <div
-      className="rounded-[14px] p-3.5"
+      className="min-w-0 overflow-hidden rounded-[14px] p-3.5"
       style={{
         background: isExpired
           ? 'rgba(255,59,92,0.06)'
@@ -107,46 +107,46 @@ const CountdownTimer = memo(function CountdownTimer({
           {t('subscription.expired')}
         </div>
       ) : (
-        <div className="flex items-baseline gap-1 font-mono tabular-nums">
+        <div className="flex items-baseline gap-0.5 font-mono tabular-nums sm:gap-1">
           {countdown.days > 0 && (
             <>
               <span
-                className="text-[20px] font-bold tracking-tight"
+                className="text-[18px] font-bold tracking-tight sm:text-[20px]"
                 style={{ color: isUrgent ? '#FFB800' : g.text }}
               >
                 {countdown.days}
               </span>
-              <span className="mr-1 text-[10px] font-medium text-dark-50/25">
+              <span className="mr-0.5 text-[10px] font-medium text-dark-50/25 sm:mr-1">
                 {t('subscription.daysShort')}
               </span>
             </>
           )}
           <span
-            className="text-[20px] font-bold tracking-tight"
+            className="text-[18px] font-bold tracking-tight sm:text-[20px]"
             style={{ color: isUrgent ? '#FFB800' : g.text }}
           >
             {String(countdown.hours).padStart(2, '0')}
           </span>
           <span
-            className="mx-[-1px] text-[16px] font-bold opacity-30"
+            className="mx-[-2px] text-[14px] font-bold opacity-30 sm:mx-[-1px] sm:text-[16px]"
             style={{ color: isUrgent ? '#FFB800' : g.text }}
           >
             :
           </span>
           <span
-            className="text-[20px] font-bold tracking-tight"
+            className="text-[18px] font-bold tracking-tight sm:text-[20px]"
             style={{ color: isUrgent ? '#FFB800' : g.text }}
           >
             {String(countdown.minutes).padStart(2, '0')}
           </span>
           <span
-            className="mx-[-1px] text-[16px] font-bold opacity-30"
+            className="mx-[-2px] text-[14px] font-bold opacity-30 sm:mx-[-1px] sm:text-[16px]"
             style={{ color: isUrgent ? '#FFB800' : g.text }}
           >
             :
           </span>
           <span
-            className="text-[20px] font-bold tracking-tight"
+            className="text-[18px] font-bold tracking-tight sm:text-[20px]"
             style={{ color: isUrgent ? '#FFB800' : g.text }}
           >
             {String(countdown.seconds).padStart(2, '0')}