fix(channels): pin project switcher menu width in button variant

The button-variant trigger spans the full sidebar width, so binding the
dropdown to --anchor-width stretched the menu and broke its layout. Pin a
fixed width for the button variant; the item variant still matches its anchor.

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

Author: adamleithp

packages/ui/src/features/canvas/components/ChannelsList.tsx

@@ -33,6 +33,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   MenuLabel,
+  Separator,
 } from "@posthog/quill";
 import type { Task } from "@posthog/shared/domain-types";
 import { CreateChannelModal } from "@posthog/ui/features/canvas/components/CreateChannelModal";
@@ -526,19 +527,22 @@ export function ChannelsList() {
   return (
     <>
       <Flex direction="column" gap="px" className="px-2 pb-2">
-        <Box className="px-2 py-1.5">
-          <MenuLabel className="uppercase">Channels</MenuLabel>
+        <Box className="py-1.5">
+          <Separator />
+        </Box>
+        <Box>
+          <MenuLabel className="group flex items-center justify-between uppercase">
+            Channels
+            <Button
+              variant="outline"
+              size="icon-xs"
+              onClick={() => setModalOpen(true)}
+              className="group-hover:border-border"
+            >
+              <PlusIcon size={14} />
+            </Button>
+          </MenuLabel>
         </Box>
-
-        <Button
-          variant="outline"
-          size="default"
-          className="mb-1 w-full justify-start gap-2"
-          onClick={() => setModalOpen(true)}
-        >
-          <PlusIcon size={14} />
-          New
-        </Button>
 
         {!isLoading && channels.length === 0 && (
           <Text size="1" className="px-2 text-gray-9">

packages/ui/src/features/sidebar/components/ProjectSwitcher.tsx

@@ -207,7 +207,14 @@ export function ProjectSwitcher({
       <DropdownMenuContent
         align="start"
         side="bottom"
-        className="w-(--anchor-width) max-w-(--anchor-width) pt-0"
+        className={
+          // The `button` trigger spans the full sidebar width, so binding the
+          // menu to `--anchor-width` would stretch it and break the layout. Pin
+          // a fixed width there; the `item` trigger matches its anchor.
+          triggerVariant === "button"
+            ? "w-64 min-w-64 pt-0"
+            : "w-(--anchor-width) max-w-(--anchor-width) pt-0"
+        }
         sideOffset={4}
       >
         <Box>

packages/ui/src/router/routes/__root.tsx

@@ -217,8 +217,8 @@ function RootLayout() {
           <ChannelsSidebar />
           {/* Content sits in a bordered, rounded card inset from the window
               edges — the framed pane from the design. */}
-          <Box flexGrow="1" className="overflow-hidden px-2 pb-2">
-            <Box className="h-full overflow-hidden rounded-lg border border-gray-6 bg-gray-1">
+          <Box flexGrow="1" className="overflow-hidden pr-2 pb-2">
+            <Box className="h-full overflow-hidden rounded-sm border border-gray-6 bg-gray-1">
               <Outlet />
             </Box>
           </Box>

packages/ui/src/styles/globals.css

@@ -1049,6 +1049,10 @@ button,
   cursor: pointer;
 }
 
+.quill-button.quill-button--variant-outline:hover {
+  background-color: var(--color-fill-hover);
+}
+
 /* PostHog Lemon UI button style — applies to solid buttons in explicitly-light Theme wrappers
    (auth screen, onboarding flow). Uses the 3D depth shadow and lift-on-hover effect. */
 .radix-themes[data-appearance="light"] .rt-Button[data-variant="solid"] {