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
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:
parent
03c1dd98ce
commit
a5f885cb80
|
|
@ -1,7 +1,7 @@
|
|||
import { useState, useEffect } from 'react'
|
||||
import { validateEmail, validatePassword, validatePhone } from '@/lib/validation'
|
||||
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
|
||||
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="grid grid-cols-3 gap-2">
|
||||
{[
|
||||
{ id: 'start', name: 'Старт', price: fmtKztMonth(PRICING.startPrice) },
|
||||
{ id: 'business', name: 'Бизнес', price: fmtKztMonth(businessTotal) },
|
||||
{ id: 'network', name: 'Сеть', price: 'по запросу' },
|
||||
{ id: 'start', name: 'Старт', price: fmtKzt(PRICING.startPrice), per: '/мес' },
|
||||
{ id: 'business', name: 'Бизнес', price: fmtKzt(businessTotal), per: '/мес' },
|
||||
{ id: 'network', name: 'Сеть', price: 'по запросу', per: '' },
|
||||
].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'}`}>
|
||||
<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="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>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue