From 871d6467c3f1252d78641ac1a9dd3960081f8e3c Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Wed, 18 Mar 2026 13:32:55 +0800
Subject: [PATCH] fix(layout): more responsive layout for the transfer queue
 (#3558)

---
 .../library/components/TransferQueuePanel.tsx | 42 +++++++++----------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/apps/readest-app/src/app/library/components/TransferQueuePanel.tsx b/apps/readest-app/src/app/library/components/TransferQueuePanel.tsx
index b75968a1..7bbcb200 100644
--- a/apps/readest-app/src/app/library/components/TransferQueuePanel.tsx
+++ b/apps/readest-app/src/app/library/components/TransferQueuePanel.tsx
@@ -328,29 +328,25 @@ const TransferQueuePanel: React.FC = () => {
         </div>
 
         {/* Footer actions */}
-        <div className='border-base-300 flex items-center justify-between border-t p-4'>
-          <div className='flex items-center gap-2'>
-            {stats.failed > 0 && (
-              <button onClick={retryAllFailed} className='btn btn-ghost btn-sm gap-1'>
-                <MdRefresh size={iconSize - 2} />
-                {_('Retry All')}
-              </button>
-            )}
-          </div>
-          <div className='flex items-center gap-2'>
-            {stats.completed > 0 && (
-              <button onClick={clearCompleted} className='btn btn-ghost btn-sm gap-1'>
-                <MdDeleteSweep size={iconSize - 2} />
-                {_('Clear Completed')}
-              </button>
-            )}
-            {stats.failed > 0 && (
-              <button onClick={clearFailed} className='btn btn-ghost btn-sm gap-1'>
-                <MdDeleteSweep size={iconSize - 2} />
-                {_('Clear Failed')}
-              </button>
-            )}
-          </div>
+        <div className='border-base-300 flex flex-wrap items-center justify-evenly gap-2 border-t p-4'>
+          {stats.failed > 0 && (
+            <button onClick={retryAllFailed} className='btn btn-ghost btn-sm gap-1'>
+              <MdRefresh size={iconSize - 2} />
+              {_('Retry All')}
+            </button>
+          )}
+          {stats.completed > 0 && (
+            <button onClick={clearCompleted} className='btn btn-ghost btn-sm gap-1'>
+              <MdDeleteSweep size={iconSize - 2} />
+              {_('Clear Completed')}
+            </button>
+          )}
+          {stats.failed > 0 && (
+            <button onClick={clearFailed} className='btn btn-ghost btn-sm gap-1'>
+              <MdDeleteSweep size={iconSize - 2} />
+              {_('Clear Failed')}
+            </button>
+          )}
         </div>
       </div>
     </div>