style(ui): adjust layout alignment and sizing in settings page and tab nav

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"

src/shared/components/TabNav.js

@@ -4,7 +4,7 @@ import React from 'react';
 
 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 (