From 3181ebdabf1335e02b4f534e65136209548ba8a7 Mon Sep 17 00:00:00 2001
From: Montassar Ghanmy <Monta.ghanmy@gmail.com>
Date: Thu, 27 Feb 2025 10:49:35 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Responsive=20upload=20modal=20foote?=
 =?UTF-8?q?r=20(#831)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pending-root-components/pending-root-list.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 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 56ac67c1..4a0a7ad2 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
@@ -60,18 +60,20 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
   isPaused,
   uploadingCount,
 }) => (
-  <div className="w-full flex bg-[#F0F2F3] text-black p-4 items-center justify-between">
-    <div className="flex space-x-4 ml-auto">
+  <div className="w-full flex flex-wrap bg-[#F0F2F3] text-black p-4 items-center justify-between">
+    <div className="w-full flex flex-wrap gap-2 justify-center sm:justify-end">
       {uploadingCount > 0 && (
         <button
-          className="text-blue-500 px-4 py-2 rounded hover:bg-blue-600 hover:text-white testid:upload-root-modal-pause-resume"
+          className="text-blue-500 px-4 py-2 rounded bg-transparent transition-all duration-300 ease-in-out 
+          hover:bg-blue-600 hover:text-white w-full sm:w-auto testid:upload-root-modal-pause-resume"
           onClick={pauseOrResumeUpload}
         >
           {isPaused() ? Languages.t('general.resume') : Languages.t('general.pause')}
         </button>
       )}
       <button
-        className="text-blue-500 px-4 py-2 rounded hover:bg-blue-600 hover:text-white testid:upload-root-modal-cancel-close"
+        className="text-blue-500 min-w-[100px] px-4 py-2 rounded bg-transparent transition-all duration-300 ease-in-out 
+        hover:bg-blue-600 hover:text-white w-full sm:w-auto testid:upload-root-modal-cancel-close"
         onClick={cancelUpload}
       >
         {uploadingCount ? Languages.t('general.cancel') : Languages.t('general.close')}
@@ -112,7 +114,10 @@ const PendingRootList = ({
   return (
     <>
       {totalRoots > 0 && (
-        <div className="fixed bottom-4 right-4 w-1/3 shadow-lg rounded-sm overflow-hidden testid:upload-root-modal">
+        <div
+          className="fixed bottom-4 right-4 w-full sm:w-1/2 md:w-1/3 max-w-lg shadow-lg rounded-sm overflow-hidden testid:upload-root-modal 
+                sm:right-4 sm:left-auto sm:translate-x-0 left-1/2 -translate-x-1/2"
+        >
           <ModalHeader
             uploadingCount={uploadingCount + pausedCount}
             completedCount={completedCount}