From 6f762ecefa0f373e27fe9a6da6d2d694217d166a Mon Sep 17 00:00:00 2001
From: lethemanh <themanhle1234@gmail.com>
Date: Mon, 3 Mar 2025 15:56:13 +0700
Subject: [PATCH] :bug: Fix bug unable to fetch new item when collapsed the
 upload viewer

---
 .../pending-root-list.tsx                     | 38 +++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-list.tsx b/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-list.tsx
index 4a0a7ad2..18a6a672 100644
--- a/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-list.tsx
+++ b/tdrive/frontend/src/app/components/file-uploads/pending-root-components/pending-root-list.tsx
@@ -127,27 +127,25 @@ const PendingRootList = ({
             modalExpanded={modalExpanded}
           />
 
-          {modalExpanded && (
-            <div className="modal-body">
-              <div className="bg-white px-4 py-2">
-                <PerfectScrollbar
-                  options={{ suppressScrollX: true, suppressScrollY: false }}
-                  component="div"
-                  style={{ width: '100%', maxHeight: 300 }}
-                >
-                  {keys.map(key => (
-                    <PendingRootRow key={key} rootKey={key} root={roots[key]} />
-                  ))}
-                </PerfectScrollbar>
-              </div>
-              <ModalFooter
-                pauseOrResumeUpload={pauseOrResumeUpload}
-                cancelUpload={cancelUpload}
-                isPaused={isPaused}
-                uploadingCount={uploadingCount + pausedCount}
-              />
+          <div className={`modal-body ${modalExpanded ? 'block' : 'hidden'}`}>
+            <div className="bg-white px-4 py-2">
+              <PerfectScrollbar
+                options={{ suppressScrollX: true, suppressScrollY: false }}
+                component="div"
+                style={{ width: '100%', maxHeight: 300 }}
+              >
+                {keys.map(key => (
+                  <PendingRootRow key={key} rootKey={key} root={roots[key]} />
+                ))}
+              </PerfectScrollbar>
             </div>
-          )}
+            <ModalFooter
+              pauseOrResumeUpload={pauseOrResumeUpload}
+              cancelUpload={cancelUpload}
+              isPaused={isPaused}
+              uploadingCount={uploadingCount + pausedCount}
+            />
+          </div>
         </div>
       )}
     </>