Fix collapsed sidebar intercepting clicks and scrolling horizontally

The invisible SidebarGroupLabel (opacity-0 + -mt-8) was overlapping the
last icon of the preceding group and intercepting pointer events, making
some icons unclickable. Also constrained SidebarContent to vertical
scroll only and hide nav item labels via CSS when collapsed.

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

Author: bchapuis

apps/app/src/components/sidebar/nav-main.tsx

@@ -11,7 +11,6 @@ import {
   SidebarMenuItem,
   useSidebar,
 } from "@/components/ui/sidebar";
-import { cn } from "@/utils/utils";
 
 import { NavLink } from "../nav-link";
 
@@ -45,7 +44,7 @@ const NAV_ITEM_TOUR_MAP: Record<string, string> = {
   Billing: "billing-nav",
 };
 
-function NavMainItem({ item, open }: { item: NavMainItem; open: boolean }) {
+function NavMainItem({ item }: { item: NavMainItem }) {
   const dataTour = NAV_ITEM_TOUR_MAP[item.title];
 
   return (
@@ -58,16 +57,11 @@ function NavMainItem({ item, open }: { item: NavMainItem; open: boolean }) {
         <NavLink
           to={item.url}
           end={item.end}
-          className="whitespace-nowrap"
+          className="overflow-hidden whitespace-nowrap"
           activeClassName="[&>span]:text-foreground! bg-neutral-300/50 dark:bg-neutral-600/50 hover:bg-neutral-300/50 dark:hover:bg-neutral-600/50 focus:bg-neutral-300/50 dark:focus:bg-neutral-600/50 active:bg-neutral-300/50 dark:active:bg-neutral-600/50"
         >
           {item.icon && <item.icon />}
-          <span
-            className={cn(
-              "text-sm transition-opacity text-neutral-600 dark:text-neutral-400",
-              open ? "opacity-100" : "opacity-0"
-            )}
-          >
+          <span className="text-sm text-neutral-600 dark:text-neutral-400 group-data-[collapsible=icon]:hidden">
             {item.title}
           </span>
         </NavLink>
@@ -103,7 +97,7 @@ export function NavMain({ groups, footerItems }: NavMainProps) {
             )}
             <SidebarMenu className="bg-transparent">
               {group.items.map((item) => (
-                <NavMainItem key={item.title} item={item} open={open} />
+                <NavMainItem key={item.title} item={item} />
               ))}
             </SidebarMenu>
           </SidebarGroup>
@@ -113,21 +107,16 @@ export function NavMain({ groups, footerItems }: NavMainProps) {
         <SidebarMenu className="bg-transparent px-4">
           {footerItems &&
             footerItems.map((item) => (
-              <NavMainItem key={item.title} item={item} open={open} />
+              <NavMainItem key={item.title} item={item} />
             ))}
           <SidebarMenuItem>
             <SidebarMenuButton
               tooltip="Toggle sidebar"
               onClick={toggleSidebar}
-              className="hover:bg-neutral-200/50 dark:hover:bg-neutral-800/50 transition-colors mt-1 mb-5"
+              className="hover:bg-neutral-200/50 dark:hover:bg-neutral-800/50 transition-colors mt-1 mb-5 overflow-hidden whitespace-nowrap"
             >
               {open ? <PanelLeftClose /> : <PanelLeftOpen />}
-              <span
-                className={cn(
-                  "uppercase text-semibold text-xs transition-opacity",
-                  open ? "opacity-100" : "opacity-0"
-                )}
-              >
+              <span className="uppercase text-semibold text-xs group-data-[collapsible=icon]:hidden">
                 Collapse
               </span>
             </SidebarMenuButton>

apps/app/src/components/ui/sidebar.tsx

@@ -386,7 +386,7 @@ const SidebarContent = React.forwardRef<
       ref={ref}
       data-sidebar="content"
       className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto",
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden",
         className
       )}
       {...props}
@@ -422,7 +422,7 @@ const SidebarGroupLabel = React.forwardRef<
       data-sidebar="group-label"
       className={cn(
         "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 group-data-[collapsible=icon]:pointer-events-none",
         className
       )}
       {...props}

apps/app/src/components/workflow/fields/document-field.tsx

@@ -67,7 +67,7 @@ export function DocumentField({
             "relative rounded-md overflow-hidden border",
             disabled && "bg-muted/50 border-border",
             !disabled &&
-            "bg-background border-neutral-300 dark:border-neutral-700",
+              "bg-background border-neutral-300 dark:border-neutral-700",
             className
           )}
         >
@@ -83,7 +83,7 @@ export function DocumentField({
             "relative rounded-md overflow-hidden border",
             disabled && "bg-muted/50 border-border",
             !disabled &&
-            "bg-background border-neutral-300 dark:border-neutral-700",
+              "bg-background border-neutral-300 dark:border-neutral-700",
             className
           )}
         >

apps/app/src/pages/playground-page.tsx

@@ -93,10 +93,7 @@ export function PlaygroundPage() {
   };
 
   return (
-    <InsetLayout
-      title="Playground"
-      childrenClassName="flex flex-col h-full"
-    >
+    <InsetLayout title="Playground" childrenClassName="flex flex-col h-full">
       <div className="flex flex-col gap-4 min-h-0 flex-1">
         {/* Search */}
         <div className="relative shrink-0">

apps/app/src/pages/templates-page.tsx

@@ -119,10 +119,7 @@ export function TemplatesPage() {
   }
 
   return (
-    <InsetLayout
-      title="Templates"
-      childrenClassName="flex flex-col h-full"
-    >
+    <InsetLayout title="Templates" childrenClassName="flex flex-col h-full">
       <div className="flex flex-col gap-4 min-h-0 flex-1">
         {/* Search */}
         <div className="relative shrink-0">