zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

fix(ui): improve mobile responsiveness across admin components

Browse Source 
- 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
This commit is contained in:
Hyko
2026-04-24 17:54:37 -04:00
parent ba289d1a28
commit 77ca4fe66f
3 changed files with 9 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/admin/components/AdminTop.js
+1 -1
View File
@@ -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"} /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={isMobileMenuOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"} />
</svg> </svg>
</button> </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> </div>
{/* Desktop breadcrumb — always rendered to keep user menu pinned right */} {/* Desktop breadcrumb — always rendered to keep user menu pinned right */}
src/features/admin/pages/ProfilePage.client.js
+6 -6
View File
@@ -239,7 +239,7 @@ const ProfilePage = ({ user: initialUser }) => {
{activeTab === 'informations' && ( {activeTab === 'informations' && (
<Card <Card
title="Informations personnelles" title="Informations personnelles"
className="min-w-3/5" className="w-full sm:min-w-3/5"
footer={ footer={
<div className="flex items-center justify-end gap-3"> <div className="flex items-center justify-end gap-3">
<Button <Button
@@ -309,7 +309,7 @@ const ProfilePage = ({ user: initialUser }) => {
{activeTab === 'securite' && ( {activeTab === 'securite' && (
<Card <Card
title="Changer le mot de passe" title="Changer le mot de passe"
className="min-w-3/5" className="w-full sm:min-w-3/5"
footer={ footer={
<div className="flex items-center justify-end gap-3"> <div className="flex items-center justify-end gap-3">
<Button <Button
@@ -377,7 +377,7 @@ const ProfilePage = ({ user: initialUser }) => {
{activeTab === 'sessions' && ( {activeTab === 'sessions' && (
<Card <Card
title="Sessions actives" title="Sessions actives"
className="min-w-3/5" className="w-full sm:min-w-3/5"
footer={ footer={
<div className="flex justify-end"> <div className="flex justify-end">
<Button <Button
@@ -443,11 +443,11 @@ const ProfilePage = ({ user: initialUser }) => {
)} )}
{activeTab === 'photo' && ( {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"> <p className="text-sm text-neutral-500 dark:text-neutral-400">
Téléchargez une nouvelle photo de profil. Taille max 5MB. Téléchargez une nouvelle photo de profil. Taille max 5MB.
</p> </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"> <div className="relative shrink-0">
<UserAvatar user={user} size="xl" /> <UserAvatar user={user} size="xl" />
{uploadingImage && ( {uploadingImage && (
@@ -456,7 +456,7 @@ const ProfilePage = ({ user: initialUser }) => {
</div> </div>
)} )}
</div> </div>
<div className="flex gap-2"> <div className="flex flex-wrap gap-2">
<input <input
ref={fileInputRef} ref={fileInputRef}
type="file" type="file"
src/shared/components/TabNav.js
+2 -3
View File
@@ -1,17 +1,16 @@
'use client'; 'use client';
import React from 'react';
const TabNav = ({ tabs = [], activeTab, onTabChange}) => { const TabNav = ({ tabs = [], activeTab, onTabChange}) => {
return ( 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) => { {tabs.map((tab) => {
const isActive = tab.id === activeTab; const isActive = tab.id === activeTab;
return ( return (
<button <button
key={tab.id} key={tab.id}
onClick={() => onTabChange(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 isActive
? 'border-neutral-900 dark:border-white text-neutral-900 dark:text-white' ? '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' : 'border-transparent text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'