From d38d7b8932c0c1bc41495c96898e3e9e5d68d5bf Mon Sep 17 00:00:00 2001
From: Paul <paul@payloadcms.com>
Date: Wed, 30 Oct 2024 11:29:58 -0600
Subject: [PATCH] fix(ui): broken buttons in the bulk upload drawer (#8926)

Fixes the mobile bottom interface and the arrow buttons in the actions
at the top.

Before:

![image](https://github.com/user-attachments/assets/26902eb0-5d1a-480d-b6f5-c36a800a6bff)


After:

![image](https://github.com/user-attachments/assets/7837684c-37a7-4b2e-a875-47972cf1671f)
---
 .../elements/BulkUpload/ActionsBar/index.scss |  4 ++
 .../BulkUpload/FileSidebar/index.scss         | 42 ++++++++++++++++++-
 .../elements/BulkUpload/FileSidebar/index.tsx |  8 ++++
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/elements/BulkUpload/ActionsBar/index.scss b/packages/ui/src/elements/BulkUpload/ActionsBar/index.scss
index 5f09ceb7c..a1e95f4b7 100644
--- a/packages/ui/src/elements/BulkUpload/ActionsBar/index.scss
+++ b/packages/ui/src/elements/BulkUpload/ActionsBar/index.scss
@@ -33,6 +33,10 @@
         width: calc(var(--base) * 1.2);
         height: calc(var(--base) * 1.2);
 
+        svg {
+          max-width: 1rem;
+        }
+
         &:hover {
           background-color: var(--theme-elevation-200);
         }
diff --git a/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss b/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss
index f4147d182..6d200bc6a 100644
--- a/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss
+++ b/packages/ui/src/elements/BulkUpload/FileSidebar/index.scss
@@ -192,6 +192,10 @@
       display: none;
       margin: 0;
       padding-block: 0;
+
+      &__text {
+        display: none;
+      }
     }
 
     &__header__mobileDocActions {
@@ -245,7 +249,17 @@
 
       &__headerTopRow {
         border-top: 1px solid var(--theme-border-color);
-        padding-block: calc(var(--base) * 0.8);
+        padding-block: 0 calc(var(--base) * 0.8) 0;
+      }
+
+      &__header__text {
+        display: none;
+      }
+
+      &__header__actions {
+        flex-grow: 2;
+        display: flex;
+        justify-content: flex-end;
       }
 
       &__header__mobileDocActions {
@@ -268,7 +282,31 @@
 
       &__toggler {
         padding-right: 0;
-        display: block;
+        padding-left: 0;
+        padding-top: calc(var(--base) * 0.8);
+        padding-bottom: calc(var(--base) * 0.8);
+        display: flex;
+        justify-content: flex-end;
+        flex-grow: 1;
+
+        .btn__label {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+
+        &__text {
+          display: flex;
+        }
+
+        svg {
+          max-width: 1.5rem;
+        }
+
+        .btn__content {
+          width: 100%;
+        }
       }
 
       .btn {
diff --git a/packages/ui/src/elements/BulkUpload/FileSidebar/index.tsx b/packages/ui/src/elements/BulkUpload/FileSidebar/index.tsx
index b5d9f99da..c01072a4f 100644
--- a/packages/ui/src/elements/BulkUpload/FileSidebar/index.tsx
+++ b/packages/ui/src/elements/BulkUpload/FileSidebar/index.tsx
@@ -98,6 +98,14 @@ export function FileSidebar() {
               className={`${baseClass}__toggler`}
               onClick={() => setShowFiles((prev) => !prev)}
             >
+              <span className={`${baseClass}__toggler__label`}>
+                <strong
+                  title={`${totalFileCount} ${t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}`}
+                >
+                  {totalFileCount}{' '}
+                  {t(totalFileCount > 1 ? 'upload:filesToUpload' : 'upload:fileToUpload')}
+                </strong>
+              </span>
               <ChevronIcon direction={showFiles ? 'down' : 'up'} />
             </Button>