feat(webapp): clearer disabled Reset, keyboard focus, new Columns icon

The disabled "Reset to default" differed from its enabled state by exactly one
thing: opacity 0.75 on the inner span. Text and icon colours were identical and
the background never changed (hover can't fire under pointer-events-none), so
the only cue was a 25% fade on already-dim text. It now carries three cues:
opacity drops to 50%, the label steps from text-bright down to text-dimmed so
the label/icon hierarchy flattens, and the cursor reads not-allowed. A tooltip
explains the condition ("Columns are already at their default") rather than
leaving a dead control with no reason. Both levers are theme-safe: verified
near-black-on-white vs mid-grey-at-50% in light, bright vs dimmed in dark.

Opening the popover with the shortcut now lets Radix focus the first row so the
list can be tabbed immediately; mouse opens still keep focus put, since moving
it would reveal that row's hover-only reorder handle. The popover is controlled
so the two paths can be told apart.

Also updates ColumnsIcon to the wider 18x16 body with lines at x=9 and x=15.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: samejr

apps/webapp/app/assets/icons/ColumnsIcon.tsx

@@ -1,9 +1,9 @@
 export function ColumnsIcon({ className }: { className?: string }) {
   return (
     <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <rect x="4" y="5" width="16" height="14" rx="2" stroke="currentColor" strokeWidth="2" />
-      <line x1="9.33334" y1="19" x2="9.33333" y2="5" stroke="currentColor" strokeWidth="2" />
-      <line x1="14.6667" y1="19" x2="14.6667" y2="5" stroke="currentColor" strokeWidth="2" />
+      <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="2" />
+      <line x1="9" y1="19" x2="9" y2="5" stroke="currentColor" strokeWidth="2" />
+      <line x1="15" y1="19" x2="15" y2="5" stroke="currentColor" strokeWidth="2" />
     </svg>
   );
 }

apps/webapp/app/components/runs/v3/RunsDisplayOptions.tsx

@@ -62,14 +62,17 @@ export function RunsDisplayOptions({
   const [editing, setEditing] = useState<SmartEditTarget | null>(null);
   const [dragKey, setDragKey] = useState<string | null>(null);
   const [overKey, setOverKey] = useState<string | null>(null);
-  const triggerRef = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+  // Whether this open came from the shortcut, which decides if focus moves into the list.
+  const openedByShortcut = useRef(false);
 
   useShortcutKeys({
     shortcut: COLUMNS_SHORTCUT,
     action: (event) => {
       event.preventDefault();
       event.stopPropagation();
-      triggerRef.current?.click();
+      openedByShortcut.current = true;
+      setOpen((previous) => !previous);
     },
   });
 
@@ -156,7 +159,13 @@ export function RunsDisplayOptions({
 
   return (
     <>
-      <Popover>
+      <Popover
+        open={open}
+        onOpenChange={(next) => {
+          setOpen(next);
+          if (!next) openedByShortcut.current = false;
+        }}
+      >
         <SimpleTooltip
           asChild
           side="bottom"
@@ -166,7 +175,7 @@ export function RunsDisplayOptions({
             // so the tooltip anchor can't be the Button itself (same as NotificationPanel).
             <div className="flex">
               <PopoverTrigger asChild>
-                <Button ref={triggerRef} variant="secondary/small" LeadingIcon={ColumnsIcon}>
+                <Button variant="secondary/small" LeadingIcon={ColumnsIcon}>
                   Columns
                 </Button>
               </PopoverTrigger>
@@ -182,9 +191,13 @@ export function RunsDisplayOptions({
         <PopoverContent
           align="end"
           className="w-64 p-0"
-          // Radix otherwise focuses the first item on open, and the row's hover-revealed
-          // reorder handle would show through :focus-within before the mouse ever gets there.
-          onOpenAutoFocus={(event) => event.preventDefault()}
+          // Opened by shortcut: let Radix focus the first row so the list can be tabbed
+          // straight away. Opened by mouse: keep focus put, or the first row's
+          // hover-revealed reorder handle would appear before the cursor ever got there.
+          onOpenAutoFocus={(event) => {
+            if (!openedByShortcut.current) event.preventDefault();
+            openedByShortcut.current = false;
+          }}
         >
           <div className="flex items-center justify-between px-3 py-2">
             <span className="text-xs font-medium text-text-dimmed">Columns</span>
@@ -243,12 +256,25 @@ export function RunsDisplayOptions({
                 className="h-8"
               />
             )}
-            <PopoverMenuItem
-              icon={ArrowUturnLeftIcon}
-              title="Reset to default"
-              onClick={reset}
-              disabled={!layout.isCustomized}
-              className="h-8"
+            <SimpleTooltip
+              asChild
+              side="bottom"
+              disableHoverableContent
+              hidden={layout.isCustomized}
+              button={
+                // The disabled button has pointer-events-none, so it can host neither the
+                // not-allowed cursor nor a tooltip; the wrapper carries both.
+                <div className={cn("flex", !layout.isCustomized && "cursor-not-allowed")}>
+                  <PopoverMenuItem
+                    icon={ArrowUturnLeftIcon}
+                    title="Reset to default"
+                    onClick={reset}
+                    disabled={!layout.isCustomized}
+                    className="h-8 group-disabled/button:opacity-50 group-disabled/button:[&_span]:text-text-dimmed"
+                  />
+                </div>
+              }
+              content="Columns are already at their default"
             />
           </div>
         </PopoverContent>