From 2a1760393f30a4311df61bf85a2d9ef95425537e Mon Sep 17 00:00:00 2001
From: Maksim Eltyshev <meltyshev@gmail.com>
Date: Thu, 19 Feb 2026 17:09:21 +0100
Subject: [PATCH] fix(dropzone): Prevent dropzone from overflowing content

---
 .../CardModal/AddAttachmentZone/AddAttachmentZone.jsx |  6 +++++-
 .../AddAttachmentZone/AddAttachmentZone.module.scss   | 11 ++++++++---
 .../BackgroundPane/AddImageZone.jsx                   |  6 +++++-
 .../BackgroundPane/AddImageZone.module.scss           | 11 ++++++++---
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/client/src/components/cards/CardModal/AddAttachmentZone/AddAttachmentZone.jsx b/client/src/components/cards/CardModal/AddAttachmentZone/AddAttachmentZone.jsx
index c182cd48..b9e3dc8b 100644
--- a/client/src/components/cards/CardModal/AddAttachmentZone/AddAttachmentZone.jsx
+++ b/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()} />
diff --git a/client/src/components/cards/CardModal/AddAttachmentZone/AddAttachmentZone.module.scss b/client/src/components/cards/CardModal/AddAttachmentZone/AddAttachmentZone.module.scss
index edc1469b..cc61ab48 100644
--- a/client/src/components/cards/CardModal/AddAttachmentZone/AddAttachmentZone.module.scss
+++ b/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%);
+  }
 }
diff --git a/client/src/components/projects/ProjectSettingsModal/BackgroundPane/AddImageZone.jsx b/client/src/components/projects/ProjectSettingsModal/BackgroundPane/AddImageZone.jsx
index e7038f93..3a4a5187 100644
--- a/client/src/components/projects/ProjectSettingsModal/BackgroundPane/AddImageZone.jsx
+++ b/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()} />
diff --git a/client/src/components/projects/ProjectSettingsModal/BackgroundPane/AddImageZone.module.scss b/client/src/components/projects/ProjectSettingsModal/BackgroundPane/AddImageZone.module.scss
index aee0c9d0..cc61ab48 100644
--- a/client/src/components/projects/ProjectSettingsModal/BackgroundPane/AddImageZone.module.scss
+++ b/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%);
+  }
 }