ezer-mishpati/legal-ai
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Fix RTL alignment in DocumentsPanel

Browse Source 
Force the title + meta column to the inline-start (visual right in
RTL) and the doc_type badge to the inline-end (visual left). The
previous layout used justify-between with an ambient dir="rtl"
inherited from <html>, but the Radix ScrollArea Viewport was eating
the direction context and flipping the row to LTR.

Fix: set dir="rtl" explicitly on both ScrollArea and the inner ul,
drop justify-between, and use ms-auto on the badge so it grows its
inline-start margin regardless of ambient direction. Title column
gets an explicit text-right for good measure.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Chaim
2026-04-11 18:34:09 +00:00
parent 916360e9b2
commit aa0e608a4a
1 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web-ui/src/components/cases/documents-panel.tsx
View File

@@ -70,8 +70,8 @@ export function DocumentsPanel({ data }: { data?: CaseDetail }) {
}
return (
<ScrollArea className="max-h-[520px]">
<ul className="divide-y divide-rule">
<ScrollArea className="max-h-[520px]" dir="rtl">
<ul className="divide-y divide-rule" dir="rtl">
{docs.map((doc) => {
const displayName = doc.title || filenameFromPath(doc.file_path);
const statusDone =
@@ -80,9 +80,10 @@ export function DocumentsPanel({ data }: { data?: CaseDetail }) {
return (
<li
key={doc.id}
className="py-3 flex items-start justify-between gap-4 hover:bg-gold-wash/30 transition-colors px-2 -mx-2 rounded"
className="py-3 flex items-start gap-4 hover:bg-gold-wash/30 transition-colors px-2 -mx-2 rounded"
>
<div className="flex-1 min-w-0 space-y-0.5">
{/* Title + meta — flex-1 keeps it glued to the start (right in RTL) */}
<div className="flex-1 min-w-0 space-y-0.5 text-right">
<div className="text-ink font-medium truncate" title={displayName}>
{displayName}
</div>
@@ -98,10 +99,11 @@ export function DocumentsPanel({ data }: { data?: CaseDetail }) {
)}
</div>
</div>
{/* Type badge — ms-auto forces it to the inline-end (= left in RTL) */}
{doc.doc_type && (
<Badge
variant="outline"
className={`rounded-full px-2 py-0.5 text-[0.7rem] shrink-0 ${doctypeTone(doc.doc_type)}`}
className={`rounded-full px-2 py-0.5 text-[0.7rem] shrink-0 ms-auto ${doctypeTone(doc.doc_type)}`}
>
{doctypeLabel(doc.doc_type)}
</Badge>