From 63cccc47212eaafd917c48e2f2365afd501baf2e Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Fri, 3 Apr 2026 08:23:32 +0200
Subject: [PATCH] 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>
---
 apps/main/src/pages/settings.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/main/src/pages/settings.tsx b/apps/main/src/pages/settings.tsx
index cb2b93c..dd23d2a 100644
--- a/apps/main/src/pages/settings.tsx
+++ b/apps/main/src/pages/settings.tsx
@@ -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