fix(ui-react): address review comments on PR #6233

- Fix min-h-screen → h-full on <aside> in SidebarShell so the sidebar
  fills its flex parent (h-screen → flex-1 min-h-0) correctly instead
  of forcing 100vh regardless of containment
- Remove dead code from useSidebarLayout: hover-expand state/handlers
  (expanded, pinned, hoverTimer, handleExpand, handleCollapse,
  handleToggle) and corresponding hover/focus/toggle handlers are no
  longer used since desktop sidebar is always open; simplify
  isOpen = isDesktop
- Remove pinned prop from Sidebar, AdminSidebar, and SidebarShell;
  simplify toggle button to a static close action

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: luannmoreira

ui-react/apps/console/src/components/layout/AdminLayout.tsx

@@ -6,13 +6,13 @@ import { useSidebarLayout } from "@/hooks/useSidebarLayout";
 
 export default function AdminLayout() {
   const { pathname } = useLocation();
-  const { isOpen, pinned, isDesktop, drawerOpen, handlers } = useSidebarLayout();
+  const { isOpen, isDesktop, drawerOpen, handlers } = useSidebarLayout();
 
   return (
     <div className="flex flex-col h-screen bg-background">
       <div className="flex flex-1 min-h-0 overflow-hidden">
         {isDesktop ? (
-          <AdminSidebar expanded={isOpen} pinned={pinned} />
+          <AdminSidebar expanded={isOpen} />
         ) : (
           <SidebarMobileDrawer
             open={drawerOpen}
@@ -21,7 +21,6 @@ export default function AdminLayout() {
           >
             <AdminSidebar
               expanded
-              pinned={false}
               onToggle={handlers.closeDrawer}
               onClose={handlers.closeDrawer}
             />

ui-react/apps/console/src/components/layout/AdminSidebar.tsx

@@ -168,12 +168,10 @@ function NavGroupItem({
 
 export default function AdminSidebar({
   expanded,
-  pinned,
   onToggle,
   onClose,
 }: {
   expanded: boolean;
-  pinned: boolean;
   onToggle?: () => void;
   onClose?: () => void;
 }) {
@@ -200,7 +198,6 @@ export default function AdminSidebar({
   return (
     <SidebarShell
       expanded={expanded}
-      pinned={pinned}
       onToggle={onToggle}
       onClose={onClose}
       ariaLabel="Admin navigation"

ui-react/apps/console/src/components/layout/AppLayout.tsx

@@ -15,7 +15,7 @@ export default function AppLayout() {
   const hasVisibleTerminal = useTerminalStore((s) =>
     s.sessions.some((t) => t.state !== "minimized"),
   );
-  const { isOpen, pinned, isDesktop, drawerOpen, handlers } = useSidebarLayout();
+  const { isOpen, isDesktop, drawerOpen, handlers } = useSidebarLayout();
 
   const showSidebar = namespaces.length > 0;
   const sidebarOffset =
@@ -28,7 +28,7 @@ export default function AppLayout() {
       <ConnectivityBanner />
       <div className="flex flex-1 min-h-0">
         {showSidebar && isDesktop && (
-          <Sidebar expanded={isOpen} pinned={pinned} />
+          <Sidebar expanded={isOpen} />
         )}
         {showSidebar && !isDesktop && (
           <SidebarMobileDrawer
@@ -38,7 +38,6 @@ export default function AppLayout() {
           >
             <Sidebar
               expanded
-              pinned={false}
               onToggle={handlers.closeDrawer}
               onClose={handlers.closeDrawer}
             />

ui-react/apps/console/src/components/layout/Sidebar.tsx

@@ -98,12 +98,10 @@ function ProBadge() {
 
 export default function Sidebar({
   expanded,
-  pinned,
   onToggle,
   onClose,
 }: {
   expanded: boolean;
-  pinned: boolean;
   onToggle?: () => void;
   onClose?: () => void;
 }) {
@@ -120,7 +118,6 @@ export default function Sidebar({
   return (
     <SidebarShell
       expanded={expanded}
-      pinned={pinned}
       onToggle={onToggle}
       onClose={onClose}
       hidden={isFullscreen}

ui-react/apps/console/src/components/layout/SidebarShell.tsx

@@ -108,7 +108,6 @@ export function SidebarMobileDrawer({
 
 interface SidebarShellProps {
   expanded: boolean;
-  pinned: boolean;
   onToggle?: () => void;
   onClose?: () => void;
   hidden?: boolean;
@@ -120,7 +119,6 @@ interface SidebarShellProps {
 
 export default function SidebarShell({
   expanded,
-  pinned,
   onToggle,
   onClose,
   hidden,
@@ -131,7 +129,7 @@ export default function SidebarShell({
 }: SidebarShellProps) {
   return (
     <aside
-      className={`bg-surface border-r border-border flex flex-col min-h-screen shrink-0 transition-all duration-200 ease-in-out overflow-hidden ${
+      className={`bg-surface border-r border-border flex flex-col h-full shrink-0 transition-all duration-200 ease-in-out overflow-hidden ${
         hidden ? "w-0 opacity-0" : expanded ? "w-[220px]" : "w-[60px]"
       }`}
     >
@@ -177,14 +175,10 @@ export default function SidebarShell({
             type="button"
             onClick={onToggle}
             tabIndex={expanded ? 0 : -1}
-            aria-label={pinned ? "Unpin sidebar" : "Pin sidebar"}
-            title={pinned ? "Unpin sidebar" : "Pin sidebar open"}
-            className={`p-1 rounded-md transition-all duration-200 ${
+            aria-label="Close sidebar"
+            title="Close sidebar"
+            className={`p-1 rounded-md transition-all duration-200 text-text-muted hover:text-text-primary hover:bg-hover-subtle ${
               expanded ? "opacity-100" : "opacity-0"
-            } ${
-              pinned
-                ? "text-primary bg-primary/10"
-                : "text-text-muted hover:text-text-primary hover:bg-hover-subtle"
             }`}
           >
             <ChevronLeftIcon

ui-react/apps/console/src/hooks/useSidebarLayout.ts

@@ -1,7 +1,5 @@
 import {
   useState,
-  useRef,
-  useEffect,
   useSyncExternalStore,
 } from "react";
 
@@ -24,8 +22,6 @@ function getIsDesktopServer() {
 }
 
 export function useSidebarLayout() {
-  const [expanded, setExpanded] = useState(false);
-  const [pinned, setPinned] = useState(false);
   const [drawerOpen, setDrawerOpen] = useState(false);
 
   const isDesktop = useSyncExternalStore(
@@ -34,43 +30,19 @@ export function useSidebarLayout() {
     getIsDesktopServer,
   );
 
-  const hoverTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
-
-  const isOpen = isDesktop || expanded || pinned;
+  const isOpen = isDesktop;
 
   const openDrawer = () => setDrawerOpen(true);
   const closeDrawer = () => setDrawerOpen(false);
   const toggleDrawer = () => setDrawerOpen((prev) => !prev);
 
-  // Clean up hover timer on unmount
-  useEffect(() => () => clearTimeout(hoverTimer.current), []);
-
-  const handleExpand = () => {
-    clearTimeout(hoverTimer.current);
-    hoverTimer.current = setTimeout(() => setExpanded(true), 75);
-  };
-
-  const handleCollapse = () => {
-    clearTimeout(hoverTimer.current);
-    hoverTimer.current = setTimeout(() => setExpanded(false), 150);
-  };
-
-  const handleToggle = () => { setPinned((prev) => !prev); };
-
   const handleDrawerKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Escape") closeDrawer(); };
 
   return {
-    expanded,
-    pinned,
     isOpen,
     isDesktop,
     drawerOpen,
     handlers: {
-      onMouseEnter: handleExpand,
-      onMouseLeave: handleCollapse,
-      onFocus: handleExpand,
-      onBlur: handleCollapse,
-      onToggle: handleToggle,
       openDrawer,
       closeDrawer,
       toggleDrawer,