etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 10:27:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: prevent countdown timer overflow on narrow mobile screens

Browse Source 
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.
This commit is contained in:
Fringg
2026-02-27 08:51:56 +03:00
parent d89c534c0b
commit 96bcc76d69
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/Subscription.tsx
View File

@@ -60,7 +60,7 @@ const CountdownTimer = memo(function CountdownTimer({
return ( return (
<div <div
className="rounded-[14px] p-3.5" className="min-w-0 overflow-hidden rounded-[14px] p-3.5"
style={{ style={{
background: isExpired background: isExpired
? 'rgba(255,59,92,0.06)' ? 'rgba(255,59,92,0.06)'
@@ -107,46 +107,46 @@ const CountdownTimer = memo(function CountdownTimer({
{t('subscription.expired')} {t('subscription.expired')}
</div> </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 && ( {countdown.days > 0 && (
<> <>
<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 }} style={{ color: isUrgent ? '#FFB800' : g.text }}
> >
{countdown.days} {countdown.days}
</span> </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')} {t('subscription.daysShort')}
</span> </span>
</> </>
)} )}
<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 }} style={{ color: isUrgent ? '#FFB800' : g.text }}
> >
{String(countdown.hours).padStart(2, '0')} {String(countdown.hours).padStart(2, '0')}
</span> </span>
<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 }} style={{ color: isUrgent ? '#FFB800' : g.text }}
> >
: :
</span> </span>
<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 }} style={{ color: isUrgent ? '#FFB800' : g.text }}
> >
{String(countdown.minutes).padStart(2, '0')} {String(countdown.minutes).padStart(2, '0')}
</span> </span>
<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 }} style={{ color: isUrgent ? '#FFB800' : g.text }}
> >
: :
</span> </span>
<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 }} style={{ color: isUrgent ? '#FFB800' : g.text }}
> >
{String(countdown.seconds).padStart(2, '0')} {String(countdown.seconds).padStart(2, '0')}