fix: adjust layout styles in search and top nav in dashboard page

src/components/layout/top-nav.tsx

@@ -21,10 +21,10 @@ type TopNavProps = React.HTMLAttributes<HTMLElement> & {
 export function TopNav({ className, links, ...props }: TopNavProps) {
   return (
     <>
-      <div className='md:hidden'>
+      <div className='lg:hidden'>
         <DropdownMenu modal={false}>
           <DropdownMenuTrigger asChild>
-            <Button size='icon' variant='outline'>
+            <Button size='icon' variant='outline' className='md:size-7'>
               <Menu />
             </Button>
           </DropdownMenuTrigger>
@@ -46,7 +46,7 @@ export function TopNav({ className, links, ...props }: TopNavProps) {
 
       <nav
         className={cn(
-          'hidden items-center space-x-4 md:flex lg:space-x-6',
+          'hidden items-center space-x-4 lg:flex lg:space-x-4 xl:space-x-6',
           className
         )}
         {...props}

src/components/search.tsx

@@ -18,7 +18,7 @@ export function Search({
     <Button
       variant='outline'
       className={cn(
-        'bg-muted/25 group text-muted-foreground hover:bg-accent relative h-8 w-full flex-1 justify-start rounded-md text-sm font-normal shadow-none sm:w-40 sm:pe-12 md:flex-none lg:w-56 xl:w-64',
+        'bg-muted/25 group text-muted-foreground hover:bg-accent relative h-8 w-full flex-1 justify-start rounded-md text-sm font-normal shadow-none sm:w-40 sm:pe-12 md:flex-none lg:w-52 xl:w-64',
         className
       )}
       onClick={() => setOpen(true)}