neuron-technologies/neuron
3
0
Fork 0
Code Issues 44 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(app): correct RTL layout interactions (#40410)

Browse Source
This commit is contained in:
Luke Parker
2026-08-04 21:39:32 +10:00
committed by GitHub
parent 6c97a46dae
commit de1bd36a47
21 changed files with 210 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/dropdown-menu.css
+2 -2
View File
@@ -60,7 +60,7 @@
[data-slot="dropdown-menu-checkbox-item"],
[data-slot="dropdown-menu-radio-item"] {
padding-right: 28px;
padding-inline-end: 28px;
}
[data-slot="dropdown-menu-sub-trigger"] {
@@ -76,7 +76,7 @@
width: 16px;
height: 16px;
position: absolute;
right: 8px;
inset-inline-end: 8px;
top: 50%;
transform: translateY(-50%);
}
packages/ui/src/components/icon.tsx
+8 -1
View File
@@ -154,7 +154,14 @@ export function Icon(props: IconProps) {
<div
data-component="icon"
data-size={local.size || "normal"}
data-directional={local.name === "chevron-left" || local.name === "chevron-right" ? true : undefined}
data-directional={
local.name === "arrow-left" ||
local.name === "arrow-right" ||
local.name === "chevron-left" ||
local.name === "chevron-right"
? true
: undefined
}
>
<svg
data-slot="icon-svg"
packages/ui/src/components/resize-handle.css
+14 -2
View File
@@ -14,7 +14,7 @@
opacity: 1;
}
&[data-direction="horizontal"] {
&:where([data-direction="horizontal"]) {
inset-block: 0;
inset-inline-end: 0;
width: 8px;
@@ -33,9 +33,21 @@
inset-inline-start: 50%;
transform: translateX(-50%);
}
&:dir(rtl) {
transform: translateX(-50%);
&[data-edge="start"] {
transform: translateX(50%);
}
&::after {
transform: translateX(50%);
}
}
}
&[data-direction="vertical"] {
&:where([data-direction="vertical"]) {
inset-inline: 0;
inset-block-start: 0;
height: 8px;
packages/ui/src/components/resize-handle.tsx
+5 -1
View File
@@ -33,6 +33,10 @@ export function ResizeHandle(props: ResizeHandleProps) {
e.preventDefault()
const edge = local.edge ?? (local.direction === "vertical" ? "start" : "end")
const start = local.direction === "horizontal" ? e.clientX : e.clientY
const rtl =
local.direction === "horizontal" &&
e.currentTarget instanceof Element &&
getComputedStyle(e.currentTarget).direction === "rtl"
const startSize = local.size
const min = local.min
const max = local.max
@@ -53,7 +57,7 @@ export function ResizeHandle(props: ResizeHandleProps) {
? edge === "end"
? pos - start
: start - pos
: edge === "start"
: (edge === "start") !== rtl
? start - pos
: pos - start
current = startSize + delta
packages/ui/src/components/scroll-view.css
+1 -1
View File
@@ -21,7 +21,7 @@
.scroll-view__thumb {
position: absolute;
right: 0;
inset-inline-end: 0;
top: 0;
width: 12px;
transition: opacity 200ms ease;
packages/ui/src/components/select.css
+5 -3
View File
@@ -1,6 +1,7 @@
[data-component="select"] {
[data-slot="select-select-trigger"] {
padding: 0 4px 0 8px;
padding-block: 0;
padding-inline: 8px 4px;
box-shadow: none;
[data-slot="select-select-trigger-value"] {
@@ -46,7 +47,8 @@
&[data-trigger-style="settings"] {
[data-slot="select-select-trigger"] {
padding: 6px 6px 6px 12px;
padding-block: 6px;
padding-inline: 12px 6px;
box-shadow: none;
border-radius: 6px;
min-width: 160px;
@@ -154,7 +156,7 @@
display: flex;
align-items: center;
justify-content: center;
margin-left: auto;
margin-inline-start: auto;
width: 16px;
height: 16px;
}
packages/ui/src/components/switch.css
+4
View File
@@ -103,6 +103,10 @@
background-color: var(--icon-invert-base);
}
&:dir(rtl)[data-checked] [data-slot="switch-thumb"] {
transform: translateX(-12px);
}
&[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
border-color: var(--border-hover);
background-color: var(--surface-hover);
packages/ui/src/components/tabs.css
+54 -26
View File
@@ -61,7 +61,7 @@
flex-shrink: 0;
max-width: 280px;
border-bottom: 1px solid var(--border-weak-base);
border-right: 1px solid var(--border-weak-base);
border-inline-end: 1px solid var(--border-weak-base);
background-color: var(--background-base);
[data-slot="tabs-trigger"] {
@@ -111,10 +111,10 @@
color: var(--text-strong);
}
&:has([data-slot="tabs-trigger-close-button"]) {
padding-right: 12px;
padding-inline-end: 12px;
[data-slot="tabs-trigger"] {
padding-right: 0;
padding-inline-end: 0;
}
}
}
@@ -141,8 +141,8 @@
[data-slot="tabs-list"] {
height: var(--tabs-bar-height);
padding-left: 12px;
padding-right: 0;
padding-inline-start: 12px;
padding-inline-end: 0;
--tabs-review-gap: 16px;
--tabs-review-fade: 16px;
gap: var(--tabs-review-gap);
@@ -162,11 +162,15 @@
position: absolute;
top: 0;
bottom: 0;
left: calc(var(--tabs-review-fade) * -1);
inset-inline-end: 100%;
width: var(--tabs-review-fade);
pointer-events: none;
background: linear-gradient(90deg, transparent, var(--background-stronger));
}
&:dir(rtl)::before {
background: linear-gradient(270deg, transparent, var(--background-stronger));
}
}
}
@@ -213,9 +217,9 @@
}
&:has([data-slot="tabs-trigger-close-button"]) {
padding-right: 5px;
padding-inline-end: 5px;
[data-slot="tabs-trigger"] {
padding-right: 0 !important;
padding-inline-end: 0 !important;
}
}
@@ -271,7 +275,7 @@
#terminal-panel &[data-variant="normal"][data-orientation="horizontal"] {
[data-slot="tabs-list"] {
height: 52px;
padding-right: 12px;
padding-inline-end: 12px;
gap: 8px;
}
@@ -291,7 +295,7 @@
}
&:has([data-slot="tabs-trigger-close-button"]) {
padding-right: 8px;
padding-inline-end: 8px;
}
&:has([data-selected]) {
@@ -378,9 +382,9 @@
}
&:has([data-slot="tabs-trigger-close-button"]) {
padding-right: 0;
padding-inline-end: 0;
[data-slot="tabs-trigger"] {
padding-right: 0;
padding-inline-end: 0;
}
}
}
@@ -490,7 +494,7 @@
padding: 8px;
gap: 4px;
background-color: var(--background-base);
border-right: 1px solid var(--border-weak-base);
border-inline-end: 1px solid var(--border-weak-base);
&::after {
display: none;
@@ -572,7 +576,7 @@
padding: 12px;
gap: 0;
background-color: var(--background-base);
border-right: 1px solid var(--border-weak-base);
border-inline-end: 1px solid var(--border-weak-base);
&::after {
display: none;
@@ -581,7 +585,8 @@
[data-slot="tabs-section-title"] {
width: 100%;
padding: 0 0 0 4px;
padding: 0;
padding-inline-start: 4px;
font-family: var(--font-family-sans);
font-size: var(--font-size-small);
font-weight: var(--font-weight-medium);
@@ -695,6 +700,10 @@ body[data-new-layout] #terminal-panel [data-component="tabs"][data-variant="norm
&::before {
background: linear-gradient(90deg, transparent, var(--v2-background-bg-base));
}
&:dir(rtl)::before {
background: linear-gradient(270deg, transparent, var(--v2-background-bg-base));
}
}
}
}
@@ -702,7 +711,7 @@ body[data-new-layout] #terminal-panel [data-component="tabs"][data-variant="norm
body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal"][data-orientation="horizontal"] {
[data-slot="tabs-list"] {
height: 52px;
padding-right: 12px;
padding-inline-end: 12px;
gap: 8px;
--tabs-review-fade: 8px;
}
@@ -723,10 +732,10 @@ body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal
}
&:has([data-slot="tabs-trigger-close-button"]) {
padding-right: 8px;
padding-inline-end: 8px;
[data-slot="tabs-trigger-close-button"] {
margin-left: 2px;
margin-inline-start: 2px;
}
}
@@ -754,7 +763,7 @@ body[data-new-layout] #review-panel [data-component="tabs"][data-variant="normal
.tab-fileicon-color,
.tab-fileicon-mono,
[data-slot="icon-svg"] {
margin-left: -2px;
margin-inline-start: -2px;
}
}
@@ -792,7 +801,7 @@ body[data-new-layout]
.session-review-v2-tabs-bar
[data-slot="tabs-list"]
> .sticky {
padding-right: 0;
padding-inline-end: 0;
[data-component="icon-button-v2"] {
position: relative;
@@ -800,7 +809,7 @@ body[data-new-layout]
&::after {
content: "";
position: absolute;
left: 100%;
inset-inline-start: 100%;
top: 50%;
transform: translateY(-50%);
width: 20px;
@@ -811,21 +820,35 @@ body[data-new-layout]
}
}
body[data-new-layout]
#review-panel
[data-component="tabs"]
.session-review-v2-tabs-bar
[data-slot="tabs-list"]
> .sticky:not(.session-review-v2-sidebar-toggle-slot) {
left: auto;
right: auto;
inset-inline-end: 0;
}
body[data-new-layout]
#review-panel
[data-component="tabs"]
.session-review-v2-tabs-bar
[data-slot="tabs-list"]
> .session-review-v2-sidebar-toggle-slot.sticky {
padding-right: 0;
left: auto;
right: auto;
inset-inline-start: 0;
padding-inline-end: 0;
&::before {
content: "";
position: absolute;
top: 50%;
bottom: auto;
left: auto;
right: 100%;
inset-inline-start: auto;
inset-inline-end: 100%;
transform: translateY(-50%);
width: 12px;
height: 28px;
@@ -838,7 +861,8 @@ body[data-new-layout]
content: "";
position: absolute;
top: 50%;
left: 100%;
inset-inline-start: 100%;
inset-inline-end: auto;
transform: translateY(-50%);
width: 8px;
height: 28px;
@@ -846,6 +870,10 @@ body[data-new-layout]
background: linear-gradient(90deg, var(--v2-background-bg-base), transparent);
}
&:dir(rtl)::after {
background: linear-gradient(270deg, var(--v2-background-bg-base), transparent);
}
[data-component="icon-button-v2"]::after {
display: none;
}
@@ -853,7 +881,7 @@ body[data-new-layout]
body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-open-in-app-slot {
flex-shrink: 0;
margin-left: auto;
margin-inline-start: auto;
}
body[data-new-layout] #review-panel [data-component="tabs"] .session-review-v2-open-in-app {
packages/ui/src/components/tabs.tsx
+1
View File
@@ -80,6 +80,7 @@ function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
>
<Kobalte.Trigger
{...rest}
dir={rest.dir ?? "auto"}
data-slot="tabs-trigger"
data-value={props.value}
classList={{ [split.classes?.button ?? ""]: split.classes?.button }}
packages/ui/src/components/text-field.css
+2 -2
View File
@@ -45,7 +45,7 @@
align-items: start;
justify-content: space-between;
width: 100%;
padding-right: 4px;
padding-inline-end: 4px;
border-radius: var(--radius-md);
border: 1px solid var(--border-weak-base);
@@ -68,7 +68,7 @@
}
&:not(:has([data-slot="input-copy-button"])) {
padding-right: 0;
padding-inline-end: 0;
}
}
packages/ui/src/v2/components/file-tree-v2.css
+6 -2
View File
@@ -13,13 +13,13 @@
align-items: center;
justify-content: flex-start;
gap: 6px;
padding-right: 8px;
padding-inline-end: 8px;
overflow: visible;
border: none;
border-radius: 6px;
background-color: transparent;
color: var(--v2-text-text-muted);
text-align: left;
text-align: start;
cursor: pointer;
scroll-margin-block: 8px;
transition:
@@ -87,6 +87,10 @@
transform: rotate(-90deg);
}
[data-component="file-tree-v2"]:dir(rtl) [data-slot="file-tree-v2-chevron"]:not([data-expanded]) svg {
transform: rotate(90deg);
}
[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected] [data-slot="file-tree-v2-chevron"] {
color: var(--v2-text-text-base);
}
packages/ui/src/v2/components/select-v2.css
+16 -5
View File
@@ -52,7 +52,8 @@
display: flex;
flex-direction: row;
align-items: stretch;
padding: 0 6px 0 0;
padding-block: 0;
padding-inline: 0 6px;
gap: 8px;
width: 280px;
height: 28px;
@@ -74,7 +75,8 @@
[data-component="select-v2"][data-appearance="large"] {
height: 32px;
padding: 0 8px 0 0;
padding-block: 0;
padding-inline: 0 8px;
}
[data-component="select-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within):not(
@@ -126,12 +128,13 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 0 0 8px;
padding-block: 0;
padding-inline: 8px 0;
margin: 0;
border: 0;
background: transparent;
outline: none;
text-align: left;
text-align: start;
font-style: normal;
font-weight: 440;
font-size: 13px;
@@ -188,7 +191,8 @@
width: fit-content;
max-width: 100%;
height: 24px;
padding: 4px 4px 4px 8px;
padding-block: 4px;
padding-inline: 8px 4px;
gap: 4px;
border-radius: 4px;
background: transparent;
@@ -278,6 +282,13 @@
color: var(--menu-v2-accent);
}
[data-slot="select-v2-listbox"]
[data-component="menu-v2-item"][data-selected]
[data-slot="menu-v2-item-indicator"]
svg {
visibility: visible;
}
[data-slot="select-v2-listbox"]
[data-component="menu-v2-item"]:not([data-selected])
[data-slot="menu-v2-item-indicator"]
packages/ui/src/v2/components/switch-v2.css
+8
View File
@@ -121,6 +121,10 @@
var(--v2-grey-300);
}
&:dir(rtl)[data-checked] [data-slot="switch-thumb"] {
transform: translateX(-8px);
}
&[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
background:
linear-gradient(
@@ -135,6 +139,10 @@
transform: translateX(7px);
}
&:dir(rtl)[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
transform: translateX(-7px);
}
&[data-disabled] {
cursor: not-allowed;
}
packages/ui/src/v2/components/text-input-v2.css
+7 -5
View File
@@ -3,7 +3,8 @@
display: flex;
flex-direction: row;
align-items: stretch;
padding: 0 8px 0 0;
padding-block: 0;
padding-inline: 0 8px;
gap: 8px;
width: 280px;
height: 28px;
@@ -64,7 +65,7 @@
flex: none;
align-items: center;
justify-content: center;
padding-left: 8px;
padding-inline-start: 8px;
color: var(--v2-icon-icon-muted);
}
@@ -74,7 +75,7 @@
}
[data-component="text-input-v2"][data-leading-icon] [data-slot="text-input-v2-input"] {
padding-left: 0;
padding-inline-start: 0;
}
[data-component="text-input-v2"] [data-slot="text-input-v2-input"] {
@@ -82,7 +83,8 @@
width: 100%;
min-width: 0;
height: 100%;
padding: 0 0 0 8px;
padding-block: 0;
padding-inline: 8px 0;
margin: 0;
border: 0;
background: transparent;
@@ -165,7 +167,7 @@
height: 28px;
padding: 0;
border-radius: 6px;
margin-right: -8px;
margin-inline-end: -8px;
}
[data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"] {