Refine sidebar section header hit areas

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/components/SidebarSection.test.tsx

@@ -133,6 +133,73 @@ describe("SidebarSection", () => {
     expect(onOpenChange).toHaveBeenCalledWith(false);
   });
 
+  it("does not apply hover background classes to static section labels", async () => {
+    const currentRoot = createRoot(container);
+    root = currentRoot;
+
+    await act(async () => {
+      currentRoot.render(
+        <SidebarSection label="Work">
+          <a href="/issues">Issues</a>
+        </SidebarSection>,
+      );
+    });
+    await flushReact();
+
+    const workLabel = Array.from(container.querySelectorAll("span"))
+      .find((element) => element.textContent === "Work");
+    const staticLabelControl = workLabel?.parentElement;
+
+    expect(staticLabelControl?.tagName).toBe("DIV");
+    expect(staticLabelControl?.getAttribute("class")).not.toContain("hover:bg-accent/50");
+    expect(staticLabelControl?.getAttribute("class")).not.toContain("focus-visible:bg-accent/50");
+  });
+
+  it("keeps the header action outside the label menu hit area", async () => {
+    const onAction = vi.fn();
+    const currentRoot = createRoot(container);
+    root = currentRoot;
+
+    await act(async () => {
+      currentRoot.render(
+        <SidebarSection
+          label="Projects"
+          menu={{
+            ariaLabel: "Projects section actions",
+            actions: [{ type: "item", label: "Browse projects", href: "/projects" }],
+          }}
+          headerAction={{
+            ariaLabel: "New project",
+            icon: Plus,
+            onClick: onAction,
+          }}
+        >
+          <a href="/projects">Projects</a>
+        </SidebarSection>,
+      );
+    });
+    await flushReact();
+
+    const sectionMenuTrigger = container.querySelector('button[aria-label="Projects section actions"]');
+    const newProjectButton = container.querySelector('button[aria-label="New project"]');
+
+    expect(sectionMenuTrigger?.textContent).toContain("Projects");
+    expect(sectionMenuTrigger?.querySelector("svg")).toBeNull();
+    expect(sectionMenuTrigger?.getAttribute("class")).toContain("hover:bg-accent/50");
+    expect(newProjectButton).toBeTruthy();
+
+    await act(async () => {
+      newProjectButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+    await flushReact();
+
+    expect(onAction).toHaveBeenCalledTimes(1);
+    expect(document.body.textContent).not.toContain("Browse projects");
+
+    await openSectionMenu(container);
+    expect(document.body.textContent).toContain("Browse projects");
+  });
+
   it("renders configured menu actions and radio choices", async () => {
     const onAction = vi.fn();
     const onRadioValueChange = vi.fn();

ui/src/components/SidebarSection.tsx

@@ -95,7 +95,11 @@ function SidebarSectionHeader({
       <DropdownMenuTrigger asChild>
         <button
           type="button"
-          className="flex min-w-0 flex-1 items-center py-0.5 text-left outline-none"
+          className={cn(
+            "inline-flex min-w-0 max-w-full items-center rounded-md px-1 py-0.5 text-left outline-none transition-colors",
+            "hover:bg-accent/50 focus-visible:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+            menuOpen && "bg-accent/50",
+          )}
           aria-label={menu?.ariaLabel ?? `${label} actions`}
         >
           {headerContent}
@@ -142,18 +146,12 @@ function SidebarSectionHeader({
       </DropdownMenuContent>
     </DropdownMenu>
   ) : (
-    <div className="flex min-w-0 flex-1 items-center py-0.5">{headerContent}</div>
+    <div className="inline-flex min-w-0 max-w-full items-center px-1 py-0.5">{headerContent}</div>
   );
 
   return (
     <div className="group/sidebar-section px-3 py-1.5">
-      <div
-        className={cn(
-          "relative flex min-h-6 items-center gap-1 rounded-md px-1 transition-colors",
-          "hover:bg-accent/50 focus-within:bg-accent/50",
-          menuOpen && "bg-accent/50",
-        )}
-      >
+      <div className="relative flex min-h-6 min-w-0 items-center gap-1">
         {collapsible ? (
           <CollapsibleTrigger asChild>
             <button