fix(web): Fix text direction on filter panel

[brendan-kellam]

Fixes #463

Summary by CodeRabbit

• Style
  • Standardized rendering of file paths and display names by wrapping text in spans for consistent truncation and alignment across the app (Code Preview, Filters, Chat file list).
  • Improved readability of truncated content by forcing left‑to‑right rendering for direct children of elements using truncate-start, enhancing clarity for paths in RTL layouts.
  • Preserves existing click, tooltip, and navigation behaviors; purely visual refinements.

---

Note

Improves readability and consistency of truncated paths/names, addressing RTL and special-character direction issues.

• Add CSS rule to force LTR (unicode-bidi: embed) for direct children of truncate-start
• Wrap path/display text in <span> within codePreview.tsx, filter panel entry.tsx, and chat tools shared.tsx to cooperate with truncation
• Update CHANGELOG.md with the fix entry

^{Written by Cursor Bugbot for commit 28e4624. This will update automatically on new commits. Configure here.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Adds a child-level LTR direction override via CSS for .truncate-start containers and wraps displayed text in spans in several components (filter panel entry, code preview header, chat file list) without altering logic, events, or exports.

Changes

Cohort / File(s)	Summary
Bidi direction override packages/web/src/app/globals.css	Adds .truncate-start > * { direction: ltr; unicode-bidi: embed; } to enforce LTR rendering for immediate children while keeping parent RTL for truncation.
Filter panel text wrapper packages/web/src/app/[domain]/search/components/filterPanel/entry.tsx	Wraps displayName text in an inner <span> within the TooltipTrigger’s <p>, enabling targeted LTR styling.
Code/file path wrappers packages/web/src/app/[domain]/search/components/codePreviewPanel/codePreview.tsx, packages/web/src/features/chat/components/chatThread/tools/shared.tsx	Wraps rendered file path strings in <span> elements inside existing clickable/link containers; no logic or behavior changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Assessment against linked issues

Objective	Addressed	Explanation
Fix language names with symbols (e.g., C++, C#) displaying reversed in Filter by Language pane due to .truncate-start RTL direction (#463)	✅

Poem

A nibble of CSS, a whisker of span,
I flipped the script without a grand plan.
C++ hops forward, C# sings true—
No backwards bunnies in this UI zoo.
With LTR tracks and tidy DOM,
I thump my paws: “Bug be gone!”

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/web/src/app/[domain]/search/components/filterPanel/entry.tsx (1)

55-55: Correct fix: child-level LTR wrapper enables proper rendering for C++/C# under left-truncation

Wrapping the text in a child element is the right approach to pair with .truncate-start > * { direction: ltr; ... } and fixes the reversed-language issue without breaking left-side ellipsis.

You can drop redundant classes because truncate-start already applies white-space: nowrap, overflow: hidden, and text-overflow: ellipsis.

-<p className="overflow-hidden text-ellipsis whitespace-nowrap truncate-start"><span>{displayName}</span></p>
+<p className="truncate-start"><span>{displayName}</span></p>

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between b36de34 and 7341a49.

📒 Files selected for processing (4)

• packages/web/src/app/[domain]/search/components/codePreviewPanel/codePreview.tsx (1 hunks)
• packages/web/src/app/[domain]/search/components/filterPanel/entry.tsx (1 hunks)
• packages/web/src/app/globals.css (1 hunks)
• packages/web/src/features/chat/components/chatThread/tools/shared.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*

📄 CodeRabbit Inference Engine (.cursor/rules/style.mdc)

Filenames should always be camelCase. Exception: if there are filenames in the same directory with a format other than camelCase, use that format to keep things consistent.

Files:

• packages/web/src/app/[domain]/search/components/filterPanel/entry.tsx
• packages/web/src/app/[domain]/search/components/codePreviewPanel/codePreview.tsx
• packages/web/src/features/chat/components/chatThread/tools/shared.tsx
• packages/web/src/app/globals.css

🔇 Additional comments (2)

packages/web/src/features/chat/components/chatThread/tools/shared.tsx (1)

35-35: LGTM: span wrapper aligns with the child-direction override

This pairs correctly with the new CSS rule to keep left-ellipsis behavior while rendering the path LTR inside the truncated container.

packages/web/src/app/[domain]/search/components/codePreviewPanel/codePreview.tsx (1)

224-224: LGTM: child span ensures correct LTR rendering inside left-truncation container

Keeps left-side ellipsis behavior intact and fixes symbol ordering (e.g., ++, #) in the header path. Retaining the title attribute for hover is a nice touch.