fix (?) sidebar

packages/website/src/components/ui/sidebar.tsx

@@ -196,7 +196,7 @@ const Sidebar = React.forwardRef<
           <SheetContent
             data-sidebar="sidebar"
             data-mobile="true"
-            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden border-r border-border"
+            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
             style={
               {
                 '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
@@ -232,14 +232,14 @@ const Sidebar = React.forwardRef<
         />
         <div
           className={cn(
-            'duration-200 absolute inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
+            'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
             side === 'left'
               ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
               : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
             // Adjust the padding for floating and inset variants.
             variant === 'floating' || variant === 'inset'
               ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
-              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l group-data-[side=left]:border-border group-data-[side=right]:border-border',
+              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
             className
           )}
           {...props}
@@ -503,7 +503,7 @@ const SidebarMenuItem = React.forwardRef<
   <li
     ref={ref}
     data-sidebar="menu-item"
-    className={cn('group/menu-item relative', className)}
+    className={cn('group/menu-item relative list-none', className)}
     {...props}
   />
 ));

packages/website/src/features/Search/SearchPage.tsx

@@ -90,7 +90,7 @@ export const SearchPage = () => {
   const groupedPackages = groupBy(packagesQuery?.data?.data, 'name');
 
   return (
-    <div className="flex min-h-screen flex-col max-w-full">
+    <div className="flex min-h-screen flex-col md:flex-row w-full">
       <SidebarProvider>
         {/* Mobile Sidebar Trigger - Fixed to left side */}
         <div className="fixed left-0 top-1/2 -translate-y-1/2 z-50 md:hidden bg-black border border-border border-l-0 rounded-r-lg">
@@ -104,8 +104,8 @@ export const SearchPage = () => {
           </SidebarTrigger>
         </div>
 
-        {/* Sidebar */}
-        <Sidebar className="w-[280px] md:w-[320px] shrink-0 border-r border-border">
+        {/* Sidebar - updated className */}
+        <Sidebar className="fixed md:sticky md:top-0 w-[280px] md:w-[320px] h-screen shrink-0 border-r border-border">
           <SidebarHeader className="px-4">
             <SearchInput onSearchChange={setSearchTerm} />
           </SidebarHeader>
@@ -160,9 +160,9 @@ export const SearchPage = () => {
           </SidebarContent>
         </Sidebar>
 
-        {/* Main Content */}
-        <main className="flex-1 overflow-y-auto ">
-          <div className="container max-w-100 mx-auto px-4 md:px-6">
+        {/* Main Content - updated className */}
+        <main className="flex-1 overflow-y-auto w-full md:w-[calc(100%-320px)] md:ml-auto">
+          <div className="container max-w-100 mx-auto px-4 md:px-6 lg:px-8 h-screen">
             {packagesQuery.isPending ? (
               <div className="flex justify-center items-center flex-1 h-full">
                 <CustomSpinner />