fix: restore sidebar scroll and show scrollbars on hover

src/components/ui/scroll-area.tsx

@@ -8,7 +8,10 @@ type ScrollAreaRootProps = React.ComponentProps<typeof ScrollArea.Root>
 function ScrollAreaRoot({ className, ...props }: ScrollAreaRootProps) {
   return (
     <ScrollArea.Root
-      className={cn('relative outline-none focus-visible:outline-none', className)}
+      className={cn(
+        'group/scroll-area relative outline-none focus-visible:outline-none',
+        className,
+      )}
       {...props}
     />
   )
@@ -19,7 +22,10 @@ type ScrollAreaViewportProps = React.ComponentProps<typeof ScrollArea.Viewport>
 function ScrollAreaViewport({ className, ...props }: ScrollAreaViewportProps) {
   return (
     <ScrollArea.Viewport
-      className={cn('h-full w-full outline-none focus-visible:outline-none', className)}
+      className={cn(
+        'h-full w-full outline-none focus-visible:outline-none',
+        className,
+      )}
       {...props}
     />
   )
@@ -38,7 +44,7 @@ function ScrollAreaScrollbar({
       className={cn(
         'flex w-2 touch-none select-none p-0.5 outline-none focus-visible:outline-none',
         'opacity-0 transition-opacity duration-150',
-        'data-hovering:opacity-100 data-scrolling:opacity-100',
+        'data-hovering:opacity-100 data-scrolling:opacity-100 group-hover/scroll-area:opacity-100',
         className,
       )}
       {...props}
@@ -52,7 +58,7 @@ function ScrollAreaThumb({ className, ...props }: ScrollAreaThumbProps) {
   return (
     <ScrollArea.Thumb
       className={cn(
-        'flex-1 rounded-full bg-primary-300 outline-none focus-visible:outline-none',
+        'flex-1 rounded-full bg-primary-500 outline-none focus-visible:outline-none',
         className,
       )}
       {...props}
@@ -65,7 +71,10 @@ type ScrollAreaCornerProps = React.ComponentProps<typeof ScrollArea.Corner>
 function ScrollAreaCorner({ className, ...props }: ScrollAreaCornerProps) {
   return (
     <ScrollArea.Corner
-      className={cn('bg-primary-100 outline-none focus-visible:outline-none', className)}
+      className={cn(
+        'bg-primary-100 outline-none focus-visible:outline-none',
+        className,
+      )}
       {...props}
     />
   )

src/screens/chat/components/chat-sidebar.tsx

@@ -210,7 +210,7 @@ function ChatSidebarComponent({
         </motion.div>
       </div>
 
-      <div className="flex-1 min-h-0 relative overflow-hidden">
+      <div className="flex-1 min-h-0 overflow-hidden">
         <AnimatePresence initial={false}>
           {!isCollapsed && (
             <motion.div
@@ -219,7 +219,7 @@ function ChatSidebarComponent({
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
               transition={transition}
-              className="absolute inset-0 pt-0 flex flex-col w-[300px] min-h-0"
+              className="pt-0 flex flex-col w-full min-h-0 h-full"
             >
               <div className="flex-1 min-h-0">
                 <SidebarSessions

src/screens/chat/components/sidebar/sidebar-sessions.tsx

@@ -7,6 +7,12 @@ import {
   CollapsibleTrigger,
   CollapsiblePanel,
 } from '@/components/ui/collapsible'
+import {
+  ScrollAreaRoot,
+  ScrollAreaViewport,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+} from '@/components/ui/scroll-area'
 import { SessionItem } from './session-item'
 import type { SessionMeta } from '../../types'
 import { memo } from 'react'
@@ -30,7 +36,7 @@ export const SidebarSessions = memo(function SidebarSessions({
 }: SidebarSessionsProps) {
   return (
     <Collapsible
-      className="flex flex-col flex-1 min-h-0 w-full px-2"
+      className="flex h-full flex-col flex-1 min-h-0 w-full"
       defaultOpen={defaultOpen}
     >
       <CollapsibleTrigger className="w-fit pl-1.5 shrink-0">
@@ -43,23 +49,28 @@ export const SidebarSessions = memo(function SidebarSessions({
         </span>
       </CollapsibleTrigger>
       <CollapsiblePanel
-        className="w-full flex-1 min-h-0 !h-full data-starting-style:!h-0 data-ending-style:!h-0"
-        contentClassName="flex-1 min-h-0"
+        className="w-full flex-1 min-h-0 h-auto data-starting-style:h-0 data-ending-style:h-0"
+        contentClassName="flex flex-1 min-h-0 flex-col overflow-y-auto"
       >
-        <div className="h-full w-full overflow-y-auto">
-          <div className="flex flex-col gap-px">
-            {sessions.map((session) => (
-              <SessionItem
-                key={session.key}
-                session={session}
-                active={session.friendlyId === activeFriendlyId}
-                onSelect={onSelect}
-                onRename={onRename}
-                onDelete={onDelete}
-              />
-            ))}
-          </div>
-        </div>
+        <ScrollAreaRoot className="flex-1 min-h-0">
+          <ScrollAreaViewport className="min-h-0">
+            <div className="flex flex-col gap-px pl-2 pr-2">
+              {sessions.map((session) => (
+                <SessionItem
+                  key={session.key}
+                  session={session}
+                  active={session.friendlyId === activeFriendlyId}
+                  onSelect={onSelect}
+                  onRename={onRename}
+                  onDelete={onDelete}
+                />
+              ))}
+            </div>
+          </ScrollAreaViewport>
+          <ScrollAreaScrollbar orientation="vertical">
+            <ScrollAreaThumb />
+          </ScrollAreaScrollbar>
+        </ScrollAreaRoot>
       </CollapsiblePanel>
     </Collapsible>
   )