Fix: harden RTL — tables and tabs were rendering left-to-right · 2924f716d4 - nadlan-mcp

Fix: harden RTL — tables and tabs were rendering left-to-right

Five-layer defense so that no single library/browser quirk can flip the
layout back to LTR:

1. <body dir="rtl"> in addition to <html dir="rtl"> — some libs read
   document.body.dir, not document.documentElement.dir.
2. Explicit `direction: rtl` on html, body in the @layer base CSS.
3. <DirectionProvider dir="rtl"> 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 <table> element.

Fixes the symptom seen on the live site: deals/appraisals tables had
תאריך (the first <th> 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) <noreply@anthropic.com>

This commit is contained in:

Chaim Marcus

2026-04-25 13:51:19 +00:00

parent 97bbb852ec

commit 2924f716d4

8 changed files with 22 additions and 7 deletions

									
										web/src/components/DealsTable.tsx
									
		+1
		-1
	
												View File
												
				@@ -22,7 +22,7 @@ export function DealsTable({ deals }: Props) {

				  return (

				    <div className="overflow-x-auto rounded-md border">

				      <table className="w-full text-sm">

				      <table dir="rtl" className="w-full text-sm">

				        <thead className="bg-muted text-muted-foreground">

				          <tr>

				            <th className="p-3 text-start font-medium">תאריך</th>