From 2924f716d45507fe2910e459912dbec0a989b46e Mon Sep 17 00:00:00 2001 From: Chaim Date: Sat, 25 Apr 2026 13:51:19 +0000 Subject: [PATCH] =?UTF-8?q?Fix:=20harden=20RTL=20=E2=80=94=20tables=20and?= =?UTF-8?q?=20tabs=20were=20rendering=20left-to-right?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Five-layer defense so that no single library/browser quirk can flip the layout back to LTR: 1. in addition to — some libs read document.body.dir, not document.documentElement.dir. 2. Explicit `direction: rtl` on html, body in the @layer base CSS. 3. from @radix-ui/react-direction wrapping the React tree, so every Radix primitive (Tabs, Dialog, Select, Popover, Toast) gets RTL context — Radix's useDirection defaults to "ltr" without it. 4. shadcn Tabs wrapper now defaults its dir prop to "rtl" — redundant with the provider above, but defends against a future provider removal silently breaking Tabs. 5. dir="rtl" set explicitly on each element. Fixes the symptom seen on the live site: deals/appraisals tables had תאריך (the first
in the JSX) rendering on the LEFT instead of the RIGHT, and Tabs flowed עסקאות→שמאי left-to-right instead of the expected right-to-left. Co-Authored-By: Claude Opus 4.7 (1M context) --- web/index.html | 2 +- web/package-lock.json | 1 + web/package.json | 1 + web/src/components/AppraisalsTable.tsx | 2 +- web/src/components/DealsTable.tsx | 2 +- web/src/components/ui/tabs.tsx | 11 ++++++++++- web/src/index.css | 1 + web/src/main.tsx | 9 ++++++--- 8 files changed, 22 insertions(+), 7 deletions(-) diff --git a/web/index.html b/web/index.html index 2733611..37d56ac 100644 --- a/web/index.html +++ b/web/index.html @@ -12,7 +12,7 @@ rel="stylesheet" /> - +
diff --git a/web/package-lock.json b/web/package-lock.json index 0e55497..4315729 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -8,6 +8,7 @@ "name": "nadlan-mcp-web", "version": "0.1.0", "dependencies": { + "@radix-ui/react-direction": "^1.1.1", "@radix-ui/react-icons": "^1.3.2", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-slot": "^1.1.1", diff --git a/web/package.json b/web/package.json index 0b2d5ee..0a14481 100644 --- a/web/package.json +++ b/web/package.json @@ -11,6 +11,7 @@ "lint": "eslint . --ext ts,tsx --max-warnings=0" }, "dependencies": { + "@radix-ui/react-direction": "^1.1.1", "@radix-ui/react-icons": "^1.3.2", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-slot": "^1.1.1", diff --git a/web/src/components/AppraisalsTable.tsx b/web/src/components/AppraisalsTable.tsx index db0b987..4e86f0d 100644 --- a/web/src/components/AppraisalsTable.tsx +++ b/web/src/components/AppraisalsTable.tsx @@ -24,7 +24,7 @@ export function AppraisalsTable({ decisions, totalInDb }: Props) { נמצאו {decisions.length} מתוך {totalInDb.toLocaleString("he-IL")} החלטות במאגר
- +
diff --git a/web/src/components/DealsTable.tsx b/web/src/components/DealsTable.tsx index def7d86..b63fdf4 100644 --- a/web/src/components/DealsTable.tsx +++ b/web/src/components/DealsTable.tsx @@ -22,7 +22,7 @@ export function DealsTable({ deals }: Props) { return (
-
תאריך הכרעה
+
diff --git a/web/src/components/ui/tabs.tsx b/web/src/components/ui/tabs.tsx index 8d6dbfc..dd500f5 100644 --- a/web/src/components/ui/tabs.tsx +++ b/web/src/components/ui/tabs.tsx @@ -2,7 +2,16 @@ import * as React from "react"; import * as TabsPrimitive from "@radix-ui/react-tabs"; import { cn } from "../../lib/utils"; -const Tabs = TabsPrimitive.Root; +// Default to dir="rtl" so TabsList flexbox flows right-to-left and the +// Roving-focus arrow keys are RTL-correct, even if a future caller +// forgets to pass a dir prop or to wrap the tree in DirectionProvider. +const Tabs = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ dir = "rtl", ...props }, ref) => ( + +)); +Tabs.displayName = TabsPrimitive.Root.displayName; const TabsList = React.forwardRef< React.ElementRef, diff --git a/web/src/index.css b/web/src/index.css index 4bdc21d..f606d5f 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -31,6 +31,7 @@ body { @apply bg-background text-foreground antialiased; font-family: "Heebo", system-ui, -apple-system, sans-serif; + direction: rtl; } /* Tailwind's default scrollbar gutters cause RTL drift; force stable. */ html { diff --git a/web/src/main.tsx b/web/src/main.tsx index c851b84..273d2c9 100644 --- a/web/src/main.tsx +++ b/web/src/main.tsx @@ -1,5 +1,6 @@ import React from "react"; import ReactDOM from "react-dom/client"; +import { DirectionProvider } from "@radix-ui/react-direction"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import App from "./App"; import "./index.css"; @@ -16,8 +17,10 @@ const queryClient = new QueryClient({ ReactDOM.createRoot(document.getElementById("root")!).render( - - - + + + + + );
תאריך