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.

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>
     </>
   );

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;
   }
 }

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;
+  }
 }