vrr/opencode
2
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-08-06 09:09:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 210 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

17
packages/app/src/components/file-tree-v2.tsx
View file

@ -29,14 +29,14 @@ export type { Kind } from "@/components/file-tree"
const INDENT_STEP = 16
function rowPaddingLeft(level: number, type: FileNode["type"]) {
function rowPaddingStart(level: number, type: FileNode["type"]) {
if (type === "directory") return 8 + level * INDENT_STEP
if (level === 0) return 8
return 8 + level * INDENT_STEP - INDENT_STEP
}
function guideLineLeft(level: number) {
return rowPaddingLeft(level, "directory") + 8
function guideLineStart(level: number) {
return rowPaddingStart(level, "directory") + 8
}
export const kindLabel = (kind: Kind) => {
@ -87,7 +87,7 @@ const FileTreeNodeV2 = (
...local.classList,
[local.class ?? ""]: !!local.class,
}}
style={`padding-left: ${rowPaddingLeft(local.level, local.node.type)}px`}
style={`padding-inline-start: ${rowPaddingStart(local.level, local.node.type)}px`}
draggable={local.draggable}
onDragStart={(event: DragEvent) => {
if (!local.draggable) return
@ -99,7 +99,9 @@ const FileTreeNodeV2 = (
{...rest}
>
{local.children}
<span class="flex-1 min-w-0 text-12-medium whitespace-nowrap truncate">{local.node.name}</span>
<span class="flex-1 min-w-0 text-start text-12-medium whitespace-nowrap truncate">
<bdi dir="auto">{local.node.name}</bdi>
</span>
{(() => {
const value = kind()
if (!value || local.node.type !== "file") return null
@ -116,7 +118,7 @@ const FileTreeNodeV2 = (
function GuideLines(props: { level: number }) {
return (
<For each={Array.from({ length: props.level })}>
{(_, index) => <div data-slot="file-tree-v2-guide" style={`left: ${guideLineLeft(index())}px`} />}
{(_, index) => <div data-slot="file-tree-v2-guide" style={`inset-inline-start: ${guideLineStart(index())}px`} />}
</For>
)
}
@ -215,7 +217,6 @@ export default function FileTreeV2(props: {
<div
ref={setRoot}
data-component="file-tree-v2"
dir="ltr"
data-total-rows={live() ? rows().length : model()!.total}
class="group/file-tree-v2"
style={{ position: "relative", height: `${virtualizer.getTotalSize()}px` }}
@ -228,7 +229,7 @@ export default function FileTreeV2(props: {
style={{
position: "absolute",
top: "0",
left: "0",
"inset-inline-start": "0",
width: "100%",
height: `${item().size}px`,
transform: `translateY(${item().start}px)`,

4
packages/app/src/components/file-tree.tsx
View file

@ -146,13 +146,13 @@ const FileTreeNode = (
<Dynamic
component={local.as ?? "div"}
classList={{
"w-full min-w-0 h-6 flex items-center justify-start gap-x-1.5 rounded-md px-1.5 py-0 text-left hover:bg-surface-raised-base-hover active:bg-surface-base-active transition-colors cursor-pointer": true,
"w-full min-w-0 h-6 flex items-center justify-start gap-x-1.5 rounded-md px-1.5 py-0 text-start hover:bg-surface-raised-base-hover active:bg-surface-base-active transition-colors cursor-pointer": true,
"bg-surface-base-active": local.node.path === local.active,
...local.classList,
[local.class ?? ""]: !!local.class,
[local.nodeClass ?? ""]: !!local.nodeClass,
}}
style={`padding-left: ${Math.max(0, 8 + local.level * 12 - (local.node.type === "file" ? 24 : 4))}px`}
style={`padding-inline-start: ${Math.max(0, 8 + local.level * 12 - (local.node.type === "file" ? 24 : 4))}px`}
draggable={local.draggable}
onDragStart={(event: DragEvent) => {
if (!local.draggable) return

8
packages/app/src/components/settings-v2/settings-v2.css
View file

@ -287,7 +287,7 @@
}
.settings-v2-provider-env-hint {
padding-right: 12px;
padding-inline-end: 12px;
font-size: 13px;
font-weight: 440;
line-height: 1;
@ -311,7 +311,7 @@
line-height: 1;
color: var(--v2-text-text-accent);
cursor: pointer;
text-align: left;
text-align: start;
}
.settings-v2-providers-view-all:hover {
@ -361,13 +361,13 @@
}
.settings-v2-tab-search [data-slot="text-input-v2-input"] {
padding-right: 28px;
padding-inline-end: 28px;
}
.settings-v2-tab-search-clear {
position: absolute;
top: 50%;
right: 6px;
inset-inline-end: 6px;
z-index: 1;
transform: translateY(-50%);
}

23
packages/app/src/components/titlebar-tab-nav.css
View file

@ -1,7 +1,7 @@
[data-titlebar-tab] [data-slot="tab-close"] {
position: absolute;
top: 4px;
right: 4px;
inset-inline-end: 4px;
display: flex;
height: 20px;
width: 20px;
@ -52,7 +52,7 @@
content: "";
position: absolute;
top: 8px;
left: -3.75px;
inset-inline-start: -3.75px;
width: 1.5px;
height: 12px;
border-radius: 9999px;
@ -86,6 +86,23 @@
);
}
[data-titlebar-tab][data-title-overflow="true"]:not([data-editing="true"]):dir(rtl) [data-slot="tab-link"] {
-webkit-mask-image: linear-gradient(
to left,
black 0,
black calc(100% - var(--tab-title-fade-offset) - 16px),
transparent calc(100% - var(--tab-title-fade-offset)),
transparent 100%
);
mask-image: linear-gradient(
to left,
black 0,
black calc(100% - var(--tab-title-fade-offset) - 16px),
transparent calc(100% - var(--tab-title-fade-offset)),
transparent 100%
);
}
[data-titlebar-tab][data-title-overflow="true"]:is(:hover, [data-active="true"]):not([data-editing="true"])
[data-slot="tab-link"] {
--tab-title-fade-offset: 24px;
@ -93,7 +110,7 @@
[data-titlebar-tab][data-title-overflow="true"]:not(:hover):not([data-active="true"]):not([data-editing="true"])
[data-slot="tab-link"] {
padding-right: 0;
padding-inline-end: 0;
}
[data-titlebar-tab] [data-slot="tab-title"] {

21
packages/app/src/components/titlebar.tsx
View file

@ -1,4 +1,15 @@
import { createEffect, createMemo, createResource, createSignal, Match, onMount, Show, Switch, untrack } from "solid-js"
import {
createEffect,
createMemo,
createResource,
createSignal,
Match,
on,
onMount,
Show,
Switch,
untrack,
} from "solid-js"
import { createStore } from "solid-js/store"
import { useLocation, useNavigate, useParams } from "@solidjs/router"
import { IconButton } from "@opencode-ai/ui/icon-button"
@ -42,8 +53,11 @@ export type TitlebarUpdate = {
}
export function useTitlebarRightMount() {
const language = useLanguage()
const [mount, setMount] = createSignal<HTMLElement | null>(null)
onMount(() => setMount(document.getElementById("opencode-titlebar-right")))
const sync = () => setMount(document.getElementById("opencode-titlebar-right"))
onMount(sync)
createEffect(on(language.direction, sync, { defer: true }))
return mount
}
@ -169,7 +183,8 @@ export function Titlebar(props: { update?: TitlebarUpdate; debugTools?: { visibl
"padding-left": macTrafficLights() ? `${macTrafficLightsBaseWidth / zoom()}px` : 0,
width: windows() ? `env(titlebar-area-width, calc(100vw - ${windowsControlsWidth()}))` : undefined,
"max-width": windows() ? `env(titlebar-area-width, calc(100vw - ${windowsControlsWidth()}))` : undefined,
"align-self": windows() ? "flex-start" : undefined,
// Native Windows caption controls remain on the physical right in both writing directions.
"margin-right": windows() ? "auto" : undefined,
}}
data-tauri-drag-region
>

26
packages/session-ui/src/v2/components/session-review-v2.css
View file

@ -30,19 +30,19 @@
flex-shrink: 0;
min-height: 0;
overflow: hidden;
border-right: 1px solid var(--border-weaker-base, var(--v2-border-border-weak));
border-inline-end: 1px solid var(--border-weaker-base, var(--v2-border-border-weak));
background: var(--v2-background-bg-base);
}
[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar"][aria-hidden="true"] {
border-right-width: 0;
border-inline-end-width: 0;
}
[data-component="session-review-v2-sidebar-root"]
[data-slot="session-review-v2-sidebar"][data-transition]:not([data-resizing]) {
transition:
width 200ms cubic-bezier(0.22, 1, 0.36, 1),
border-right-width 200ms cubic-bezier(0.22, 1, 0.36, 1);
border-inline-end-width 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar-resize"] {
@ -63,7 +63,8 @@
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 12px 16px 12px 8px;
padding-block: 12px;
padding-inline: 8px 16px;
flex-shrink: 0;
}
@ -79,7 +80,7 @@
[data-component="session-review-v2-sidebar-root"]
[data-slot="session-review-v2-sidebar-title"]:not(:has([data-component="select-v2-root"])) {
margin-left: 8px;
margin-inline-start: 8px;
}
[data-component="session-review-v2-sidebar-root"]
@ -211,7 +212,7 @@
justify-content: space-between;
gap: 8px;
padding: 10px 12px;
padding-left: 8px;
padding-inline-start: 8px;
flex-shrink: 0;
border-bottom: 1px solid var(--border-weaker-base, var(--v2-border-border-weak));
}
@ -231,7 +232,7 @@
align-items: center;
gap: 8px;
min-width: 0;
padding-right: 8px;
padding-inline-end: 8px;
}
[data-component="session-review-v2"] [data-slot="session-review-v2-toolbar-title"] {
@ -331,7 +332,7 @@
[data-component="session-review-v2"] [data-slot="session-review-v2-file-diff"] {
position: relative;
flex-shrink: 0;
margin-left: auto;
margin-inline-start: auto;
background-color: var(--v2-background-bg-base);
&::before {
@ -339,17 +340,22 @@
position: absolute;
top: -8px;
bottom: -8px;
right: 100%;
inset-inline-end: 100%;
width: 16px;
z-index: 1;
pointer-events: none;
background: linear-gradient(90deg, transparent, var(--v2-background-bg-base));
}
&:dir(rtl)::before {
background: linear-gradient(270deg, transparent, var(--v2-background-bg-base));
}
&::after {
content: "";
position: absolute;
inset: -8px -16px -8px 0;
inset-block: -8px;
inset-inline: 0 -16px;
z-index: 0;
pointer-events: none;
background-color: var(--v2-background-bg-base);

12
packages/session-ui/src/v2/components/session-review-v2.tsx
View file

@ -9,6 +9,7 @@ import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
import type { SessionReviewDiffStyle } from "../../components/session-review"
import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
import { ScrollView } from "@opencode-ai/ui/scroll-view"
import { useLocale } from "@kobalte/core/i18n"
import { makeEventListener } from "@solid-primitives/event-listener"
import { Show, createEffect, createMemo, createSignal, type JSX } from "solid-js"
import { getWorkerPool } from "../../pierre/worker"
@ -149,6 +150,7 @@ export function SessionReviewV2Sidebar(props: SessionReviewV2SidebarProps) {
export function SessionReviewV2(props: SessionReviewV2Props) {
const i18n = useI18n()
const locale = useLocale()
createEffect(() => {
getWorkerPool(props.diffStyle)
@ -175,6 +177,8 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
}
const canCycle = () => props.files.length > 0
const previousKey = () => (locale.direction() === "rtl" ? "ArrowRight" : "ArrowLeft")
const nextKey = () => (locale.direction() === "rtl" ? "ArrowLeft" : "ArrowRight")
const showCollapsedMeta = () => props.sidebarOpen === false
// Memoize slot getters so Show conditions do not instantiate throwaway elements.
const title = createMemo(() => props.title)
@ -189,11 +193,11 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
// pane is mounted, but never while typing in an input or comment editor.
makeEventListener(document, "keydown", (event) => {
if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) return
if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return
if (event.key !== previousKey() && event.key !== nextKey()) return
const target = event.target
if (target instanceof HTMLElement && (target.isContentEditable || target.closest("input, textarea, select"))) return
if (!props.hasDiffs || !canCycle()) return
const file = event.key === "ArrowLeft" ? prev() : next()
const file = event.key === previousKey() ? prev() : next()
if (!file) return
event.preventDefault()
cycle(file)
@ -221,7 +225,7 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
value={
<>
{i18n.t("ui.sessionReviewV2.previousFile")}
<KeybindV2 keys={["←"]} variant="neutral" />
<KeybindV2 keys={[locale.direction() === "rtl" ? "→" : "←"]} variant="neutral" />
</>
}
>
@ -241,7 +245,7 @@ export function SessionReviewV2(props: SessionReviewV2Props) {
value={
<>
{i18n.t("ui.sessionReviewV2.nextFile")}
<KeybindV2 keys={["→"]} variant="neutral" />
<KeybindV2 keys={[locale.direction() === "rtl" ? "←" : "→"]} variant="neutral" />
</>
}
>

4
packages/ui/src/components/dropdown-menu.css
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%);
}

9
packages/ui/src/components/icon.tsx
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"

16
packages/ui/src/components/resize-handle.css
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;

6
packages/ui/src/components/resize-handle.tsx
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

2
packages/ui/src/components/scroll-view.css
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;

8
packages/ui/src/components/select.css
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;
}

4
packages/ui/src/components/switch.css
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);

80
packages/ui/src/components/tabs.css
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 {

1
packages/ui/src/components/tabs.tsx
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 }}

4
packages/ui/src/components/text-field.css
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;
}
}

8
packages/ui/src/v2/components/file-tree-v2.css
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);
}

21
packages/ui/src/v2/components/select-v2.css
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"]

8
packages/ui/src/v2/components/switch-v2.css
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;
}

12
packages/ui/src/v2/components/text-input-v2.css
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"] {