Update Hebrew RTL and translation patches

- translate-he.js: Add tab button translations (Sub-Goals, Projects,
  Issues etc. with counts), fix whitespace normalization for matching,
  add translateButtonLabels() for React tab buttons
- rtl-override.css: Properties panel RTL fixes (row-reverse, text-align),
  timeline reverse order (newest first + comment box at top),
  truncation and panel width adjustments

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Chaim
2026-04-08 22:18:16 +00:00
parent 5160741248
commit 09f0327055
2 changed files with 743 additions and 3 deletions

View File

@@ -739,3 +739,325 @@ html[dir="rtl"] [class*="arrow-left"] svg,
html[dir="rtl"] [class*="arrow-right"] svg {
transform: scaleX(-1);
}
/* --------------------------------------------------------------------------
COMMENT HEADER — agent name + date row RTL alignment
-------------------------------------------------------------------------- */
html[dir="rtl"] .flex.items-center.justify-between.mb-1 {
direction: rtl;
}
html[dir="rtl"] [href*="/agents/"] {
direction: rtl;
}
/* --------------------------------------------------------------------------
ACTIVITY LOG — RTL alignment
-------------------------------------------------------------------------- */
html[dir="rtl"] [id^="activity-"] {
direction: rtl;
text-align: right;
}
html[dir="rtl"] [id^="activity-"] .flex-1 {
text-align: right;
}
html[dir="rtl"] [id^="activity-"] .flex.items-start.gap-2\.5 {
flex-direction: row-reverse;
}
/* --------------------------------------------------------------------------
TABLES inside comments — RTL alignment
-------------------------------------------------------------------------- */
html[dir="rtl"] .paperclip-markdown table {
direction: rtl;
text-align: right;
}
html[dir="rtl"] .paperclip-markdown table th,
html[dir="rtl"] .paperclip-markdown table td {
text-align: right;
}
html[dir="rtl"] .paperclip-markdown {
direction: rtl;
text-align: right;
}
/* --------------------------------------------------------------------------
GLOBAL RTL — all flex rows with gap should be RTL
-------------------------------------------------------------------------- */
html[dir="rtl"] [id^="run-"],
html[dir="rtl"] [id^="activity-"],
html[dir="rtl"] [id^="comment-"] {
direction: rtl;
}
html[dir="rtl"] [id^="run-"] .flex,
html[dir="rtl"] [id^="activity-"] .flex,
html[dir="rtl"] [id^="comment-"] .flex {
direction: rtl;
}
html[dir="rtl"] [id^="run-"] .flex.items-center {
flex-direction: row-reverse;
}
html[dir="rtl"] [id^="run-"] .flex.items-center.gap-2\.5 {
flex-direction: row-reverse;
}
html[dir="rtl"] .min-w-0.flex-1 {
text-align: right;
direction: rtl;
}
/* Inner flex rows inside run/activity items — text flows RTL */
html[dir="rtl"] .min-w-0.flex-1 > .flex {
direction: rtl;
justify-content: flex-start;
}
/* The outer row: avatar on right, content on left */
html[dir="rtl"] .flex.items-center.gap-2\.5.py-1\.5 {
direction: rtl;
}
/* Same for items-start variant (activity log) */
html[dir="rtl"] .flex.items-start.gap-2\.5.py-1\.5 {
direction: rtl;
}
/* --------------------------------------------------------------------------
ACTIVITY TAB — global RTL for all activity content
-------------------------------------------------------------------------- */
html[dir="rtl"] [id*="-content-activity"] {
direction: rtl;
text-align: right;
}
html[dir="rtl"] [id*="-content-activity"] .flex {
direction: rtl;
}
html[dir="rtl"] [id*="-content-activity"] .flex.items-center,
html[dir="rtl"] [id*="-content-activity"] .flex.items-start {
direction: rtl;
}
html[dir="rtl"] [id*="-content-activity"] .min-w-0 {
text-align: right;
}
/* --------------------------------------------------------------------------
PROPERTIES PANEL — global RTL
-------------------------------------------------------------------------- */
html[dir="rtl"] [data-slot="sheet-content"],
html[dir="rtl"] [role="dialog"] {
direction: rtl;
text-align: right;
}
html[dir="rtl"] [data-slot="sheet-content"] .flex,
html[dir="rtl"] [role="dialog"] .flex {
direction: rtl;
}
html[dir="rtl"] [data-slot="sheet-content"] label,
html[dir="rtl"] [role="dialog"] label {
text-align: right;
}
/* --------------------------------------------------------------------------
GLOBAL CATCH-ALL — any remaining LTR flex containers in main content
-------------------------------------------------------------------------- */
html[dir="rtl"] main {
direction: rtl;
}
html[dir="rtl"] main .flex.items-center {
direction: rtl;
}
html[dir="rtl"] main .flex.items-start {
direction: rtl;
}
html[dir="rtl"] main .min-w-0 {
text-align: right;
}
html[dir="rtl"] main .space-y-1\.5,
html[dir="rtl"] main .space-y-2,
html[dir="rtl"] main .space-y-3,
html[dir="rtl"] main .space-y-4 {
direction: rtl;
text-align: right;
}
/* --------------------------------------------------------------------------
PROPERTIES SIDEBAR — the p-4 container with property rows
-------------------------------------------------------------------------- */
html[dir="rtl"] .p-4 .space-y-4,
html[dir="rtl"] .p-4 .space-y-1 {
direction: rtl;
text-align: right;
}
/* Property row: label (w-20) on right, value on left */
html[dir="rtl"] .p-4 .flex.items-center.gap-3.py-1\.5 {
direction: rtl;
}
/* The label span */
html[dir="rtl"] .p-4 .shrink-0.w-20 {
text-align: right;
}
/* --------------------------------------------------------------------------
BREADCRUMB — RTL direction + flip chevron separator
-------------------------------------------------------------------------- */
html[dir="rtl"] [data-slot="breadcrumb"] {
direction: rtl;
}
html[dir="rtl"] [data-slot="breadcrumb-list"] {
direction: rtl;
}
html[dir="rtl"] [data-slot="breadcrumb-separator"] svg {
transform: scaleX(-1);
}
/* Top header bar */
html[dir="rtl"] .border-b.border-border .flex.items-center {
direction: rtl;
}
/* --------------------------------------------------------------------------
FILTER BAR — the "For [assignee] in [project]" row
-------------------------------------------------------------------------- */
html[dir="rtl"] .overflow-x-auto .inline-flex.items-center.gap-2 {
direction: rtl;
}
/* --------------------------------------------------------------------------
PLUGIN PAGE + CARDS — RTL for all card content
-------------------------------------------------------------------------- */
html[dir="rtl"] [data-slot="tabs"][dir="ltr"] {
direction: rtl !important;
}
html[dir="rtl"] [data-slot="card"],
html[dir="rtl"] [data-slot="card-header"],
html[dir="rtl"] [data-slot="card-content"],
html[dir="rtl"] [data-slot="card-title"] {
direction: rtl;
text-align: right;
}
html[dir="rtl"] [data-slot="card-content"] .flex.justify-between {
direction: rtl;
}
html[dir="rtl"] [data-slot="card-content"] .flex.items-center.justify-between {
direction: rtl;
}
html[dir="rtl"] [data-slot="card-content"] .grid {
direction: rtl;
}
html[dir="rtl"] [data-slot="card-description"] {
text-align: right;
}
/* Status change row: reverse order so old→new reads RTL */
html[dir="rtl"] .flex.flex-wrap.items-center.gap-2.text-sm {
direction: rtl;
}
/* Flip the arrow in status change rows */
html[dir="rtl"] .flex.flex-wrap.items-center.gap-2.text-sm .lucide-arrow-right {
transform: scaleX(-1);
}
/* --------------------------------------------------------------------------
PROPERTIES PANEL (aside) - RTL fixes
-------------------------------------------------------------------------- */
/* Fix truncation direction: show start of text, not end */
html[dir="rtl"] aside .truncate {
direction: rtl;
text-align: right;
text-overflow: ellipsis;
}
/* Widen properties panel to fill the gap */
html[dir="rtl"] aside.hidden.md\:flex {
width: 460px !important;
}
html[dir="rtl"] aside .w-80 {
width: 460px;
min-width: 460px;
}
/* Ensure property labels don't shrink too much */
html[dir="rtl"] aside .shrink-0.w-20 {
width: 5.5rem;
}
/* Properties panel rows: reverse flex so label is on the right */
html[dir="rtl"] aside .flex.items-center.gap-3.py-1\.5 {
flex-direction: row-reverse;
}
/* Property value containers: align right */
html[dir="rtl"] aside .flex.items-center.gap-1\.5.min-w-0.flex-1 {
flex-direction: row-reverse;
justify-content: flex-start;
}
/* Property buttons inside panel: reverse icon+text order */
html[dir="rtl"] aside .flex.items-center.gap-1\.5.min-w-0.flex-1 button {
flex-direction: row-reverse;
}
/* Panel header */
html[dir="rtl"] aside .flex.items-center.justify-between {
flex-direction: row-reverse;
}
/* Panel text alignment */
html[dir="rtl"] aside .text-sm {
text-align: right;
}
html[dir="rtl"] aside .text-xs.text-muted-foreground.shrink-0 {
text-align: right;
}
/* --------------------------------------------------------------------------
TIMELINE + COMMENT BOX - comment box at top, newest first
-------------------------------------------------------------------------- */
/* The tab content container that holds timeline + comment box: reverse order */
html[dir="rtl"] [role="tabpanel"][id*="content-comments"] > .space-y-4 {
display: flex;
flex-direction: column-reverse;
}
/* Also target the parent of timeline + comment box */
html[dir="rtl"] main .space-y-6 > .space-y-4:last-child {
display: flex;
flex-direction: column-reverse;
gap: 1rem;
}
/* Reverse timeline items so newest appears first */
html[dir="rtl"] main .space-y-4 > .space-y-4 {
display: flex;
flex-direction: column-reverse;
gap: 1rem;
}