Pārlūkot izejas kodu

fix(dashboard): Fix scroll behaviour on asset picker dialog

Michael Bromley 4 mēneši atpakaļ
vecāks
revīzija
363043db14

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

@@ -234,7 +234,7 @@ export function AssetGallery({
     };
 
     return (
-        <div className={`relative flex flex-col w-full ${fixedHeight ? 'h-[600px]' : ''} ${className}`}>
+        <div className={`relative flex flex-col w-full ${fixedHeight ? 'h-[600px]' : 'h-full'} ${className}`}>
             {showHeader && (
                 <div className="flex flex-col md:flex-row gap-2 mb-4 flex-shrink-0">
                     <div className="relative flex-grow flex items-center gap-2">
@@ -328,19 +328,21 @@ export function AssetGallery({
                                     />
                                     {selectable && (
                                         <div className="absolute top-2 left-2">
-                                            <Checkbox 
-                                                checked={isSelected(asset as Asset)} 
-                                                onClick={(e) => {
+                                            <Checkbox
+                                                checked={isSelected(asset as Asset)}
+                                                onClick={e => {
                                                     e.stopPropagation();
-                                                    const isCurrentlySelected = selected.some(a => a.id === asset.id);
+                                                    const isCurrentlySelected = selected.some(
+                                                        a => a.id === asset.id,
+                                                    );
                                                     let newSelected: Asset[];
-                                                    
+
                                                     if (isCurrentlySelected) {
                                                         newSelected = selected.filter(a => a.id !== asset.id);
                                                     } else {
                                                         newSelected = [...selected, asset as Asset];
                                                     }
-                                                    
+
                                                     setSelected(newSelected);
                                                     onSelect?.(newSelected);
                                                 }}

+ 5 - 5
packages/dashboard/src/lib/components/shared/asset/asset-picker-dialog.tsx

@@ -39,22 +39,22 @@ export function AssetPickerDialog({
 
     return (
         <Dialog open={open} onOpenChange={onClose}>
-            <DialogContent className="sm:max-w-[800px] lg:max-w-[1000px] max-h-[80vh] flex flex-col">
-                <DialogHeader>
+            <DialogContent className="sm:max-w-[800px] lg:max-w-[1000px] h-[85vh] p-0 flex flex-col">
+                <DialogHeader className="px-6 pt-6">
                     <DialogTitle>{multiSelect ? title : title.replace('Assets', 'Asset')}</DialogTitle>
                 </DialogHeader>
 
-                <div className="flex-grow py-4">
+                <div className="flex-1 overflow-y-auto px-6 pt-1">
                     <AssetGallery
                         onSelect={handleAssetSelect}
                         multiSelect="manual"
                         initialSelectedAssets={initialSelectedAssets}
-                        fixedHeight={true}
+                        fixedHeight={false}
                         displayBulkActions={false}
                     />
                 </div>
 
-                <DialogFooter>
+                <DialogFooter className="px-6 pb-6 pt-4 border-t">
                     <Button variant="outline" onClick={onClose}>
                         Cancel
                     </Button>