fix(ui): broken buttons in the bulk upload drawer

payloadcms · Oct 29, 2024 · b74ae73 · b74ae73
1 parent 915a3ce
commit b74ae73
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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>