fix: prevent mobile overflow in settings page flex containers

Add flex-wrap to the member action row (date + remove button) and the
header badge/language selector row so they wrap gracefully on narrow
screens without affecting desktop layout.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Arthur Belleville 2026-04-03 08:23:32 +02:00
parent 78875f7a9e
commit 63cccc4721
No known key found for this signature in database

View file

@ -242,7 +242,7 @@ export default function SettingsPage() {
<TypographyH3>{t("settings:title")}</TypographyH3>
<TypographyMuted>{t("settings:subtitle")}</TypographyMuted>
</div>
<div className="flex items-center gap-2 mt-2">
<div className="flex flex-wrap items-center gap-2 mt-2">
{organizationData?.active_subscription_plan === "annual" && (
<Badge className="bg-linear-to-r from-purple-500 to-blue-500 text-white border-transparent text-xs">
Founder
@ -617,7 +617,7 @@ export default function SettingsPage() {
</p>
<p className="text-xs text-muted-foreground truncate">{member.email}</p>
</div>
<div className="flex items-center gap-2 sm:ml-3">
<div className="flex flex-wrap items-center gap-2 sm:ml-3">
<p className="text-xs text-muted-foreground shrink-0">
{t("settings:teamInvite.joinedOn", {
date: member.created_at