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

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

Browse Source
This commit is contained in:
Hyko
2026-04-22 20:22:07 -04:00
parent e647aef47e
commit f082ef4fda
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/admin/pages/SettingsPage.client.js
+3 -3
View File
@@ -34,11 +34,11 @@ const SettingsPage = ({ appConfig = {} }) => {
<div className="flex flex-col gap-4 sm:gap-6 lg:gap-8"> <div className="flex flex-col gap-4 sm:gap-6 lg:gap-8">
<AdminHeader title="Paramètres" description="Configuration de votre espace ZEN" /> <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} /> <TabNav tabs={TABS} activeTab={activeTab} onTabChange={setActiveTab} />
{activeTab === 'general' && ( {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"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Input <Input
label="Nom du site" label="Nom du site"
@@ -70,7 +70,7 @@ const SettingsPage = ({ appConfig = {} }) => {
)} )}
{activeTab === 'appearance' && ( {activeTab === 'appearance' && (
<Card title="Thème"> <Card title="Thème" className='min-w-1/2'>
<div className="max-w-xs"> <div className="max-w-xs">
<Select <Select
label="Thème de l'interface" label="Thème de l'interface"
src/shared/components/TabNav.js
+2 -2
View File
@@ -2,9 +2,9 @@
import React from 'react'; import React from 'react';
const TabNav = ({ tabs = [], activeTab, onTabChange }) => { const TabNav = ({ tabs = [], activeTab, onTabChange}) => {
return ( 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) => { {tabs.map((tab) => {
const isActive = tab.id === activeTab; const isActive = tab.id === activeTab;
return ( return (