diff --git a/web/app/components/app/annotation/index.tsx b/web/app/components/app/annotation/index.tsx
index 8718890e35..32d0c799fc 100644
--- a/web/app/components/app/annotation/index.tsx
+++ b/web/app/components/app/annotation/index.tsx
@@ -139,7 +139,7 @@ const Annotation: FC<Props> = (props) => {
   return (
     <div className='flex h-full flex-col'>
       <p className='system-sm-regular text-text-tertiary'>{t('appLog.description')}</p>
-      <div className='flex h-full flex-1 flex-col py-4'>
+      <div className='relative flex h-full flex-1 flex-col py-4'>
         <Filter appId={appDetail.id} queryParams={queryParams} setQueryParams={setQueryParams}>
           <div className='flex items-center space-x-2'>
             {isChatApp && (
diff --git a/web/app/components/app/annotation/list.tsx b/web/app/components/app/annotation/list.tsx
index 70ecedb869..4135b4362e 100644
--- a/web/app/components/app/annotation/list.tsx
+++ b/web/app/components/app/annotation/list.tsx
@@ -54,95 +54,97 @@ const List: FC<Props> = ({
   }, [isAllSelected, list, selectedIds, onSelectedIdsChange])
 
   return (
-    <div className='relative grow overflow-x-auto'>
-      <table className={cn('mt-2 w-full min-w-[440px] border-collapse border-0')}>
-        <thead className='system-xs-medium-uppercase text-text-tertiary'>
-          <tr>
-            <td className='w-12 whitespace-nowrap rounded-l-lg bg-background-section-burn px-2'>
-              <Checkbox
-                className='mr-2'
-                checked={isAllSelected}
-                indeterminate={!isAllSelected && isSomeSelected}
-                onCheck={handleSelectAll}
-              />
-            </td>
-            <td className='w-5 whitespace-nowrap bg-background-section-burn pl-2 pr-1'>{t('appAnnotation.table.header.question')}</td>
-            <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.answer')}</td>
-            <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.createdAt')}</td>
-            <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.hits')}</td>
-            <td className='w-[96px] whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.actions')}</td>
-          </tr>
-        </thead>
-        <tbody className="system-sm-regular text-text-secondary">
-          {list.map(item => (
-            <tr
-              key={item.id}
-              className='cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover'
-              onClick={
-                () => {
-                  onView(item)
-                }
-              }
-            >
-              <td className='w-12 px-2' onClick={e => e.stopPropagation()}>
+    <>
+      <div className='relative mt-2 grow overflow-x-auto'>
+        <table className={cn('w-full min-w-[440px] border-collapse border-0')}>
+          <thead className='system-xs-medium-uppercase text-text-tertiary'>
+            <tr>
+              <td className='w-12 whitespace-nowrap rounded-l-lg bg-background-section-burn px-2'>
                 <Checkbox
                   className='mr-2'
-                  checked={selectedIds.includes(item.id)}
-                  onCheck={() => {
-                    if (selectedIds.includes(item.id))
-                      onSelectedIdsChange(selectedIds.filter(id => id !== item.id))
-                    else
-                      onSelectedIdsChange([...selectedIds, item.id])
-                  }}
+                  checked={isAllSelected}
+                  indeterminate={!isAllSelected && isSomeSelected}
+                  onCheck={handleSelectAll}
                 />
               </td>
-              <td
-                className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
-                title={item.question}
-              >{item.question}</td>
-              <td
-                className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
-                title={item.answer}
-              >{item.answer}</td>
-              <td className='p-3 pr-2'>{formatTime(item.created_at, t('appLog.dateTimeFormat') as string)}</td>
-              <td className='p-3 pr-2'>{item.hit_count}</td>
-              <td className='w-[96px] p-3 pr-2' onClick={e => e.stopPropagation()}>
-                {/* Actions */}
-                <div className='flex space-x-1 text-text-tertiary'>
-                  <ActionButton onClick={() => onView(item)}>
-                    <RiEditLine className='h-4 w-4' />
-                  </ActionButton>
-                  <ActionButton
-                    onClick={() => {
-                      setCurrId(item.id)
-                      setShowConfirmDelete(true)
-                    }}
-                  >
-                    <RiDeleteBinLine className='h-4 w-4' />
-                  </ActionButton>
-                </div>
-              </td>
+              <td className='w-5 whitespace-nowrap bg-background-section-burn pl-2 pr-1'>{t('appAnnotation.table.header.question')}</td>
+              <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.answer')}</td>
+              <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.createdAt')}</td>
+              <td className='whitespace-nowrap bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.hits')}</td>
+              <td className='w-[96px] whitespace-nowrap rounded-r-lg bg-background-section-burn py-1.5 pl-3'>{t('appAnnotation.table.header.actions')}</td>
             </tr>
-          ))}
-        </tbody>
-      </table>
-      <RemoveAnnotationConfirmModal
-        isShow={showConfirmDelete}
-        onHide={() => setShowConfirmDelete(false)}
-        onRemove={() => {
-          onRemove(currId as string)
-          setShowConfirmDelete(false)
-        }}
-      />
+          </thead>
+          <tbody className="system-sm-regular text-text-secondary">
+            {list.map(item => (
+              <tr
+                key={item.id}
+                className='cursor-pointer border-b border-divider-subtle hover:bg-background-default-hover'
+                onClick={
+                  () => {
+                    onView(item)
+                  }
+                }
+              >
+                <td className='w-12 px-2' onClick={e => e.stopPropagation()}>
+                  <Checkbox
+                    className='mr-2'
+                    checked={selectedIds.includes(item.id)}
+                    onCheck={() => {
+                      if (selectedIds.includes(item.id))
+                        onSelectedIdsChange(selectedIds.filter(id => id !== item.id))
+                      else
+                        onSelectedIdsChange([...selectedIds, item.id])
+                    }}
+                  />
+                </td>
+                <td
+                  className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
+                  title={item.question}
+                >{item.question}</td>
+                <td
+                  className='max-w-[250px] overflow-hidden text-ellipsis whitespace-nowrap p-3 pr-2'
+                  title={item.answer}
+                >{item.answer}</td>
+                <td className='p-3 pr-2'>{formatTime(item.created_at, t('appLog.dateTimeFormat') as string)}</td>
+                <td className='p-3 pr-2'>{item.hit_count}</td>
+                <td className='w-[96px] p-3 pr-2' onClick={e => e.stopPropagation()}>
+                  {/* Actions */}
+                  <div className='flex space-x-1 text-text-tertiary'>
+                    <ActionButton onClick={() => onView(item)}>
+                      <RiEditLine className='h-4 w-4' />
+                    </ActionButton>
+                    <ActionButton
+                      onClick={() => {
+                        setCurrId(item.id)
+                        setShowConfirmDelete(true)
+                      }}
+                    >
+                      <RiDeleteBinLine className='h-4 w-4' />
+                    </ActionButton>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <RemoveAnnotationConfirmModal
+          isShow={showConfirmDelete}
+          onHide={() => setShowConfirmDelete(false)}
+          onRemove={() => {
+            onRemove(currId as string)
+            setShowConfirmDelete(false)
+          }}
+        />
+      </div>
       {selectedIds.length > 0 && (
         <BatchAction
-          className='absolute bottom-6 left-1/2 z-20 -translate-x-1/2'
+          className='absolute bottom-20 left-0 z-20'
           selectedIds={selectedIds}
           onBatchDelete={onBatchDelete}
           onCancel={onCancel}
         />
       )}
-    </div>
+    </>
   )
 }
 export default React.memo(List)
diff --git a/web/app/components/app/log/list.tsx b/web/app/components/app/log/list.tsx
index 54cc345d2e..d21d35eeee 100644
--- a/web/app/components/app/log/list.tsx
+++ b/web/app/components/app/log/list.tsx
@@ -1030,8 +1030,8 @@ const ConversationList: FC<IConversationList> = ({ logs, appDetail, onRefresh })
     return <Loading />
 
   return (
-    <div className='relative grow overflow-x-auto'>
-      <table className={cn('mt-2 w-full min-w-[440px] border-collapse border-0')}>
+    <div className='relative mt-2 grow overflow-x-auto'>
+      <table className={cn('w-full min-w-[440px] border-collapse border-0')}>
         <thead className='system-xs-medium-uppercase text-text-tertiary'>
           <tr>
             <td className='w-5 whitespace-nowrap rounded-l-lg bg-background-section-burn pl-2 pr-1'></td>
diff --git a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
index 900ab3fb5a..c152ec5400 100644
--- a/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
+++ b/web/app/components/datasets/documents/detail/completed/common/batch-action.tsx
@@ -44,8 +44,8 @@ const BatchAction: FC<IBatchActionProps> = ({
     hideDeleteConfirm()
   }
   return (
-    <div className={cn('flex w-full justify-center gap-x-2', className)}>
-      <div className='flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5'>
+    <div className={cn('pointer-events-none flex w-full justify-center gap-x-2', className)}>
+      <div className='pointer-events-auto flex items-center gap-x-1 rounded-[10px] border border-components-actionbar-border-accent bg-components-actionbar-bg-accent p-1 shadow-xl shadow-shadow-shadow-5'>
         <div className='inline-flex items-center gap-x-2 py-1 pl-2 pr-3'>
           <span className='system-xs-medium flex h-5 w-5 items-center justify-center rounded-md bg-text-accent text-text-primary-on-surface'>
             {selectedIds.length}
diff --git a/web/app/components/datasets/documents/index.tsx b/web/app/components/datasets/documents/index.tsx
index 40e6d48a41..e09ab44701 100644
--- a/web/app/components/datasets/documents/index.tsx
+++ b/web/app/components/datasets/documents/index.tsx
@@ -283,7 +283,7 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
   })
 
   return (
-    <div className='flex h-full flex-col overflow-y-auto'>
+    <div className='flex h-full flex-col'>
       <div className='flex flex-col justify-center gap-1 px-6 pt-4'>
         <h1 className='text-base font-semibold text-text-primary'>{t('datasetDocuments.list.title')}</h1>
         <div className='flex items-center space-x-0.5 text-sm font-normal text-text-tertiary'>
@@ -298,7 +298,7 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
           </a>
         </div>
       </div>
-      <div className='flex flex-1 flex-col px-6 py-4'>
+      <div className='flex h-0 grow flex-col px-6 pt-4'>
         <div className='flex flex-wrap items-center justify-between'>
           <div className='flex items-center gap-2'>
             <Chip
diff --git a/web/app/components/datasets/documents/list.tsx b/web/app/components/datasets/documents/list.tsx
index b6b0335375..6f95d3cecb 100644
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@@ -285,9 +285,9 @@ const DocumentList: FC<IDocumentListProps> = ({
   }, [])
 
   return (
-    <div className='relative flex h-full w-full flex-col'>
-      <div className='relative grow overflow-x-auto'>
-        <table className={`mt-3 w-full min-w-[700px] max-w-full border-collapse border-0 text-sm ${s.documentTable}`}>
+    <div className='relative mt-3 flex h-full w-full flex-col'>
+      <div className='relative h-0 grow overflow-x-auto'>
+        <table className={`w-full min-w-[700px] max-w-full border-collapse border-0 text-sm ${s.documentTable}`}>
           <thead className="h-8 border-b border-divider-subtle text-xs font-medium uppercase leading-8 text-text-tertiary">
             <tr>
               <td className='w-12'>
@@ -455,7 +455,7 @@ const DocumentList: FC<IDocumentListProps> = ({
       {pagination.total && (
         <Pagination
           {...pagination}
-          className='w-full shrink-0 px-0 pb-0'
+          className='w-full shrink-0'
         />
       )}