Improvements to the section dividers

Author: samejr

apps/webapp/app/components/navigation/EnvironmentSelector.tsx

@@ -91,7 +91,7 @@ export function EnvironmentSelector({
         isOpen={isMenuOpen}
         overflowHidden
         fullWidth
-        className={cn("h-8 overflow-hidden py-1 pl-0.5", className)}
+        className={cn("h-8 overflow-hidden py-1 pl-1.5", className)}
       >
         <span className="flex items-center gap-1.5 text-sm text-text-bright">
           <EnvironmentIcon environment={environment} className="size-5 shrink-0" />

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -156,7 +156,7 @@ export function SideMenu({
     <div
       className={cn(
         "relative grid h-full grid-rows-[2.5rem_1fr_auto] border-r border-grid-bright bg-background-bright transition-all duration-200",
-        isCollapsed ? "w-14" : "w-56"
+        isCollapsed ? "w-12" : "w-56"
       )}
     >
       <CollapseToggle isCollapsed={isCollapsed} onToggle={() => setIsCollapsed(!isCollapsed)} />
@@ -240,7 +240,7 @@ export function SideMenu({
             </div>
           </div>
 
-          <div>
+          <div className="space-y-px">
             <SideMenuItem
               name="Tasks"
               icon={TaskIconSmall}

apps/webapp/app/components/navigation/SideMenuItem.tsx

@@ -48,13 +48,32 @@ export function SideMenuItem({
         className="flex min-w-0 flex-1 items-center justify-between overflow-hidden"
         initial={false}
         animate={{
-          opacity: isCollapsed ? 0 : 1,
           width: isCollapsed ? 0 : "auto",
         }}
         transition={{ duration: 0.15, ease: "easeOut" }}
       >
-        <span className="truncate text-2sm">{name}</span>
-        {badge && <div className="ml-1 flex shrink-0 items-center gap-1">{badge}</div>}
+        <motion.span 
+          className="truncate text-2sm"
+          initial={false}
+          animate={{
+            opacity: isCollapsed ? 0 : 1,
+          }}
+          transition={{ duration: 0.15, ease: "easeOut" }}
+        >
+          {name}
+        </motion.span>
+        {badge && (
+          <motion.div 
+            className="ml-1 flex shrink-0 items-center gap-1"
+            initial={false}
+            animate={{
+              opacity: isCollapsed ? 0 : 1,
+            }}
+            transition={{ duration: 0.15, ease: "easeOut" }}
+          >
+            {badge}
+          </motion.div>
+        )}
       </motion.div>
     </Link>
   );

apps/webapp/app/components/navigation/SideMenuSection.tsx

@@ -30,27 +30,39 @@ export function SideMenuSection({
   }, [isCollapsed, onCollapseToggle]);
 
   return (
-    <div>
-      <motion.div
-        className="flex cursor-pointer items-center gap-1 overflow-hidden rounded-sm py-1 pl-1.5 text-text-dimmed transition hover:bg-charcoal-750 hover:text-text-bright"
-        onClick={handleToggle}
-        initial={false}
-        animate={{
-          height: isSideMenuCollapsed ? 0 : "auto",
-          opacity: isSideMenuCollapsed ? 0 : 1,
-          marginBottom: isSideMenuCollapsed ? 0 : undefined,
-        }}
-        transition={{ duration: 0.15, ease: "easeOut" }}
-      >
-        <h2 className="text-xs whitespace-nowrap">{title}</h2>
+    <div className="overflow-hidden">
+      {/* Header container - stays in DOM to preserve height */}
+      <div className="relative">
+        {/* Header - fades out when sidebar is collapsed */}
         <motion.div
-          initial={isCollapsed}
-          animate={{ rotate: isCollapsed ? -90 : 0 }}
-          transition={{ duration: 0.2 }}
+          className="flex cursor-pointer items-center gap-1 overflow-hidden rounded-sm py-1 pl-1.5 text-text-dimmed transition hover:bg-charcoal-750 hover:text-text-bright"
+          onClick={isSideMenuCollapsed ? undefined : handleToggle}
+          style={{ cursor: isSideMenuCollapsed ? "default" : "pointer" }}
+          initial={false}
+          animate={{
+            opacity: isSideMenuCollapsed ? 0 : 1,
+          }}
+          transition={{ duration: 0.15, ease: "easeOut" }}
         >
-          <ToggleArrowIcon className="size-2" />
+          <h2 className="text-xs whitespace-nowrap">{title}</h2>
+          <motion.div
+            initial={isCollapsed}
+            animate={{ rotate: isCollapsed ? -90 : 0 }}
+            transition={{ duration: 0.2 }}
+          >
+            <ToggleArrowIcon className="size-2" />
+          </motion.div>
         </motion.div>
-      </motion.div>
+        {/* Divider - absolutely positioned, visible when sidebar is collapsed */}
+        <motion.div
+          className="absolute left-2 right-2 top-1 w-full h-px bg-grid-bright"
+          initial={false}
+          animate={{
+            opacity: isSideMenuCollapsed ? 1 : 0,
+          }}
+          transition={{ duration: 0.15, ease: "easeOut" }}
+        />
+      </div>
       <AnimatePresence initial={false}>
         <motion.div
           initial={isCollapsed ? "collapsed" : "expanded"}
@@ -73,6 +85,7 @@ export function SideMenuSection({
           style={{ overflow: "hidden" }}
         >
           <motion.div
+            className="space-y-px"
             variants={{
               expanded: {
                 translateY: 0,