From 35f9fa6e25301041860cbd5b93697a3f97fcb99c Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>
Date: Fri, 29 May 2026 13:09:43 +0100
Subject: [PATCH] refactor(source-picker): glue kebab to the source Select as a
 split-button chip

The kebab `SourceManagementMenu` was rendered as a separate sibling of the
Select with a 4px gap, so it read as "Select plus an unrelated icon button"
rather than "actions on this source." Restyle the pair as a single
split-button chip: the input's right corners are squared, the kebab's left
corners are squared, the kebab stretches to match the input's height, and
its left border overlaps the input's right border by 1px so the two share a
single seam. Override Mantine v7 corners via `--input-radius` /
`--ai-radius` (the canonical override path) instead of fighting class-level
`border-radius` against `@layer mantine`.

Also normalize the kebab tooltip to the app-wide convention (`withArrow`,
default color) so it matches `Filter Settings` and other gray-tinted tooltips
across the app.

When `hasMenu` is false (no handlers wired, e.g. `DBTableSelect` callers),
the `[data-with-menu]` attribute is omitted and the original side-by-side
layout is preserved.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 packages/app/src/components/SourceSelect.tsx  |  4 +-
 .../styles/SourceSelectControlled.module.scss | 46 ++++++++++++++++---
 2 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/packages/app/src/components/SourceSelect.tsx b/packages/app/src/components/SourceSelect.tsx
index 4766493636..d00e23e656 100644
--- a/packages/app/src/components/SourceSelect.tsx
+++ b/packages/app/src/components/SourceSelect.tsx
@@ -129,7 +129,7 @@ export const SourceManagementMenu = ({
   return (
     <Menu width={220} withinPortal position="bottom-end">
       <Menu.Target>
-        <Tooltip label="Source actions" color="dark" position="top">
+        <Tooltip label="Source actions" position="top" withArrow>
           <ActionIcon
             variant="subtle"
             color="gray"
@@ -212,7 +212,7 @@ function SourceSelectControlledComponent({
 
   return (
     <Group
-      gap={4}
+      gap={0}
       wrap="nowrap"
       className={styles.sourceSelectGroup}
       data-with-menu={hasMenu || undefined}
diff --git a/packages/app/styles/SourceSelectControlled.module.scss b/packages/app/styles/SourceSelectControlled.module.scss
index e9b3bc9ff9..6f648df5be 100644
--- a/packages/app/styles/SourceSelectControlled.module.scss
+++ b/packages/app/styles/SourceSelectControlled.module.scss
@@ -20,12 +20,47 @@
   }
 }
 
-/* Chip + kebab wrapper. Holds the Mantine Select and the adjacent
- * SourceManagementMenu ActionIcon as a single inline-flex unit.
+/* Chip + kebab wrapper. Holds the Mantine Select and the SourceManagementMenu
+ * ActionIcon as a single inline-flex unit. When the kebab is present
+ * (`[data-with-menu]`), the two surfaces are "glued" into a split-button chip:
+ * the adjoining corners are squared, the kebab overlaps the input's right
+ * border by 1px so they share a single vertical seam, and the kebab stretches
+ * to match the input's height so the chip reads as one unit.
+ *
+ * Override Mantine via its own CSS variables (`--input-radius`, `--ai-radius`)
+ * rather than fighting class-level `border-radius`: Mantine v7 reads these
+ * vars to compute the rounded corners, so setting them is the canonical
+ * override path.
  */
 .sourceSelectGroup {
   display: inline-flex;
-  align-items: center;
+  align-items: stretch;
+  gap: 0;
+
+  &[data-with-menu] {
+    /* Square only the right edge of the input. */
+    .sourceSelectInput {
+      --input-radius: 0;
+
+      border-top-left-radius: var(--mantine-radius-default);
+      border-bottom-left-radius: var(--mantine-radius-default);
+    }
+
+    /* Square only the left edge of the kebab. Fixed 30px height matches the
+     * input chip; -1px margin overlaps the input's right edge so the shared
+     * border is one pixel wide, not two. */
+    .sourceMenuButton {
+      --ai-radius: 0;
+
+      width: 30px;
+      height: 30px;
+      margin-left: -1px;
+      background-color: var(--color-bg-field-addon);
+      border: 1px solid var(--input-bd, var(--color-border));
+      border-top-right-radius: var(--mantine-radius-default);
+      border-bottom-right-radius: var(--mantine-radius-default);
+    }
+  }
 }
 
 /* Chip hover state. The Mantine Select input is the "chip" surface;
@@ -49,9 +84,8 @@
   }
 }
 
-/* Kebab button hover. Mantine's subtle variant already provides a hover
- * tint; we just tighten the margin and ensure the icon sits flush with
- * the chip baseline.
+/* Kebab button. Mantine's subtle variant gives the hover tint; layout shared
+ * with the input is set up in the `[data-with-menu]` block above.
  */
 .sourceMenuButton {
   flex-shrink: 0;