Description
The file path in the code preview window shows inconsistent left padding when truncated. Long file names sometimes render with ~30% padding on the left, and this behavior is inconsistent when re-opening the preview for the same file.
Root Cause
The .truncate-start CSS class uses direction: rtl to enable start-side text truncation. When combined with the dynamic gutter width calculation, this creates inconsistent rendering of the flex container holding the file path.
Reproduction
- Open a code preview for a file with a long path
- Observe large left padding (~30% of width)
- Close and reopen the same preview
- Padding may change inconsistently
Related
Fixes #103
Technical Details
The issue is in packages/web/src/app/(app)/search/components/codePreviewPanel/codePreview.tsx lines 128-143, where the file path container uses flex-1 overflow-hidden with a truncate-start span inside that has direction: rtl.
The fix should ensure the truncation works consistently without the layout shift caused by RTL direction interactions with flex layout.
Description
The file path in the code preview window shows inconsistent left padding when truncated. Long file names sometimes render with ~30% padding on the left, and this behavior is inconsistent when re-opening the preview for the same file.
Root Cause
The
.truncate-startCSS class usesdirection: rtlto enable start-side text truncation. When combined with the dynamic gutter width calculation, this creates inconsistent rendering of the flex container holding the file path.Reproduction
Related
Fixes #103
Technical Details
The issue is in
packages/web/src/app/(app)/search/components/codePreviewPanel/codePreview.tsxlines 128-143, where the file path container usesflex-1 overflow-hiddenwith atruncate-startspan inside that hasdirection: rtl.The fix should ensure the truncation works consistently without the layout shift caused by RTL direction interactions with flex layout.