From 72d3bda769df1c3f02fe33f5e877d13e0eda80d0 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Wed, 2 Sep 2026 11:13:19 -0700
Subject: [PATCH] fix(import): shrink the conflict control and fold its help
 inside it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The conflict row's segmented control ran at the default size with the help
icon floating outside the group. Drop it to the smallest button size and
hand the help to the control, which shows it in its last option whenever
the label is hidden — the only case where the label has nowhere to put it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 apps/yaak-client/components/ImportDataDialog.tsx     |  5 +++--
 .../yaak-client/components/core/SegmentedControl.tsx | 12 ++++++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/apps/yaak-client/components/ImportDataDialog.tsx b/apps/yaak-client/components/ImportDataDialog.tsx
index aa612fef..ec7e5805 100644
--- a/apps/yaak-client/components/ImportDataDialog.tsx
+++ b/apps/yaak-client/components/ImportDataDialog.tsx
@@ -571,11 +571,13 @@ function ImportTreeRow({
       )}
       <div className="truncate flex-1">{item.name}</div>
       {item.action === "conflict" ? (
-        <div className="shrink-0 flex items-center gap-1.5">
+        <div className="shrink-0">
           <SegmentedControl
             name={`conflict-${item.modelId}`}
             label={`Resolve conflict for ${item.name}`}
             hideLabel
+            size="2xs"
+            help={actionHelp(item)}
             value={item.resolution ?? "keep_mine"}
             onChange={(v) => onResolveConflict(item.modelId, v)}
             options={[
@@ -583,7 +585,6 @@ function ImportTreeRow({
               { value: "take_source", label: "Take source" },
             ]}
           />
-          <IconTooltip content={actionHelp(item)} iconSize="sm" />
         </div>
       ) : (
         actionLabel(item) && (
diff --git a/apps/yaak-client/components/core/SegmentedControl.tsx b/apps/yaak-client/components/core/SegmentedControl.tsx
index 4b6022f5..aa9aca85 100644
--- a/apps/yaak-client/components/core/SegmentedControl.tsx
+++ b/apps/yaak-client/components/core/SegmentedControl.tsx
@@ -6,6 +6,7 @@ import { useStateWithDeps } from "../../hooks/useStateWithDeps";
 import { generateId } from "../../lib/generateId";
 import { Button } from "./Button";
 import { IconButton, type IconButtonProps } from "./IconButton";
+import { IconTooltip } from "./IconTooltip";
 import { Label } from "./Label";
 
 interface Props<T extends string> {
@@ -36,11 +37,15 @@ export function SegmentedControl<T extends string>({
   const containerRef = useRef<HTMLDivElement>(null);
   const id = useRef(`input-${generateId()}`);
 
+  // A visually hidden label has nowhere to show the help, so the last option carries it
+  const inlineHelp =
+    hideLabel && help ? <IconTooltip tabIndex={-1} content={help} iconSize="xs" /> : null;
+
   return (
     <div className="w-full grid">
       <Label
         htmlFor={id.current}
-        help={help}
+        help={hideLabel ? undefined : help}
         visuallyHidden={hideLabel}
         className={classNames(labelClassName)}
       >
@@ -78,9 +83,10 @@ export function SegmentedControl<T extends string>({
           }
         }}
       >
-        {options.map((o) => {
+        {options.map((o, i) => {
           const isSelected = selectedValue === o.value;
           const isActive = value === o.value;
+          const rightSlot = i === options.length - 1 ? inlineHelp : null;
           if (o.icon == null) {
             return (
               <Button
@@ -95,6 +101,7 @@ export function SegmentedControl<T extends string>({
                   isActive && "text-text!",
                   "focus:ring-1 focus:ring-border-focus",
                 )}
+                rightSlot={rightSlot}
                 onClick={() => onChange(o.value)}
               >
                 {o.label}
@@ -117,6 +124,7 @@ export function SegmentedControl<T extends string>({
                 )}
                 title={o.label}
                 icon={o.icon}
+                rightSlot={rightSlot}
                 onClick={() => onChange(o.value)}
               />
             );