Align VAT toggle with grid columns
Some checks failed
CI / checks (push) Waiting to run
CI / checks (pull_request) Has been cancelled

This commit is contained in:
Tero Halla-aho 2025-12-21 15:08:05 +02:00
parent cfbe570fb2
commit ab559b1a66

View file

@ -226,17 +226,15 @@ export default function ProfilePage() {
<form onSubmit={onSaveBilling} style={{ display: 'grid', gap: 14 }}> <form onSubmit={onSaveBilling} style={{ display: 'grid', gap: 14 }}>
<label <label
className="amenity-option" className="amenity-option"
style={{ maxWidth: 520, display: 'flex', alignItems: 'center', gap: 12, minHeight: 52, justifyContent: 'space-between' }} style={{ maxWidth: 520, display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', columnGap: 10, minHeight: 52 }}
> >
<div className="amenity-option-meta" style={{ fontWeight: 600, display: 'flex', alignItems: 'center', gap: 8, minWidth: 0, flex: 1 }}>
<span aria-hidden className="amenity-emoji">💸</span> <span aria-hidden className="amenity-emoji">💸</span>
<span className="amenity-name">{t('billingEnableLabel')}</span> <span className="amenity-name" style={{ fontWeight: 600 }}>{t('billingEnableLabel')}</span>
</div>
<input <input
type="checkbox" type="checkbox"
checked={billingEnabled} checked={billingEnabled}
onChange={(e) => setBillingEnabled(e.target.checked)} onChange={(e) => setBillingEnabled(e.target.checked)}
style={{ width: 22, height: 22, margin: 0, flexShrink: 0 }} style={{ width: 22, height: 22, margin: 0, justifySelf: 'end' }}
/> />
</label> </label>
{billingEnabled ? ( {billingEnabled ? (
@ -252,17 +250,15 @@ export default function ProfilePage() {
</label> </label>
<label <label
className="amenity-option" className="amenity-option"
style={{ maxWidth: 520, display: 'flex', alignItems: 'center', gap: 12, minHeight: 52, justifyContent: 'space-between' }} style={{ maxWidth: 520, display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', columnGap: 10, minHeight: 52 }}
> >
<div className="amenity-option-meta" style={{ fontWeight: 600, display: 'flex', alignItems: 'center', gap: 8, minWidth: 0, flex: 1 }}>
<span aria-hidden className="amenity-emoji">🧾</span> <span aria-hidden className="amenity-emoji">🧾</span>
<span className="amenity-name">{t('billingIncludeVat')}</span> <span className="amenity-name" style={{ fontWeight: 600 }}>{t('billingIncludeVat')}</span>
</div>
<input <input
type="checkbox" type="checkbox"
checked={billingIncludeVatLine} checked={billingIncludeVatLine}
onChange={(e) => setBillingIncludeVatLine(e.target.checked)} onChange={(e) => setBillingIncludeVatLine(e.target.checked)}
style={{ width: 22, height: 22, margin: 0, flexShrink: 0 }} style={{ width: 22, height: 22, margin: 0, justifySelf: 'end' }}
/> />
</label> </label>
</div> </div>