feat: 修改代码结构

packages/airo-ui/src/components/dialog.tsx

@@ -41,15 +41,16 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-0 container fixed left-[50%] top-[50%] z-50 h-full w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-auto border p-6 px-8 py-8 shadow-lg duration-200 sm:h-auto sm:!rounded-[32px] sm:px-12 sm:py-12',
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-0 container fixed left-[50%] top-[50%] z-50 flex h-full w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-4 border p-6 px-8 py-8 shadow-lg duration-200 sm:h-auto sm:!rounded-[32px] sm:px-12 sm:py-12',
         className,
       )}
       {...props}
     >
-      {children}
+      <div className={'flex-1 overflow-auto'}>{children}</div>
+
       <DialogPrimitive.Close
         className={cn(
-          'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-6 rounded-sm font-bold text-black opacity-100 transition-opacity hover:opacity-100 focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:pointer-events-none',
+          'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-6 z-[100] rounded-sm font-bold text-black opacity-100 transition-opacity hover:opacity-100 focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:pointer-events-none',
         )}
       >
         <div>

packages/airo-ui/src/custom-components/pro-list/pagination.tsx

@@ -26,12 +26,12 @@ interface PaginationProps<TData> {
 
 export function Pagination<TData>({ table, text }: PaginationProps<TData>) {
   return (
-    <div className='flex flex-wrap items-center justify-center gap-2'>
+    <div className='grid grid-cols-1 items-center justify-center gap-2 sm:flex sm:gap-[34px]'>
       <div className='whitespace-nowrap text-center text-[15px] text-[#666]'>
         {text?.textPageOf?.(table.getState().pagination.pageIndex + 1, table.getPageCount()) ||
           `Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`}
       </div>
-      <div className='ml-[34px] flex items-center justify-center gap-3'>
+      <div className='flex items-center justify-center gap-3'>
         {/*<div className='flex items-center space-x-2'>
            <p className='font-medium'>{text?.textRowsPerPage || 'Rows per page'}</p>
           <Select