fix(site): цена в плитках тарифа /signup не срезается на 320–360px
Some checks are pending
Auto-tag / Create date-tag (push) Waiting to run
CI / Backend (.NET 8) (push) Waiting to run
CI / Web (React + Vite) (push) Waiting to run
CI / POS (WPF, Windows) (push) Waiting to run
Docker Public / Build + push Public (test + latest) (push) Waiting to run
Docker Public / Deploy :test → test.food-market.kz (push) Blocked by required conditions

Регрессия от a0f9e0b: whitespace-nowrap делал «14 000 ₸/мес» шире узкой
колонки плитки (~65px контента на 360px), хвост срезался → «14 000 ₸/ме».
Разношу: сумма+₸ одной неразрывной строкой, «/мес» — отдельной строкой под
суммой (плитки остаются в 3 колонки, сумма видна целиком, внутри суммы
переноса нет). Итог «Ваша конфигурация» и карточки главной — без изменений.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
nns 2026-10-12 01:12:04 +05:00
parent 03c1dd98ce
commit a5f885cb80

View file

@ -1,7 +1,7 @@
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import { validateEmail, validatePassword, validatePhone } from '@/lib/validation' import { validateEmail, validatePassword, validatePhone } from '@/lib/validation'
import { PhoneInput } from '@/components/PhoneInput' import { PhoneInput } from '@/components/PhoneInput'
import { PRICING, businessPrice, clamp, fmtKztMonth, type BusinessConfig } from '@/lib/pricing' import { PRICING, businessPrice, clamp, fmtKzt, fmtKztMonth, type BusinessConfig } from '@/lib/pricing'
const VALID_PLANS = ['start', 'business', 'network'] as const const VALID_PLANS = ['start', 'business', 'network'] as const
type PlanId = (typeof VALID_PLANS)[number] type PlanId = (typeof VALID_PLANS)[number]
@ -223,14 +223,20 @@ export default function SignupForm({ defaultPlan = 'start' }: Props) {
<div className="text-sm font-medium mb-2">Тариф</div> <div className="text-sm font-medium mb-2">Тариф</div>
<div className="grid grid-cols-3 gap-2"> <div className="grid grid-cols-3 gap-2">
{[ {[
{ id: 'start', name: 'Старт', price: fmtKztMonth(PRICING.startPrice) }, { id: 'start', name: 'Старт', price: fmtKzt(PRICING.startPrice), per: '/мес' },
{ id: 'business', name: 'Бизнес', price: fmtKztMonth(businessTotal) }, { id: 'business', name: 'Бизнес', price: fmtKzt(businessTotal), per: '/мес' },
{ id: 'network', name: 'Сеть', price: 'по запросу' }, { id: 'network', name: 'Сеть', price: 'по запросу', per: '' },
].map((p) => ( ].map((p) => (
<label key={p.id} className={`p-2.5 rounded-md border cursor-pointer text-center text-sm ${plan === p.id ? 'border-brand bg-brand/5' : 'border-slate-200'}`}> <label key={p.id} className={`p-2.5 rounded-md border cursor-pointer text-center text-sm ${plan === p.id ? 'border-brand bg-brand/5' : 'border-slate-200'}`}>
<input type="radio" name="plan" className="hidden" checked={plan === p.id} onChange={() => selectPlan(p.id as PlanId)} /> <input type="radio" name="plan" className="hidden" checked={plan === p.id} onChange={() => selectPlan(p.id as PlanId)} />
<div className="font-semibold">{p.name}</div> <div className="font-semibold">{p.name}</div>
<div className="text-xs text-slate-500 whitespace-nowrap">{p.price}</div> {/* На 320–360px плитка узкая — «14 000 ₸/мес» целиком не влезает и
хвост срезается. Разносим: сумма+₸ одной неразрывной строкой,
«/мес» — отдельной строкой под ней. Сумма видна целиком. */}
<div className="text-xs text-slate-500 leading-tight mt-0.5">
<span className="block whitespace-nowrap">{p.price}</span>
{p.per && <span className="block text-[10px] text-slate-400">{p.per}</span>}
</div>
</label> </label>
))} ))}
</div> </div>