From f082ef4fda3cd2611de92bbd27dd09eaf6e20749 Mon Sep 17 00:00:00 2001
From: Hyko <punk.flag8609@fastmail.com>
Date: Wed, 22 Apr 2026 20:22:07 -0400
Subject: [PATCH] style(ui): adjust layout alignment and sizing in settings
 page and tab nav

---
 src/features/admin/pages/SettingsPage.client.js | 6 +++---
 src/shared/components/TabNav.js                 | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/features/admin/pages/SettingsPage.client.js b/src/features/admin/pages/SettingsPage.client.js
index 184c324..7128812 100644
--- a/src/features/admin/pages/SettingsPage.client.js
+++ b/src/features/admin/pages/SettingsPage.client.js
@@ -34,11 +34,11 @@ const SettingsPage = ({ appConfig = {} }) => {
         <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
             <AdminHeader title="Paramètres" description="Configuration de votre espace ZEN" />
 
-            <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-6 items-start">
                 <TabNav tabs={TABS} activeTab={activeTab} onTabChange={setActiveTab} />
 
                 {activeTab === 'general' && (
-                    <Card title="Informations générales">
+                    <Card title="Informations générales" className='min-w-1/2'>
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                             <Input
                                 label="Nom du site"
@@ -70,7 +70,7 @@ const SettingsPage = ({ appConfig = {} }) => {
                 )}
 
                 {activeTab === 'appearance' && (
-                    <Card title="Thème">
+                    <Card title="Thème" className='min-w-1/2'>
                         <div className="max-w-xs">
                             <Select
                                 label="Thème de l'interface"
diff --git a/src/shared/components/TabNav.js b/src/shared/components/TabNav.js
index 565decc..2dbeefc 100644
--- a/src/shared/components/TabNav.js
+++ b/src/shared/components/TabNav.js
@@ -2,9 +2,9 @@
 
 import React from 'react';
 
-const TabNav = ({ tabs = [], activeTab, onTabChange }) => {
+const TabNav = ({ tabs = [], activeTab, onTabChange}) => {
     return (
-        <div className="flex border-b border-neutral-200 dark:border-neutral-800/70">
+        <div className="w-full flex border-b border-neutral-200 dark:border-neutral-800/70">
             {tabs.map((tab) => {
                 const isActive = tab.id === activeTab;
                 return (