From b20768e280fd44f3b15c87a65bed1f81c2ac1dce Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Thu, 2 Apr 2026 22:19:58 +0200
Subject: [PATCH] fix: improve mobile responsiveness for settings page

Stack avatar and org logo sections vertically on mobile, wrap header badges/language selector, and make member list items stack on small screens.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 apps/main/src/pages/settings.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/main/src/pages/settings.tsx b/apps/main/src/pages/settings.tsx
index 9a71ce8..248fd23 100644
--- a/apps/main/src/pages/settings.tsx
+++ b/apps/main/src/pages/settings.tsx
@@ -237,7 +237,7 @@ export default function SettingsPage() {
   return (
     <div className="min-h-screen bg-background">
       <div className="container max-w-3xl mx-auto py-6 px-4">
-        <div className="flex justify-between items-start mb-4">
+        <div className="flex flex-wrap justify-between items-start gap-2 mb-4">
           <div>
             <TypographyH3>{t("settings:title")}</TypographyH3>
             <TypographyMuted>{t("settings:subtitle")}</TypographyMuted>
@@ -265,9 +265,9 @@ export default function SettingsPage() {
               <CardDescription>{t("settings:avatar.description")}</CardDescription>
             </CardHeader>
             <CardContent>
-              <div className="flex items-start gap-6">
+              <div className="flex flex-col sm:flex-row items-start gap-6">
                 {/* Avatar Preview */}
-                <div className="relative group">
+                <div className="relative group shrink-0">
                   <Avatar className="w-32 h-32 ring-4 ring-gray-100 dark:ring-gray-800">
                     <AvatarImage src={avatarPreview || undefined} alt="Avatar" />
                     <AvatarFallback className="text-3xl bg-linear-to-br from-purple-500 to-blue-500 text-white">
@@ -308,7 +308,7 @@ export default function SettingsPage() {
                     hidden
                   />
 
-                  <div className="flex gap-2">
+                  <div className="flex flex-wrap gap-2">
                     <Button
                       variant="outline"
                       size="sm"
@@ -417,19 +417,19 @@ export default function SettingsPage() {
               {/* Organization Logo */}
               <div className="space-y-2">
                 <Label>{t("settings:organization.logo", "Logo de l'organisation")}</Label>
-                <div className="flex items-center gap-4">
+                <div className="flex flex-wrap items-center gap-4">
                   {organizationData?.organization?.logo_url ? (
                     <img
                       src={`/api/v1/public/org-icons/${organizationData.organization.id}/icon-192.png`}
                       alt="Organization logo"
-                      className="w-16 h-16 rounded-lg object-cover ring-2 ring-gray-100 dark:ring-gray-800"
+                      className="w-16 h-16 rounded-lg object-cover ring-2 ring-gray-100 dark:ring-gray-800 shrink-0"
                     />
                   ) : (
-                    <div className="w-16 h-16 rounded-lg bg-muted flex items-center justify-center ring-2 ring-gray-100 dark:ring-gray-800">
+                    <div className="w-16 h-16 rounded-lg bg-muted flex items-center justify-center ring-2 ring-gray-100 dark:ring-gray-800 shrink-0">
                       <UploadIcon className="w-6 h-6 text-muted-foreground" />
                     </div>
                   )}
-                  <div className="flex gap-2">
+                  <div className="flex flex-wrap gap-2">
                     <Input
                       ref={orgLogoInputRef}
                       type="file"
@@ -573,7 +573,7 @@ export default function SettingsPage() {
                       return (
                         <div
                           key={invite.id}
-                          className="flex items-center justify-between rounded-md border px-3 py-2"
+                          className="flex flex-col sm:flex-row sm:items-center sm:justify-between rounded-md border px-3 py-2 gap-1"
                         >
                           <div className="min-w-0">
                             <p className="text-sm font-medium truncate">{displayName}</p>
@@ -581,7 +581,7 @@ export default function SettingsPage() {
                               {member?.email || invite.invited_email}
                             </p>
                           </div>
-                          <p className="text-xs text-muted-foreground shrink-0 ml-3">
+                          <p className="text-xs text-muted-foreground shrink-0 sm:ml-3">
                             {t("settings:teamInvite.invitedOn", {
                               date: formatDate(invite.created_at),
                             })}
@@ -604,7 +604,7 @@ export default function SettingsPage() {
                     {organizationMembers.map((member) => (
                       <div
                         key={member.id}
-                        className="flex items-center justify-between rounded-md border px-3 py-2"
+                        className="flex flex-col sm:flex-row sm:items-center sm:justify-between rounded-md border px-3 py-2 gap-2"
                       >
                         <div className="min-w-0">
                           <p className="text-sm font-medium truncate">
@@ -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 ml-3">
+                        <div className="flex items-center gap-2 sm:ml-3">
                           <p className="text-xs text-muted-foreground shrink-0">
                             {t("settings:teamInvite.joinedOn", {
                               date: member.created_at