From b850597fb718b3c1e5960dd1ac2bc32a997b141d Mon Sep 17 00:00:00 2001
From: YasserYG8 <yasserg4e@gmail.com>
Date: Sat, 27 Jun 2026 12:07:15 +0100
Subject: [PATCH] fix: force LTR direction and layout for code elements in
 RTL/Arabic locales

---
 src/app/[lang]/layout.tsx           | 11 +++++------
 src/app/globals.css                 | 10 ++++++++++
 src/components/ui/CodeWorkspace.tsx |  2 +-
 3 files changed, 16 insertions(+), 7 deletions(-)
diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx
index d58ee3f..4f674cd 100644
--- a/src/app/[lang]/layout.tsx
+++ b/src/app/[lang]/layout.tsx
@@ -49,16 +49,15 @@ export default async function RootLayout({
       className={isDark ? "dark" : ""}
       suppressHydrationWarning
     >
-      <head>
-        <script
-          nonce={nonce}
+      <head />
+      <body>
+        <div
           suppressHydrationWarning
+          style={{ display: "none" }}
           dangerouslySetInnerHTML={{
-            __html: `(function(){try{var t=localStorage.getItem('theme');var d=t?t==='dark':matchMedia('(prefers-color-scheme:dark)').matches;if(d)document.documentElement.classList.add('dark');}catch(e){}})();`,
+            __html: `<script nonce="${nonce}">(function(){try{var t=localStorage.getItem('theme');var d=t?t==='dark':matchMedia('(prefers-color-scheme:dark)').matches;if(d)document.documentElement.classList.add('dark');}catch(e){}})();</script>`,
           }}
         />
-      </head>
-      <body>
         <div className="grid-bg" aria-hidden="true" />
         <Header
           lang={lang}
diff --git a/src/app/globals.css b/src/app/globals.css
index 415aebd..5f9bbae 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -280,3 +280,13 @@ html.dark .react-flow__node.selected {
   border-color: var(--color-brand-dark) !important;
   box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4) !important;
 }
+
+/* Force code-related blocks to stay Left-to-Right in all locales */
+pre,
+code,
+textarea.font-mono,
+.font-mono textarea {
+  direction: ltr !important;
+  unicode-bidi: plaintext !important;
+  text-align: left !important;
+}
diff --git a/src/components/ui/CodeWorkspace.tsx b/src/components/ui/CodeWorkspace.tsx
index 7bc23bb..31ac7a9 100644
--- a/src/components/ui/CodeWorkspace.tsx
+++ b/src/components/ui/CodeWorkspace.tsx
@@ -422,7 +422,7 @@ export default function CodeWorkspace({
 
         {/* Body */}
         {mode === "snippet" ? (
-          <div className="relative flex flex-1 overflow-hidden font-mono text-[13px] leading-[1.7]">
+          <div dir="ltr" className="relative flex flex-1 overflow-hidden font-mono text-[13px] leading-[1.7]">
             <div
               ref={gutterRef}
               aria-hidden="true"
