fix(rtl): remplacer les propriétés physiques par logiques pour le support RTL

La sidebar et le lab header utilisaient border-r, pr-4, ml-2, ml-auto
au lieu des propriétés logiques CSS (border-e, pe-4, ms-2, ms-auto).
En mode RTL (persan/arabe), ces propriétés physiques ne s'inversent pas,
ce qui causait la sidebar à basculer du mauvais côté lors de la
navigation vers Lab/Excalidraw.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Sepehr Ramezani
2026-04-19 09:57:21 +02:00
parent c5b495c03f
commit 08ab0d1a1e
4 changed files with 323 additions and 4 deletions

View File

@@ -3,20 +3,24 @@ import { Sidebar } from "@/components/sidebar";
import { ProvidersWrapper } from "@/components/providers-wrapper";
import { auth } from "@/auth";
import { detectUserLanguage } from "@/lib/i18n/detect-user-language";
import { loadTranslations } from "@/lib/i18n/load-translations";
export default async function MainLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
// Run auth + language detection in parallel
// Run auth + language detection + translation loading in parallel
const [session, initialLanguage] = await Promise.all([
auth(),
detectUserLanguage(),
]);
// Load initial translations server-side to prevent hydration mismatch
const initialTranslations = await loadTranslations(initialLanguage);
return (
<ProvidersWrapper initialLanguage={initialLanguage}>
<ProvidersWrapper initialLanguage={initialLanguage} initialTranslations={initialTranslations}>
<div className="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-white overflow-hidden h-screen flex flex-col">
{/* Top Navigation - Style Keep */}
<HeaderWrapper user={session?.user} />
@@ -24,7 +28,7 @@ export default async function MainLayout({
{/* Main Layout */}
<div className="flex flex-1 overflow-hidden">
{/* Sidebar Navigation - Style Keep */}
<Sidebar className="w-64 flex-none flex-col bg-white dark:bg-[#1e2128] border-r border-slate-200 dark:border-slate-800 overflow-y-auto hidden md:flex" user={session?.user} />
<Sidebar className="w-64 flex-none flex-col bg-white dark:bg-[#1e2128] border-e border-slate-200 dark:border-slate-800 overflow-y-auto hidden md:flex" user={session?.user} />
{/* Main Content Area */}
<main className="flex min-h-0 flex-1 flex-col overflow-y-auto bg-background-light dark:bg-background-dark p-4 scroll-smooth">