fix: modal overflow caused by unused button tooltips (#2676)

src/admin/components/elements/Button/index.tsx

@@ -28,12 +28,14 @@ const ButtonContents = ({ children, icon, tooltip, showTooltip }) => {
 
   return (
     <Fragment>
-      <Tooltip
-        className={`${baseClass}__tooltip`}
-        show={showTooltip}
-      >
-        {tooltip}
-      </Tooltip>
+      {tooltip && (
+        <Tooltip
+          className={`${baseClass}__tooltip`}
+          show={showTooltip}
+        >
+          {tooltip}
+        </Tooltip>
+      )}
       <span className={`${baseClass}__content`}>
         {children && (
           <span className={`${baseClass}__label`}>

src/admin/components/elements/DeleteDocument/index.scss

@@ -16,6 +16,12 @@
   }
 
   .btn {
-    margin-right: $baseline;
+    margin: 0;
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $baseline;
   }
 }

src/admin/components/elements/DeleteDocument/index.tsx

@@ -109,20 +109,22 @@ const DeleteDocument: React.FC<Props> = (props) => {
                 </strong>
               </Trans>
             </p>
-            <Button
-              id="confirm-cancel"
-              buttonStyle="secondary"
-              type="button"
-              onClick={deleting ? undefined : () => toggleModal(modalSlug)}
-            >
-              {t('cancel')}
-            </Button>
-            <Button
-              onClick={deleting ? undefined : handleDelete}
-              id="confirm-delete"
-            >
-              {deleting ? t('deleting') : t('confirm')}
-            </Button>
+            <div className={`${baseClass}__actions`}>
+              <Button
+                id="confirm-cancel"
+                buttonStyle="secondary"
+                type="button"
+                onClick={deleting ? undefined : () => toggleModal(modalSlug)}
+              >
+                {t('cancel')}
+              </Button>
+              <Button
+                onClick={deleting ? undefined : handleDelete}
+                id="confirm-delete"
+              >
+                {deleting ? t('deleting') : t('confirm')}
+              </Button>
+            </div>
           </MinimalTemplate>
         </Modal>
       </React.Fragment>

src/admin/components/modals/StayLoggedIn/index.scss

@@ -12,6 +12,12 @@
   }
 
   .btn {
-    margin-right: base(1);
+    margin: 0;
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $baseline;
   }
 }

src/admin/components/modals/StayLoggedIn/index.tsx

@@ -20,8 +20,8 @@ const StayLoggedInModal: React.FC<Props> = (props) => {
   const {
     routes: { admin },
     admin: {
-      logoutRoute
-    }
+      logoutRoute,
+    },
   } = config;
   const { toggleModal } = useModal();
   const { t } = useTranslation('authentication');