Skip to content

fix(web): Fix text direction on filter panel #474

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(web): Fix text direction on filter panel #474

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/web/src/app/[domain]/search/components/codePreviewPanel/codePreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,7 @@ export const CodePreview = ({
}}
title={file.filepath}
>
{file.filepath}
<span>{file.filepath}</span>
</span>
</div>

Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/app/[domain]/search/components/filterPanel/entry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const Entry = ({
<div className="overflow-hidden flex-1 min-w-0">
<Tooltip>
<TooltipTrigger asChild>
<p className="overflow-hidden text-ellipsis whitespace-nowrap truncate-start">{displayName}</p>
<p className="overflow-hidden text-ellipsis whitespace-nowrap truncate-start"><span>{displayName}</span></p>
</TooltipTrigger>
<TooltipContent side="right" className="max-w-sm">
<p className="font-mono text-sm break-all whitespace-pre-wrap">{displayName}</p>
Expand Down
5 changes: 5 additions & 0 deletions packages/web/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,11 @@
text-overflow: ellipsis;
}

.truncate-start > * {
direction: ltr;
unicode-bidi: embed;
}

Comment on lines +314 to +318
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Direction override looks good; consider unicode-bidi: isolate and verify class usage across the app

The child-level override is the right lever to preserve left-ellipsis (outer RTL) while fixing symbol order (inner LTR). Two follow-ups to consider:

  • Using unicode-bidi: isolate instead of embed typically reduces bidi interactions with neighboring content. It’s a safe tweak for paths/language labels.
  • Since this affects all .truncate-start usages globally, verify that every instance actually wraps text in a single child element (as done in this PR), otherwise the override won’t apply.

If you’d like to try the isolate variant:

-.truncate-start > * {
-  direction: ltr;
-  unicode-bidi: embed;
-}
+.truncate-start > * {
+  direction: ltr;
+  unicode-bidi: isolate;
+}

To audit .truncate-start usage and quickly spot places that may still render text directly (without a child element), run:

🏁 Script executed:

#!/bin/bash
# List all occurrences of `truncate-start` with nearby context
rg -n -C3 --type tsx --type ts --type jsx --type js 'truncate-start' | sed 's/^\(.*\)$/\1\n---/'

echo
echo "Heuristic: show lines where `truncate-start` appears and the next non-empty line doesn't open a child tag (may indicate direct text). Review manually."
rg -nPU --type tsx --type jsx '(?s)className="[^"]*truncate-start[^"]*".*?\n\s*([^<\s])' -C0

Length of output: 660

🏁 Script executed:

#!/bin/bash
# Retry searching for `truncate-start` using glob-based file matching

echo "Occurrences of 'truncate-start' with context:"
rg -n -C3 -g '*.{tsx,ts,jsx,js}' 'truncate-start' | sed 's/^\(.*\)$/\1\n---/'

echo
echo "Heuristic check: show each `.truncate-start` usage and two lines after the opening tag to spot direct text vs. child element:"
rg -n -A2 -g '*.{tsx,jsx}' 'className\s*=\s*"[^"]*truncate-start[^"]*"'

Length of output: 4869

Wrap direct .truncate-start elements to ensure the override applies

Two instances apply the truncate-start class directly to the text-bearing element, so the child‐selector override (.truncate-start > *) won’t take effect. Please wrap their contents in a single child node:

• packages/web/src/app/[domain]/search/components/codePreviewPanel/codePreview.tsx (≈ line 213)

- <span className="block truncate-start text-sm font-mono cursor-pointer hover:underline" onClick={…}>
-   {filePath}
- </span>
+ <span className="block truncate-start text-sm font-mono cursor-pointer hover:underline" onClick={…}>
+   <span>{filePath}</span>
+ </span>

• packages/web/src/features/chat/components/chatThread/tools/shared.tsx (≈ line 26)

- <Link className="text-sm truncate-start" href={…}>
-   {path}
- </Link>
+ <Link className="text-sm truncate-start" href={…}>
+   <span>{path}</span>
+ </Link>

The existing entry.tsx filter panel already wraps its text correctly.

Optional: to further isolate bidi behavior, you can switch from embed to isolate in globals.css:

 .truncate-start > * {
   direction: ltr;
-  unicode-bidi: embed;
+  unicode-bidi: isolate;
 }
🤖 Prompt for AI Agents 
In packages/web/src/app/globals.css around lines 314 to 318, the child-selector
override `.truncate-start > * { direction: ltr; unicode-bidi: embed; }` won’t
apply when `.truncate-start` is applied directly to a text-bearing element; wrap
the direct `.truncate-start` usages in a single child node so the selector
targets that child. Concretely: update
packages/web/src/app/[domain]/search/components/codePreviewPanel/codePreview.tsx
(≈ line 213) and
packages/web/src/features/chat/components/chatThread/tools/shared.tsx (≈ line
26) to wrap the existing text content with one element (e.g., a span/div) inside
the element that has `.truncate-start`. Optionally, in globals.css you can
change `unicode-bidi: embed` to `unicode-bidi: isolate` if you want stronger
bidi isolation.

@layer base {
* {
@apply border-border;
Expand Down
2 changes: 1 addition & 1 deletion packages/web/src/features/chat/components/chatThread/tools/shared.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const FileListItem = ({
pathType: 'blob',
})}
>
{path}
<span>{path}</span>
</Link>
</div>
)
Expand Down