From 77ca4fe66fcd26277819e1dd87a9d23d83b42484 Mon Sep 17 00:00:00 2001
From: Hyko <punk.flag8609@fastmail.com>
Date: Fri, 24 Apr 2026 17:54:37 -0400
Subject: [PATCH] fix(ui): improve mobile responsiveness across admin
 components

- reduce app name font size from text-lg to text-sm in AdminTop mobile header
- make profile page cards full-width on mobile with sm:min-w-3/5 breakpoint
- stack photo upload layout vertically on mobile using flex-col sm:flex-row
- add flex-wrap to photo action buttons for small screens
- make TabNav horizontally scrollable with hidden scrollbar on mobile
- add shrink-0 and whitespace-nowrap to tab buttons to prevent wrapping
---
 src/features/admin/components/AdminTop.js      |  2 +-
 src/features/admin/pages/ProfilePage.client.js | 12 ++++++------
 src/shared/components/TabNav.js                |  5 ++---
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/features/admin/components/AdminTop.js b/src/features/admin/components/AdminTop.js
index 4a6b7a9..355e0d8 100644
--- a/src/features/admin/components/AdminTop.js
+++ b/src/features/admin/components/AdminTop.js
@@ -91,7 +91,7 @@ const AdminTop = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appNa
                             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={isMobileMenuOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"} />
                         </svg>
                     </button>
-                    <h1 className="text-neutral-900 dark:text-white font-semibold text-lg">{appName}</h1>
+                    <h1 className="text-neutral-900 dark:text-white font-semibold text-sm">{appName}</h1>
                 </div>
 
                 {/* Desktop breadcrumb — always rendered to keep user menu pinned right */}
diff --git a/src/features/admin/pages/ProfilePage.client.js b/src/features/admin/pages/ProfilePage.client.js
index 9ab1bc0..5997b5a 100644
--- a/src/features/admin/pages/ProfilePage.client.js
+++ b/src/features/admin/pages/ProfilePage.client.js
@@ -239,7 +239,7 @@ const ProfilePage = ({ user: initialUser }) => {
                 {activeTab === 'informations' && (
                     <Card
                         title="Informations personnelles"
-                        className="min-w-3/5"
+                        className="w-full sm:min-w-3/5"
                         footer={
                             <div className="flex items-center justify-end gap-3">
                                 <Button
@@ -309,7 +309,7 @@ const ProfilePage = ({ user: initialUser }) => {
                 {activeTab === 'securite' && (
                     <Card
                         title="Changer le mot de passe"
-                        className="min-w-3/5"
+                        className="w-full sm:min-w-3/5"
                         footer={
                             <div className="flex items-center justify-end gap-3">
                                 <Button
@@ -377,7 +377,7 @@ const ProfilePage = ({ user: initialUser }) => {
                 {activeTab === 'sessions' && (
                     <Card
                         title="Sessions actives"
-                        className="min-w-3/5"
+                        className="w-full sm:min-w-3/5"
                         footer={
                             <div className="flex justify-end">
                                 <Button
@@ -443,11 +443,11 @@ const ProfilePage = ({ user: initialUser }) => {
                 )}
 
                 {activeTab === 'photo' && (
-                    <Card title="Photo de profil" className="min-w-3/5">
+                    <Card title="Photo de profil" className="w-full sm:min-w-3/5">
                         <p className="text-sm text-neutral-500 dark:text-neutral-400">
                             Téléchargez une nouvelle photo de profil. Taille max 5MB.
                         </p>
-                        <div className="flex items-center gap-6">
+                        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-6">
                             <div className="relative shrink-0">
                                 <UserAvatar user={user} size="xl" />
                                 {uploadingImage && (
@@ -456,7 +456,7 @@ const ProfilePage = ({ user: initialUser }) => {
                                     </div>
                                 )}
                             </div>
-                            <div className="flex gap-2">
+                            <div className="flex flex-wrap gap-2">
                                 <input
                                     ref={fileInputRef}
                                     type="file"
diff --git a/src/shared/components/TabNav.js b/src/shared/components/TabNav.js
index 2dbeefc..6996420 100644
--- a/src/shared/components/TabNav.js
+++ b/src/shared/components/TabNav.js
@@ -1,17 +1,16 @@
 'use client';
 
-import React from 'react';
 
 const TabNav = ({ tabs = [], activeTab, onTabChange}) => {
     return (
-        <div className="w-full flex border-b border-neutral-200 dark:border-neutral-800/70">
+        <div className="w-full flex overflow-x-auto border-b border-neutral-200 dark:border-neutral-800/70 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
             {tabs.map((tab) => {
                 const isActive = tab.id === activeTab;
                 return (
                     <button
                         key={tab.id}
                         onClick={() => onTabChange(tab.id)}
-                        className={`cursor-pointer px-4 py-2.5 text-[13px] font-medium transition-colors duration-[120ms] ease-out border-b-2 -mb-px ${
+                        className={`shrink-0 whitespace-nowrap cursor-pointer px-4 py-2.5 text-[13px] font-medium transition-colors duration-[120ms] ease-out border-b-2 -mb-px ${
                             isActive
                                 ? 'border-neutral-900 dark:border-white text-neutral-900 dark:text-white'
                                 : 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'