fix(dropzone): Prevent dropzone from overflowing content

client/src/components/cards/CardModal/AddAttachmentZone/AddAttachmentZone.jsx

@@ -132,7 +132,11 @@ const AddAttachmentZone = React.memo(({ children }) => {
     <>
       {/* eslint-disable-next-line react/jsx-props-no-spreading */}
       <div {...getRootProps()}>
-        {isDragActive && <div className={styles.dropzone}>{t('common.dropFileToUpload')}</div>}
+        {isDragActive && (
+          <div className={styles.dropzone}>
+            <div className={styles.dropzoneText}>{t('common.dropFileToUpload')}</div>
+          </div>
+        )}
         {children}
         {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         <input {...getInputProps()} />

client/src/components/cards/CardModal/AddAttachmentZone/AddAttachmentZone.module.scss

@@ -8,13 +8,18 @@
     background: white;
     font-size: 20px;
     font-weight: bold;
-    height: 100%;
+    inset: 0;
     line-height: 30px;
     opacity: 0.7;
-    padding: 200px 50px;
     position: absolute;
     text-align: center;
-    width: 100%;
     z-index: 2001;
   }
+
+  .dropzoneText {
+    left: 50%;
+    position: absolute;
+    top: min(200px, 50%);
+    transform: translateX(-50%) translateY(-50%);
+  }
 }

client/src/components/projects/ProjectSettingsModal/BackgroundPane/AddImageZone.jsx

@@ -68,7 +68,11 @@ const AddImageZone = React.memo(({ children, onCreate }) => {
   return (
     /* eslint-disable-next-line react/jsx-props-no-spreading */
     <div {...getRootProps()}>
-      {isDragActive && <div className={styles.dropzone}>{t('common.dropFileToUpload')}</div>}
+      {isDragActive && (
+        <div className={styles.dropzone}>
+          <div className={styles.dropzoneText}>{t('common.dropFileToUpload')}</div>
+        </div>
+      )}
       {children}
       {/* eslint-disable-next-line react/jsx-props-no-spreading */}
       <input {...getInputProps()} />

client/src/components/projects/ProjectSettingsModal/BackgroundPane/AddImageZone.module.scss

@@ -8,13 +8,18 @@
     background: white;
     font-size: 20px;
     font-weight: bold;
-    height: 100%;
+    inset: 0;
     line-height: 30px;
     opacity: 0.7;
-    padding-top: 200px;
     position: absolute;
     text-align: center;
-    width: 100%;
     z-index: 2001;
   }
+
+  .dropzoneText {
+    left: 50%;
+    position: absolute;
+    top: min(200px, 50%);
+    transform: translateX(-50%) translateY(-50%);
+  }
 }