From 2813cab2e192b728ef2754411911515ff82a191b Mon Sep 17 00:00:00 2001
From: symonbaikov <peterbaikov12@gmail.com>
Date: Sat, 7 Jun 2025 11:26:40 +0300
Subject: [PATCH] fix(mobile): make label edit popup fully scrollable and keep
 Delete button visible at the bottom on all devices\n\nCloses #1183\n\n- Popup
 content is now flexbox-based and scrollable on all mobile sizes\n- Delete and
 Save buttons are aligned on the same row and always visible\n- Removed
 absolute positioning from Delete button for correct flex behavior\n- Improved
 mobile usability when keyboard is open\n\nBefore: On mobile, the label edit
 popup content could be hidden by the keyboard, and the Delete button floated
 or overlapped.\nAfter: Popup content scrolls, input is always accessible, and
 Delete button stays at the bottom right next to Save. UX is consistent on all
 mobile devices.

---
 .../components/labels/LabelsStep/EditStep.jsx | 22 +++++++++++--------
 .../labels/LabelsStep/EditStep.module.scss    |  9 ++++----
 client/src/lib/popup/Popup.module.css         | 13 ++++++++++-
 3 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/client/src/components/labels/LabelsStep/EditStep.jsx b/client/src/components/labels/LabelsStep/EditStep.jsx
index 8dd6c239..566ed53f 100755
--- a/client/src/components/labels/LabelsStep/EditStep.jsx
+++ b/client/src/components/labels/LabelsStep/EditStep.jsx
@@ -89,15 +89,19 @@ const EditStep = React.memo(({ labelId, onBack }) => {
         })}
       </Popup.Header>
       <Popup.Content>
-        <Form onSubmit={handleSubmit}>
-          <Editor data={data} onFieldChange={handleFieldChange} />
-          <Button positive content={t('action.save')} className={styles.submitButton} />
-        </Form>
-        <Button
-          content={t('action.delete')}
-          className={styles.deleteButton}
-          onClick={handleDeleteClick}
-        />
+        <div className={styles.content}>
+          <Form onSubmit={handleSubmit}>
+            <Editor data={data} onFieldChange={handleFieldChange} />
+            <div className={styles.actions}>
+              <Button positive content={t('action.save')} className={styles.submitButton} />
+              <Button
+                content={t('action.delete')}
+                className={styles.deleteButton}
+                onClick={handleDeleteClick}
+              />
+            </div>
+          </Form>
+        </div>
       </Popup.Content>
     </>
   );
diff --git a/client/src/components/labels/LabelsStep/EditStep.module.scss b/client/src/components/labels/LabelsStep/EditStep.module.scss
index b766e7d7..83f7de1e 100644
--- a/client/src/components/labels/LabelsStep/EditStep.module.scss
+++ b/client/src/components/labels/LabelsStep/EditStep.module.scss
@@ -5,13 +5,14 @@
 
 :global(#app) {
   .deleteButton {
-    bottom: 12px;
     box-shadow: 0 1px 0 #cbcccc;
-    position: absolute;
-    right: 9px;
   }
 
-  .submitButton {
+  .actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     margin-top: 12px;
+    gap: 12px;
   }
 }
diff --git a/client/src/lib/popup/Popup.module.css b/client/src/lib/popup/Popup.module.css
index f0b729b9..8daca76c 100644
--- a/client/src/lib/popup/Popup.module.css
+++ b/client/src/lib/popup/Popup.module.css
@@ -3,7 +3,7 @@
  * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
  */
 
- .closeButton {
+.closeButton {
   background: transparent !important;
   box-shadow: none !important;
   margin: 0 !important;
@@ -16,6 +16,8 @@
 }
 
 .wrapper {
+  display: flex;
+  flex-direction: column;
   border-radius: 3px !important;
   border-width: 0 !important;
   box-shadow: 0 8px 16px -4px rgba(9, 45, 66, 0.25),
@@ -24,4 +26,13 @@
   max-height: calc(100% - 70px);
   padding: 0 12px 12px !important;
   width: 304px;
+  overflow: auto;
+}
+
+@media (max-width: 900px) {
+  .wrapper {
+    width: 95vw;
+    max-width: 100vw;
+    max-height: 90vh;
+  }
 }