fix: handle long promo group names with truncation and flex-wrap

This commit is contained in:
Fringg
2026-03-18 22:52:32 +03:00
parent c579abe6a3
commit 4a33a61641

View File

@@ -235,11 +235,11 @@ export default function Dashboard() {
<h1 className="text-2xl font-bold text-dark-50 sm:text-3xl"> <h1 className="text-2xl font-bold text-dark-50 sm:text-3xl">
{t('dashboard.welcome', { name: user?.first_name || user?.username || '' })} {t('dashboard.welcome', { name: user?.first_name || user?.username || '' })}
</h1> </h1>
<div className="mt-1 flex items-center gap-2"> <div className="mt-1 flex flex-wrap items-center gap-2">
<p className="text-dark-400">{t('dashboard.yourSubscription')}</p> <p className="text-dark-400">{t('dashboard.yourSubscription')}</p>
{promoGroupData?.group_name && ( {promoGroupData?.group_name && (
<span <span
className="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-semibold" className="inline-flex max-w-[160px] items-center gap-1 rounded-full px-2.5 py-0.5 text-[11px] font-semibold"
style={{ style={{
background: 'rgba(var(--color-accent-400), 0.1)', background: 'rgba(var(--color-accent-400), 0.1)',
border: '1px solid rgba(var(--color-accent-400), 0.2)', border: '1px solid rgba(var(--color-accent-400), 0.2)',
@@ -247,6 +247,7 @@ export default function Dashboard() {
}} }}
> >
<svg <svg
className="shrink-0"
width="10" width="10"
height="10" height="10"
viewBox="0 0 24 24" viewBox="0 0 24 24"
@@ -255,7 +256,7 @@ export default function Dashboard() {
> >
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" /> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
</svg> </svg>
{promoGroupData.group_name} <span className="truncate">{promoGroupData.group_name}</span>
</span> </span>
)} )}
</div> </div>