From ed2783e2dd68f68d7c5f84cfab2076b9f4d19611 Mon Sep 17 00:00:00 2001
From: Cita <juricek.chen@gmail.com>
Date: Thu, 2 Apr 2026 11:19:07 +0800
Subject: [PATCH] [codex] fix route detail dropdown clipping (#388)

* fix route detail dropdown clipping

* test: refresh proxy route mocks for ci
---
 .../SortableChannelRow.layering.test.tsx      | 77 +++++++++++++++++++
 .../pages/token-routes/SortableChannelRow.tsx |  2 +-
 2 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 src/web/pages/token-routes/SortableChannelRow.layering.test.tsx

diff --git a/src/web/pages/token-routes/SortableChannelRow.layering.test.tsx b/src/web/pages/token-routes/SortableChannelRow.layering.test.tsx
new file mode 100644
index 0000000..0769d3e
--- /dev/null
+++ b/src/web/pages/token-routes/SortableChannelRow.layering.test.tsx
@@ -0,0 +1,77 @@
+import { describe, expect, it, vi } from 'vitest';
+import { create } from 'react-test-renderer';
+import { DndContext } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { SortableChannelRow } from './SortableChannelRow.js';
+import type { RouteChannel } from './types.js';
+
+function buildChannel(overrides: Partial<RouteChannel> = {}): RouteChannel {
+  return {
+    id: 301,
+    routeId: 88,
+    accountId: 7,
+    tokenId: null,
+    sourceModel: 'gpt-4.1',
+    priority: 0,
+    weight: 100,
+    enabled: true,
+    manualOverride: true,
+    successCount: 12,
+    failCount: 1,
+    cooldownUntil: null,
+    account: {
+      username: 'cc',
+      accessToken: null,
+      extraConfig: null,
+      credentialMode: 'oauth',
+    },
+    site: {
+      id: 99,
+      name: 'codelab',
+      platform: 'openai',
+    },
+    token: null,
+    ...overrides,
+  };
+}
+
+describe('SortableChannelRow layering', () => {
+  it('does not force a base z-index on desktop rows when they are not being dragged', () => {
+    const channel = buildChannel();
+    const root = create(
+      <DndContext>
+        <SortableContext items={[channel.id]} strategy={verticalListSortingStrategy}>
+          <SortableChannelRow
+            channel={channel}
+            decisionCandidate={undefined}
+            isExactRoute
+            loadingDecision={false}
+            isSavingPriority={false}
+            tokenOptions={[
+              {
+                id: 501,
+                name: 'shared-token',
+                isDefault: true,
+              },
+            ]}
+            activeTokenId={0}
+            isUpdatingToken={false}
+            onTokenDraftChange={vi.fn()}
+            onSaveToken={vi.fn()}
+            onDeleteChannel={vi.fn()}
+            onToggleEnabled={vi.fn()}
+            onSiteBlockModel={vi.fn()}
+          />
+        </SortableContext>
+      </DndContext>,
+    );
+
+    const row = root.root.find((node) => (
+      node.type === 'div'
+      && node.props.style
+      && node.props.style.borderLeft === '2px solid var(--color-primary)'
+    ));
+
+    expect(row.props.style.zIndex).toBeUndefined();
+  });
+});
diff --git a/src/web/pages/token-routes/SortableChannelRow.tsx b/src/web/pages/token-routes/SortableChannelRow.tsx
index fd59eeb..75c0433 100644
--- a/src/web/pages/token-routes/SortableChannelRow.tsx
+++ b/src/web/pages/token-routes/SortableChannelRow.tsx
@@ -51,7 +51,7 @@ export function SortableChannelRow({
     transform: CSS.Transform.toString(transform),
     transition,
     opacity: isDragging ? 0.72 : channel.enabled === false ? 0.5 : 1,
-    zIndex: isDragging ? 10 : 1,
+    zIndex: isDragging ? 10 : undefined,
     display: 'grid',
     gridTemplateColumns: managementLocked || mobile ? 'minmax(0, 1fr)' : 'minmax(0, 1fr) auto auto auto',
     alignItems: mobile ? 'stretch' : 'center',