fix(dashboard): Improve responsive layouts for page, data table, asset gallery

packages/dashboard/src/lib/components/data-table/data-table-pagination.tsx

@@ -17,7 +17,7 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
             </div>
             <div className="flex items-center space-x-6 lg:space-x-8">
                 <div className="flex items-center space-x-2">
-                    <p className="text-sm font-medium">Rows per page</p>
+                    <p className="hidden md:block text-sm font-medium">Rows per page</p>
                     <Select
                         value={`${table.getState().pagination.pageSize}`}
                         onValueChange={value => {
@@ -36,8 +36,10 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
                         </SelectContent>
                     </Select>
                 </div>
-                <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-                    Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+                <div className=" flex items-center justify-center text-sm font-medium">
+                    <span className="hidden md:block w-[100px] ">
+                        Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+                    </span>
                 </div>
                 <div className="flex items-center space-x-2">
                     <Button
@@ -60,6 +62,7 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
                         <span className="sr-only">Go to previous page</span>
                         <ChevronLeft />
                     </Button>
+                    <span className="md:hidden">{table.getState().pagination.pageIndex + 1}</span>
                     <Button
                         variant="outline"
                         type="button"

packages/dashboard/src/lib/components/shared/asset/asset-gallery.tsx

@@ -16,8 +16,8 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { api } from '@/vdb/graphql/api.js';
 import { assetFragment, AssetFragment } from '@/vdb/graphql/fragments.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@lingui/react/macro';
 import { formatFileSize } from '@/vdb/lib/utils.js';
+import { Trans } from '@lingui/react/macro';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 import { Loader2, Search, Upload, X } from 'lucide-react';
@@ -153,18 +153,18 @@ export interface AssetGalleryProps {
  * @docsWeight 0
  */
 export function AssetGallery({
-                                 onSelect,
-                                 selectable = true,
-                                 multiSelect = undefined,
-                                 initialSelectedAssets = [],
-                                 pageSize = 24,
-                                 fixedHeight = false,
-                                 showHeader = true,
-                                 className = '',
-                                 onFilesDropped,
-                                 bulkActions,
-                                 displayBulkActions = true,
-                             }: AssetGalleryProps) {
+    onSelect,
+    selectable = true,
+    multiSelect = undefined,
+    initialSelectedAssets = [],
+    pageSize = 24,
+    fixedHeight = false,
+    showHeader = true,
+    className = '',
+    onFilesDropped,
+    bulkActions,
+    displayBulkActions = true,
+}: AssetGalleryProps) {
     // State
     const [page, setPage] = useState(1);
     const [search, setSearch] = useState('');
@@ -380,8 +380,7 @@ export function AssetGallery({
                 <input {...getInputProps()} />
 
                 {isDragActive && (
-                    <div
-                        className="absolute inset-0 bg-background/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center rounded-md">
+                    <div className="absolute inset-0 bg-background/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center rounded-md">
                         <Upload className="h-12 w-12 text-primary mb-2" />
                         <p className="text-center font-medium">Drop files here to upload</p>
                     </div>
@@ -389,7 +388,7 @@ export function AssetGallery({
 
                 <div
                     data-asset-gallery
-                    className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 p-1"
+                    className="grid grid-cols-2 xs:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 p-1"
                 >
                     {isLoading ? (
                         <div className="col-span-full flex justify-center py-12">

packages/dashboard/src/lib/framework/layout-engine/page-layout.tsx

@@ -276,17 +276,17 @@ export function PageLayout({ children, className }: Readonly<PageLayoutProps>) {
     const sideBlocks = finalChildArray.filter(child => isPageBlock(child) && child.props.column === 'side');
 
     return (
-        <div className={cn('w-full space-y-4', className)}>
+        <div className={cn('w-full space-y-4', className, '@container/layout')}>
             {isDesktop ? (
-                <div className="hidden md:grid md:grid-cols-5 lg:grid-cols-4 md:gap-4">
+                <div className="grid grid-cols-1 gap-4 @3xl/layout:grid-cols-4">
                     {fullWidthBlocks.length > 0 && (
-                        <div className="md:col-span-5 space-y-4">{fullWidthBlocks}</div>
+                        <div className="@md/layout:col-span-5 space-y-4">{fullWidthBlocks}</div>
                     )}
-                    <div className="md:col-span-3 space-y-4">{mainBlocks}</div>
-                    <div className="md:col-span-2 lg:col-span-1 space-y-4">{sideBlocks}</div>
+                    <div className="@3xl/layout:col-span-3 space-y-4">{mainBlocks}</div>
+                    <div className="@3xl/layout:col-span-1 space-y-4">{sideBlocks}</div>
                 </div>
             ) : (
-                <div className="md:hidden space-y-4">{children}</div>
+                <div className="space-y-4">{children}</div>
             )}
         </div>
     );
@@ -586,7 +586,9 @@ export function PageBlock({
                             {description && <CardDescription>{description}</CardDescription>}
                         </CardHeader>
                     ) : null}
-                    <CardContent className={cn(!title ? 'pt-6' : '')}>{children}</CardContent>
+                    <CardContent className={cn(!title ? 'pt-6' : '', 'overflow-auto')}>
+                        {children}
+                    </CardContent>
                 </Card>
             </LocationWrapper>
         </PageBlockContext.Provider>