fix(chip): keep the dropdown inside the window

The `align` prop only chooses which edge a dropdown anchors to; on the
fixed 520px panel a rightmost chip's dropdown can still spill past the
left window edge — visible once an active repo filter shortens the
RepoChip label and shifts the chip row left. Measure the dropdown when
it opens and nudge it back inside with a transform.

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

Author: var-gg

src/components/ChipDropdown.tsx

@@ -1,4 +1,10 @@
-import { useEffect, useRef, type ReactNode } from "react";
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 
 interface Props {
   id: string;
@@ -24,6 +30,8 @@ export function ChipDropdown({
   align = "left",
 }: Props) {
   const ref = useRef<HTMLDivElement | null>(null);
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const [shift, setShift] = useState(0);
 
   useEffect(() => {
     if (!open) return;
@@ -42,6 +50,24 @@ export function ChipDropdown({
     };
   }, [open, onClose]);
 
+  // `align` only picks which edge to anchor to; on the fixed-width panel a
+  // dropdown can still spill past the opposite window edge. Once open,
+  // measure it and nudge it back inside with a transform.
+  useLayoutEffect(() => {
+    if (!open) return;
+    const el = dropdownRef.current;
+    if (!el) return;
+    const pad = 8;
+    const rect = el.getBoundingClientRect();
+    const baseLeft = rect.left - shift;
+    const baseRight = rect.right - shift;
+    let dx = 0;
+    if (baseLeft < pad) dx = pad - baseLeft;
+    else if (baseRight > window.innerWidth - pad)
+      dx = window.innerWidth - pad - baseRight;
+    if (dx !== shift) setShift(dx);
+  }, [open, align, shift]);
+
   // When the label itself is a string, surface it as the button title so
   // the truncated/ellipsised text still has a hover-reveal — caller can
   // still override with an explicit `title` prop.
@@ -63,7 +89,13 @@ export function ChipDropdown({
         <span className="chip-caret">▾</span>
       </button>
       {open && (
-        <div className={"chip-dropdown chip-dropdown-" + align}>{children}</div>
+        <div
+          ref={dropdownRef}
+          className={"chip-dropdown chip-dropdown-" + align}
+          style={shift ? { transform: `translateX(${shift}px)` } : undefined}
+        >
+          {children}
+        </div>
       )}
     </div>
   );