ezer-mishpati/legal-ai
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity
Files
11c73a7c605a0472ce4b45dff7fb86684892e342
legal-ai/scripts/paperclip-assets/rtl-override.css
Chaim 11c73a7c60 CEO: add email notifications, subtask parentId, and Paperclip UI assets 
- CEO agent now sends email via notify.py when awaiting human response
- CEO creates child issues (parentId) instead of flat disconnected issues
- Fix notify.py email address to chaim+paperclip@marcus-law.co.il
- Move Paperclip UI assets (RTL CSS + Hebrew JS) into repo under scripts/
- Add deploy.sh script to push assets to live Paperclip instance
- Fix comment box positioning: newest comment on top, input below it

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 15:55:55 +00:00

1046 lines
35 KiB
CSS
Raw Blame History

/* ==========================================================================
Paperclip AI - RTL Override for Hebrew (dir="rtl")
Generated from analysis of index-CYurTMty.css (Tailwind v4.1.18 + MDXEditor)
Scoped under html[dir="rtl"] to apply only in RTL mode.
========================================================================== */
/* --------------------------------------------------------------------------
1. GLOBAL DIRECTION
-------------------------------------------------------------------------- */
html[dir="rtl"] {
direction: rtl;
}
html[dir="rtl"] body {
text-align: right;
}
/* --------------------------------------------------------------------------
2. TAILWIND UTILITY CLASSES - Padding Left/Right Swap
.pl-* -> padding-right, .pr-* -> padding-left
-------------------------------------------------------------------------- */
html[dir="rtl"] .pl-1 { padding-left: 0; padding-right: calc(var(--spacing) * 1); }
html[dir="rtl"] .pl-2 { padding-left: 0; padding-right: calc(var(--spacing) * 2); }
html[dir="rtl"] .pl-3 { padding-left: 0; padding-right: calc(var(--spacing) * 3); }
html[dir="rtl"] .pl-4 { padding-left: 0; padding-right: calc(var(--spacing) * 4); }
html[dir="rtl"] .pl-5 { padding-left: 0; padding-right: calc(var(--spacing) * 5); }
html[dir="rtl"] .pl-5\.5 { padding-left: 0; padding-right: calc(var(--spacing) * 5.5); }
html[dir="rtl"] .pl-6 { padding-left: 0; padding-right: calc(var(--spacing) * 6); }
html[dir="rtl"] .pl-7 { padding-left: 0; padding-right: calc(var(--spacing) * 7); }
html[dir="rtl"] .pl-8 { padding-left: 0; padding-right: calc(var(--spacing) * 8); }
html[dir="rtl"] .pr-1 { padding-right: 0; padding-left: calc(var(--spacing) * 1); }
html[dir="rtl"] .pr-2 { padding-right: 0; padding-left: calc(var(--spacing) * 2); }
html[dir="rtl"] .pr-3 { padding-right: 0; padding-left: calc(var(--spacing) * 3); }
html[dir="rtl"] .pr-6 { padding-right: 0; padding-left: calc(var(--spacing) * 6); }
html[dir="rtl"] .pr-8 { padding-right: 0; padding-left: calc(var(--spacing) * 8); }
html[dir="rtl"] .pr-10 { padding-right: 0; padding-left: calc(var(--spacing) * 10); }
/* data-inset padding override */
html[dir="rtl"] .data-\[inset\]\:pl-8[data-inset] {
padding-left: 0;
padding-right: calc(var(--spacing) * 8);
}
/* Responsive padding overrides */
html[dir="rtl"] .sm\:pl-1 { padding-left: 0; padding-right: calc(var(--spacing) * 1); }
html[dir="rtl"] .sm\:pr-3 { padding-right: 0; padding-left: calc(var(--spacing) * 3); }
/* --------------------------------------------------------------------------
3. TAILWIND UTILITY CLASSES - Margin Left/Right Swap
.ml-* -> margin-right, .mr-* -> margin-left
-------------------------------------------------------------------------- */
html[dir="rtl"] .-ml-1\.5 { margin-left: 0; margin-right: calc(var(--spacing) * -1.5); }
html[dir="rtl"] .ml-0\.5 { margin-left: 0; margin-right: calc(var(--spacing) * 0.5); }
html[dir="rtl"] .ml-1 { margin-left: 0; margin-right: calc(var(--spacing) * 1); }
html[dir="rtl"] .ml-1\.5 { margin-left: 0; margin-right: calc(var(--spacing) * 1.5); }
html[dir="rtl"] .ml-2 { margin-left: 0; margin-right: calc(var(--spacing) * 2); }
html[dir="rtl"] .ml-3 { margin-left: 0; margin-right: calc(var(--spacing) * 3); }
html[dir="rtl"] .ml-4 { margin-left: 0; margin-right: calc(var(--spacing) * 4); }
html[dir="rtl"] .ml-5 { margin-left: 0; margin-right: calc(var(--spacing) * 5); }
html[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .mr-1 { margin-right: 0; margin-left: calc(var(--spacing) * 1); }
html[dir="rtl"] .mr-1\.5 { margin-right: 0; margin-left: calc(var(--spacing) * 1.5); }
html[dir="rtl"] .mr-2 { margin-right: 0; margin-left: calc(var(--spacing) * 2); }
html[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }
/* file selector button margin */
html[dir="rtl"] .file\:mr-4::file-selector-button {
margin-right: 0;
margin-left: calc(var(--spacing) * 4);
}
/* Responsive margin overrides */
html[dir="rtl"] .sm\:mr-1 { margin-right: 0; margin-left: calc(var(--spacing) * 1); }
html[dir="rtl"] .md\:ml-auto { margin-left: 0; margin-right: auto; }
/* --------------------------------------------------------------------------
4. TAILWIND UTILITY CLASSES - Left/Right Position Swap
-------------------------------------------------------------------------- */
html[dir="rtl"] .left-0 { left: auto; right: calc(var(--spacing) * 0); }
html[dir="rtl"] .left-1\/2 { left: auto; right: 50%; }
html[dir="rtl"] .left-2 { left: auto; right: calc(var(--spacing) * 2); }
html[dir="rtl"] .left-2\.5 { left: auto; right: calc(var(--spacing) * 2.5); }
html[dir="rtl"] .left-3 { left: auto; right: calc(var(--spacing) * 3); }
html[dir="rtl"] .left-4 { left: auto; right: calc(var(--spacing) * 4); }
html[dir="rtl"] .left-\[-14px\] { left: auto; right: -14px; }
html[dir="rtl"] .left-\[50\%\] { left: auto; right: 50%; }
html[dir="rtl"] .-right-0\.5 { right: auto; left: calc(var(--spacing) * -0.5); }
html[dir="rtl"] .-right-2 { right: auto; left: calc(var(--spacing) * -2); }
html[dir="rtl"] .right-0 { right: auto; left: calc(var(--spacing) * 0); }
html[dir="rtl"] .right-1\.5 { right: auto; left: calc(var(--spacing) * 1.5); }
html[dir="rtl"] .right-2 { right: auto; left: calc(var(--spacing) * 2); }
html[dir="rtl"] .right-3 { right: auto; left: calc(var(--spacing) * 3); }
html[dir="rtl"] .right-4 { right: auto; left: calc(var(--spacing) * 4); }
html[dir="rtl"] .right-6 { right: auto; left: calc(var(--spacing) * 6); }
/* Responsive left positioning */
html[dir="rtl"] .sm\:left-3 { left: auto; right: calc(var(--spacing) * 3); }
/* --------------------------------------------------------------------------
5. TAILWIND UTILITY CLASSES - Text Align Swap
-------------------------------------------------------------------------- */
html[dir="rtl"] .text-left { text-align: right; }
html[dir="rtl"] .text-right { text-align: left; }
html[dir="rtl"] .sm\:text-left { text-align: right; }
html[dir="rtl"] .sm\:text-right { text-align: left; }
/* --------------------------------------------------------------------------
6. TAILWIND UTILITY CLASSES - Float Swap
-------------------------------------------------------------------------- */
html[dir="rtl"] .float-right { float: left; }
/* --------------------------------------------------------------------------
7. TAILWIND UTILITY CLASSES - Border Left/Right Swap
-------------------------------------------------------------------------- */
html[dir="rtl"] .border-l {
border-left-style: none;
border-left-width: 0;
border-right-style: var(--tw-border-style);
border-right-width: 1px;
}
html[dir="rtl"] .border-l-2 {
border-left-style: none;
border-left-width: 0;
border-right-style: var(--tw-border-style);
border-right-width: 2px;
}
html[dir="rtl"] .border-l-transparent {
border-left-color: initial;
border-right-color: #0000;
}
html[dir="rtl"] .border-r {
border-right-style: none;
border-right-width: 0;
border-left-style: var(--tw-border-style);
border-left-width: 1px;
}
/* Responsive border overrides */
html[dir="rtl"] .sm\:border-l {
border-left-style: none;
border-left-width: 0;
border-right-style: var(--tw-border-style);
border-right-width: 1px;
}
html[dir="rtl"] .lg\:border-r {
border-right-style: none;
border-right-width: 0;
border-left-style: var(--tw-border-style);
border-left-width: 1px;
}
/* --------------------------------------------------------------------------
8. TAILWIND UTILITY CLASSES - Rounded Left/Right Swap
-------------------------------------------------------------------------- */
html[dir="rtl"] .rounded-l-md {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: .5rem;
border-bottom-right-radius: .5rem;
}
html[dir="rtl"] .rounded-r-md {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: .5rem;
border-bottom-left-radius: .5rem;
}
html[dir="rtl"] .rounded-r-full {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 3.40282e38px;
border-bottom-left-radius: 3.40282e38px;
}
/* --------------------------------------------------------------------------
9. TAILWIND UTILITY CLASSES - TranslateX Flip
-------------------------------------------------------------------------- */
html[dir="rtl"] .-translate-x-1\/2 { --tw-translate-x: 50%; }
html[dir="rtl"] .-translate-x-4 { --tw-translate-x: calc(var(--spacing) * 4); }
html[dir="rtl"] .-translate-x-full { --tw-translate-x: 100%; }
html[dir="rtl"] .translate-x-0 { --tw-translate-x: calc(var(--spacing) * 0); }
html[dir="rtl"] .translate-x-0\.5 { --tw-translate-x: calc(var(--spacing) * -0.5); }
html[dir="rtl"] .translate-x-4\.5 { --tw-translate-x: calc(var(--spacing) * -4.5); }
html[dir="rtl"] .translate-x-5 { --tw-translate-x: calc(var(--spacing) * -5); }
html[dir="rtl"] .translate-x-\[-50\%\] { --tw-translate-x: 50%; }
/* --------------------------------------------------------------------------
10. RADIX UI - data-side tooltip/popover offset swap
-------------------------------------------------------------------------- */
html[dir="rtl"] .data-\[side\=left\]\:-translate-x-1[data-side=left] {
--tw-translate-x: calc(var(--spacing) * 1);
}
html[dir="rtl"] .data-\[side\=right\]\:translate-x-1[data-side=right] {
--tw-translate-x: calc(var(--spacing) * -1);
}
/* --------------------------------------------------------------------------
11. MDXEditor - Toolbar Components
-------------------------------------------------------------------------- */
/* Toolbar root - sticky, scrollable row */
html[dir="rtl"] [class*="_toolbarRoot_"] {
flex-direction: row-reverse;
}
/* Toolbar mode switch - push to left in RTL (was margin-left:auto) */
html[dir="rtl"] [class*="_toolbarModeSwitch_"] {
margin-left: 0;
margin-right: auto;
}
/* Toolbar separator - swap border sides */
html[dir="rtl"] [class*="_toolbarRoot_"] div[role="separator"] {
border-left: 1px solid var(--baseBase);
border-right: 1px solid var(--baseBorder);
}
/* Toolbar button adjacency spacing */
html[dir="rtl"] [class*="_toolbarButton_"] + [class*="_toolbarButton_"] {
margin-left: 0;
margin-right: var(--spacing-1);
}
/* Toolbar toggle first/last child border-radius swap */
html[dir="rtl"] [class*="_toolbarToggleSingleGroup_"]:first-of-type [class*="_toolbarToggleItem_"]:only-child,
html[dir="rtl"] [class*="_toolbarToggleSingleGroup_"]:only-child [class*="_toolbarToggleItem_"]:first-child,
html[dir="rtl"] [class*="_toolbarModeSwitch_"] [class*="_toolbarToggleItem_"]:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: var(--radius-base);
border-bottom-right-radius: var(--radius-base);
}
html[dir="rtl"] [class*="_toolbarToggleSingleGroup_"]:last-of-type [class*="_toolbarToggleItem_"]:only-child,
html[dir="rtl"] [class*="_toolbarToggleSingleGroup_"]:only-child [class*="_toolbarToggleItem_"]:last-child,
html[dir="rtl"] [class*="_toolbarModeSwitch_"] [class*="_toolbarToggleItem_"]:last-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: var(--radius-base);
border-bottom-left-radius: var(--radius-base);
}
/* Dropdown arrow - push to right in RTL (was margin-left:auto) */
html[dir="rtl"] [class*="_toolbarNodeKindSelectDropdownArrow_"],
html[dir="rtl"] [class*="_selectDropdownArrow_"] {
margin-left: 0;
margin-right: auto;
}
/* Dropdown container - border radius swap */
html[dir="rtl"] [class*="_toolbarNodeKindSelectContainer_"],
html[dir="rtl"] [class*="_toolbarButtonDropdownContainer_"],
html[dir="rtl"] [class*="_toolbarCodeBlockLanguageSelectContent_"],
html[dir="rtl"] [class*="_selectContainer_"] {
border-bottom-left-radius: 0;
border-bottom-right-radius: var(--radius-base);
}
html[dir="rtl"] [class*="_toolbarButtonDropdownContainer_"],
html[dir="rtl"] [class*="_toolbarButtonDropdownContainer_"] [class*="_selectItem_"]:first-child {
border-top-right-radius: 0;
border-top-left-radius: var(--radius-base);
}
/* Select trigger open state - radius swap */
html[dir="rtl"] [class*="_toolbarNodeKindSelectTrigger_"][data-state="open"],
html[dir="rtl"] [class*="_toolbarButtonSelectTrigger_"][data-state="open"],
html[dir="rtl"] [class*="_selectTrigger_"][data-state="open"] {
border-bottom-right-radius: var(--radius-none);
border-bottom-left-radius: var(--radius-none);
}
/* Select item last child - radius swap */
html[dir="rtl"] [class*="_toolbarNodeKindSelectItem_"]:last-child,
html[dir="rtl"] [class*="_selectItem_"]:last-child {
border-bottom-left-radius: 0;
border-bottom-right-radius: var(--radius-base);
}
/* --------------------------------------------------------------------------
12. MDXEditor - CodeMirror & Image Edit Toolbars
Position: was right:0 -> left:0, border-bottom-left -> border-bottom-right
-------------------------------------------------------------------------- */
html[dir="rtl"] [class*="_codeMirrorToolbar_"] {
right: auto;
left: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: var(--radius-base);
}
html[dir="rtl"] [class*="_editImageToolbar_"] {
right: auto;
left: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: var(--radius-base);
}
/* --------------------------------------------------------------------------
13. MDXEditor - Property Panel
-------------------------------------------------------------------------- */
html[dir="rtl"] [class*="_propertyPanelTitle_"] {
padding-left: 0;
padding-right: var(--spacing-2);
}
html[dir="rtl"] [class*="_propertyEditorTable_"] th {
text-align: right;
}
html[dir="rtl"] [class*="_propertyEditorTable_"] [class*="_readOnlyColumnCell_"] {
padding-left: initial;
padding-right: 0;
}
html[dir="rtl"] [class*="_readOnlyColumnCell_"] {
padding-left: initial;
padding-right: 0;
}
html[dir="rtl"] [class*="_propertyEditorTable_"] td:last-child [class*="_iconButton_"] {
margin-left: 0;
margin-right: var(--spacing-4);
}
/* --------------------------------------------------------------------------
14. MDXEditor - Dialog
-------------------------------------------------------------------------- */
/* Dialog centered positioning - no swap needed (translate-50% centers) */
html[dir="rtl"] [class*="_dialogTitle_"] {
padding-left: 0;
padding-right: var(--spacing-2);
}
/* Link dialog input button */
html[dir="rtl"] [class*="_linkDialogInputWrapper_"] > button {
padding-right: 0;
padding-left: var(--spacing-2);
}
/* Link dialog input dropdown open state */
html[dir="rtl"] [class*="_linkDialogInputWrapper_"][data-visible-dropdown="true"] {
border-bottom-left-radius: var(--radius-none);
border-bottom-right-radius: var(--radius-none);
}
/* Link dialog preview anchor */
html[dir="rtl"] [class*="_linkDialogPreviewAnchor_"] {
margin-right: 0;
margin-left: var(--spacing-1);
}
/* --------------------------------------------------------------------------
15. MDXEditor - Generic Component Name
-------------------------------------------------------------------------- */
html[dir="rtl"] [class*="_genericComponentName_"] {
padding-right: 0;
padding-left: var(--spacing-2);
}
/* --------------------------------------------------------------------------
16. MDXEditor - Table Editor
-------------------------------------------------------------------------- */
html[dir="rtl"] [class*="_tableEditor_"] thead > tr > th {
text-align: left; /* was right, swap */
}
html[dir="rtl"] [class*="_toolCell_"] {
text-align: left; /* was right, swap */
}
html[dir="rtl"] [class*="_leftAlignedCell_"] {
text-align: right; /* was left, swap */
}
html[dir="rtl"] [class*="_rightAlignedCell_"] {
text-align: left; /* was right, swap */
}
/* Table column editor toolbar separators */
html[dir="rtl"] [class*="_tableColumnEditorToolbar_"] [role="separator"] {
margin-left: 0;
margin-right: var(--spacing-1);
}
/* Add column button - was on right side */
html[dir="rtl"] [class*="_addColumnButton_"] {
margin-left: 0;
margin-right: var(--spacing-px);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: var(--radius-medium);
border-bottom-left-radius: var(--radius-medium);
}
/* Toggle group first/last child radius swap */
html[dir="rtl"] [class*="_toggleGroupRoot_"] button:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: var(--radius-base);
border-bottom-right-radius: var(--radius-base);
}
html[dir="rtl"] [class*="_toggleGroupRoot_"] button:last-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: var(--radius-base);
border-bottom-left-radius: var(--radius-base);
}
/* --------------------------------------------------------------------------
17. MDXEditor - Diff Source Toggle
-------------------------------------------------------------------------- */
html[dir="rtl"] [class*="_diffSourceToggleWrapper_"] {
margin-left: 0;
margin-right: auto;
right: auto;
left: 0;
}
/* --------------------------------------------------------------------------
18. MDXEditor - Select with Label
-------------------------------------------------------------------------- */
html[dir="rtl"] [class*="_selectWithLabel_"] {
margin-left: 0;
margin-right: var(--spacing-2);
}
html[dir="rtl"] [class*="_toolbarTitleMode_"] {
margin-left: 0;
margin-right: var(--spacing-2);
}
/* --------------------------------------------------------------------------
19. MDXEditor - Downshift Autocomplete
-------------------------------------------------------------------------- */
html[dir="rtl"] [class*="_downshiftInputWrapper_"] > button {
padding-right: 0;
padding-left: var(--spacing-2);
}
html[dir="rtl"] [class*="_downshiftInputWrapper_"][data-visible-dropdown="true"] {
border-bottom-left-radius: var(--radius-none);
border-bottom-right-radius: var(--radius-none);
}
html[dir="rtl"] [class*="_downshiftAutocompleteContainer_"] ul {
border-bottom-left-radius: 0;
border-bottom-right-radius: var(--radius-medium);
}
html[dir="rtl"] [class*="_downshiftAutocompleteContainer_"] ul li:last-of-type {
border-bottom-left-radius: 0;
border-bottom-right-radius: var(--radius-medium);
}
/* --------------------------------------------------------------------------
20. MDXEditor - List Items (Checkbox)
-------------------------------------------------------------------------- */
html[dir="rtl"] [class*="_listItemChecked_"],
html[dir="rtl"] [class*="_listItemUnchecked_"] {
padding-left: 0;
padding-right: var(--spacing-6);
}
html[dir="rtl"] [class*="_listItemChecked_"]:before,
html[dir="rtl"] [class*="_listItemUnchecked_"]:before {
left: auto;
right: 0;
}
html[dir="rtl"] [class*="_listItemChecked_"]:after {
left: auto;
right: var(--spacing-1_5);
}
/* --------------------------------------------------------------------------
21. MDXEditor - Admonitions (Info/Warning/Danger blocks)
-------------------------------------------------------------------------- */
html[dir="rtl"] [class*="_admonitionDanger_"],
html[dir="rtl"] [class*="_admonitionInfo_"],
html[dir="rtl"] [class*="_admonitionNote_"],
html[dir="rtl"] [class*="_admonitionTip_"],
html[dir="rtl"] [class*="_admonitionCaution_"] {
border-left: none;
border-right: 3px solid var(--admonitionBorder);
}
/* --------------------------------------------------------------------------
22. Paperclip Markdown Rendered Content
-------------------------------------------------------------------------- */
html[dir="rtl"] .paperclip-mdxeditor-content ul,
html[dir="rtl"] .paperclip-mdxeditor-content ol {
padding-left: 0;
padding-right: 1.6em;
}
html[dir="rtl"] .paperclip-mdxeditor-content blockquote {
border-left: none;
border-right: 3px solid var(--border);
padding-left: 0;
padding-right: 1em;
}
html[dir="rtl"] .paperclip-markdown :where(ul, ol) {
padding-left: 0;
padding-right: 1.15rem;
}
html[dir="rtl"] .paperclip-markdown li {
padding-left: 0;
padding-right: .2rem;
}
html[dir="rtl"] .paperclip-markdown blockquote {
border-left: none;
border-right: .24rem solid var(--border);
margin-left: initial;
margin-right: 0;
padding-left: 0;
padding-right: .95rem;
}
@supports (color: color-mix(in lab, red, red)) {
html[dir="rtl"] .paperclip-markdown blockquote {
border-right: .24rem solid color-mix(in oklab, var(--border) 84%, var(--muted-foreground) 16%);
}
}
html[dir="rtl"] .paperclip-markdown th {
text-align: right;
}
/* Nested list/ol padding overrides from Tailwind arbitrary selectors */
html[dir="rtl"] .\[\&_ol\]\:pl-5 ol {
padding-left: 0;
padding-right: calc(var(--spacing) * 5);
}
html[dir="rtl"] .\[\&_ul\]\:pl-5 ul {
padding-left: 0;
padding-right: calc(var(--spacing) * 5);
}
/* --------------------------------------------------------------------------
23. CodeMirror (inside MDXEditor) - Cursor & Gutters
-------------------------------------------------------------------------- */
html[dir="rtl"] .paperclip-mdxeditor .cm-cursor,
html[dir="rtl"] .paperclip-mdxeditor .cm-dropCursor {
border-left-color: transparent !important;
border-right-color: #cdd6f4 !important;
}
html[dir="rtl"] .paperclip-mdxeditor .cm-gutters {
border-right: none !important;
border-left: 1px solid #313244 !important;
}
/* --------------------------------------------------------------------------
24. Sidebar Layout (shadcn/ui sidebar pattern)
The sidebar CSS variables are defined but the layout depends on the
app's component structure. These overrides handle common patterns.
-------------------------------------------------------------------------- */
/* If sidebar is positioned with left:0, move to right:0 */
html[dir="rtl"] [data-sidebar="sidebar"] {
left: auto;
right: 0;
}
/* Sidebar rail/resize handle */
html[dir="rtl"] [data-sidebar="rail"] {
left: auto;
right: 0;
}
/* Main content margin adjustment when sidebar present */
html[dir="rtl"] [data-sidebar="content"] {
margin-left: 0;
}
/* --------------------------------------------------------------------------
25. Dialog Overlay - full screen, no directional change needed
But ensure overlay covers correctly
-------------------------------------------------------------------------- */
html[dir="rtl"] [class*="_dialogOverlay_"] {
left: 0;
right: 0;
}
/* --------------------------------------------------------------------------
26. Radix UI Popover/Dropdown Transform Origins
These use CSS variables, so they auto-adapt. No override needed.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
27. Group rotation for collapsible triggers (chevron icons)
In RTL, a right-pointing chevron should point left by default
and rotate when open
-------------------------------------------------------------------------- */
html[dir="rtl"] .group-data-\[state\=open\]\:rotate-90:is(:where(.group)[data-state=open] *) {
rotate: -90deg;
}
/* --------------------------------------------------------------------------
28. General Hebrew typography adjustments
-------------------------------------------------------------------------- */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
text-align: right;
}
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"] {
text-align: left;
direction: ltr;
}
/* Placeholder text alignment */
html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder {
text-align: right;
}
/* --------------------------------------------------------------------------
29. Scrollbar position (WebKit) - move to left side in RTL
-------------------------------------------------------------------------- */
html[dir="rtl"] ::-webkit-scrollbar {
/* Scrollbars auto-flip in RTL for most browsers */
}
/* --------------------------------------------------------------------------
30. Active SVG translate (press feedback) - flip X direction
-------------------------------------------------------------------------- */
html[dir="rtl"] [class*="_toolbarToggleItem_"]:active svg,
html[dir="rtl"] [class*="_toolbarButton_"]:active svg,
html[dir="rtl"] [class*="_actionButton_"]:active svg,
html[dir="rtl"] [class*="_tableColumnEditorTrigger_"]:active svg,
html[dir="rtl"] [class*="_tableColumnEditorToolbar_"] > button:active svg,
html[dir="rtl"] [class*="_toggleGroupRoot_"] button:active svg,
html[dir="rtl"] [class*="_addColumnButton_"]:active svg,
html[dir="rtl"] [class*="_addRowButton_"]:active svg {
transform: translate(-1px, 1px);
}
/* --------------------------------------------------------------------------
31. Responsive breakpoint overrides
-------------------------------------------------------------------------- */
@media (min-width: 640px) {
html[dir="rtl"] .sm\:flex-row {
flex-direction: row-reverse;
}
}
@media (min-width: 768px) {
html[dir="rtl"] .md\:flex-row {
flex-direction: row-reverse;
}
}
@media (min-width: 1024px) {
html[dir="rtl"] .lg\:flex-row {
flex-direction: row-reverse;
}
}
@media (min-width: 1280px) {
html[dir="rtl"] .xl\:flex-row {
flex-direction: row-reverse;
}
}
/* --------------------------------------------------------------------------
32. Fix for centered dialogs using left:50% + translate(-50%, -50%)
These should remain centered, so override left->right and flip translate
-------------------------------------------------------------------------- */
html[dir="rtl"] [class*="_dialogContent_"],
html[dir="rtl"] [class*="_largeDialogContent_"] {
left: auto;
right: 50%;
transform: translate(50%, -50%);
}
@keyframes rtl-contentShow {
0% {
opacity: 0;
transform: translate(50%, -48%) scale(.96);
}
to {
opacity: 1;
transform: translate(50%, -50%) scale(1);
}
}
html[dir="rtl"] [class*="_dialogContent_"],
html[dir="rtl"] [class*="_largeDialogContent_"] {
animation: rtl-contentShow .15s cubic-bezier(.16, 1, .3, 1);
}
/* --------------------------------------------------------------------------
33. Fix Tailwind space-x utilities
These already use margin-inline-start/end, so they should auto-adapt.
No override needed for space-x-* classes (they use logical properties).
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
34. Override for the bottom-positioned elements with safe-area-inset
These are vertical-only, no RTL swap needed.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
35. Miscellaneous icon and decorative element adjustments
-------------------------------------------------------------------------- */
/* Ensure icons in buttons don't get mirrored unintentionally */
html[dir="rtl"] svg {
/* Most icons should NOT be mirrored. Only directional icons need it. */
}
/* Mirror directional icons (arrows, chevrons) */
html[dir="rtl"] [class*="chevron-left"] svg,
html[dir="rtl"] [class*="chevron-right"] svg,
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 - newest first, editor after newest
Comment reordering is handled by JS (translate-he.js: reverseComments).
CSS column-reverse removed to avoid double-reverse conflicts.
-------------------------------------------------------------------------- */
Reference in New Issue View Git Blame Copy Permalink