arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

fix: improve mobile responsiveness for settings page

Browse source 
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>
This commit is contained in:
Arthur Belleville 2026-04-02 22:19:58 +02:00
parent f82d3f70b8
commit b20768e280
No known key found for this signature in database
1 changed files with 12 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
apps/main/src/pages/settings.tsx
View file

@ -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