chore: update package versions and dependencies across multiple files (#413)

* chore: update package versions and dependencies across multiple files

- Bumped application version to 2.21.3 in package.json.
- Updated dependencies including turbo to version 2.6.1, @next/bundle-analyzer and @next/eslint-plugin-next to version 16.0.3, and @supabase/supabase-js to version 2.81.1.
- Adjusted @types/node, @types/react, and @types/react-dom versions for consistency.
- Refactored package.json files to utilize catalog dependencies for improved management.
- Incremented various other dependencies such as react-i18next to version 16.3.3 and tailwind-merge to version 3.4.0.

* chore: downgrade @next/bundle-analyzer and @next/eslint-plugin-next to version 16.0.2 and update next to version 16.0.2 in pnpm-lock.yaml and pnpm-workspace.yaml

- Updated package versions for consistency across the project.
- Adjusted the overflow property in the PageWithSidebar component for improved layout handling.

* feat: add sorting functionality to DataTable header

- Implemented click handler for sortable headers in the DataTable component, allowing users to toggle sorting between ascending and descending order.
- Enhanced user interaction by updating the header's visual state based on the current sorting direction.

* fix: update layout and structure in UserHomePage and DashboardDemo components

- Added a new div structure within the PageBody of UserHomePage for improved layout.
- Simplified the grid structure in DashboardDemo by adjusting the number of columns for better responsiveness.
- Enhanced the PageWithSidebar component to ensure proper flex behavior and layout consistency.

* refactor: simplify PageBody structure in UserHomePage

- Removed unnecessary div elements within the PageBody of UserHomePage for cleaner layout.
- Enhanced readability and maintainability of the component structure.

packages/ui/src/makerkit/data-table.tsx

@@ -358,6 +358,14 @@ export function DataTable<RecordData extends DataItem>({
                   >
                     {header.isPlaceholder ? null : (
                       <div
+                        onClick={() =>
+                          header.column.getCanSort() &&
+                          header.column.toggleSorting(
+                            header.column.getIsSorted() === 'asc'
+                              ? true
+                              : false,
+                          )
+                        }
                         className={cn(
                           'flex items-center gap-2',
                           header.column.getCanSort()
@@ -380,6 +388,7 @@ export function DataTable<RecordData extends DataItem>({
                                   : 'text-muted-foreground/50',
                               )}
                             />
+
                             <ChevronDown
                               className={cn(
                                 '-mt-1 h-3 w-3',

packages/ui/src/makerkit/page.tsx

@@ -35,18 +35,22 @@ function PageWithSidebar(props: PageProps) {
   const { Navigation, Children, MobileNavigation } = getSlotsFromPage(props);
 
   return (
-    <div className={cn('flex min-w-0 flex-1', props.className)}>
+    <div
+      className={cn('flex min-w-0 flex-1 overflow-x-hidden', props.className)}
+    >
       {Navigation}
 
       <div
         className={
           props.contentContainerClassName ??
-          'mx-auto flex h-screen w-full flex-col bg-inherit'
+          'mx-auto flex h-screen w-full min-w-0 flex-1 flex-col bg-inherit'
         }
       >
         {MobileNavigation}
 
-        <div className={'bg-background flex flex-1 flex-col px-4 lg:px-0'}>
+        <div
+          className={'bg-background flex min-w-0 flex-1 flex-col px-4 lg:px-0'}
+        >
           {Children}
         </div>
       </div>
@@ -109,13 +113,13 @@ export function PageBody(
     className?: string;
   }>,
 ) {
-  const className = cn('flex w-full flex-1 flex-col lg:px-4', props.className);
+  const className = cn('flex min-w-0 flex-1 flex-col lg:px-4', props.className);
 
   return <div className={className}>{props.children}</div>;
 }
 
 export function PageNavigation(props: React.PropsWithChildren) {
-  return <div className={'flex-1 bg-inherit'}>{props.children}</div>;
+  return <div className={'bg-inherit'}>{props.children}</div>;
 }
 
 export function PageDescription(props: React.PropsWithChildren) {