Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-19 13:19:44 +02:00
Code Issues Releases Activity

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.

Browse source
This commit is contained in:
symonbaikov 2025-06-07 11:26:40 +03:00
parent e822372026
commit 2813cab2e1
3 changed files with 30 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

6
client/src/components/labels/LabelsStep/EditStep.jsx
View file

@ -89,15 +89,19 @@ const EditStep = React.memo(({ labelId, onBack }) => {
})} })}
</Popup.Header> </Popup.Header>
<Popup.Content> <Popup.Content>
<div className={styles.content}>
<Form onSubmit={handleSubmit}> <Form onSubmit={handleSubmit}>
<Editor data={data} onFieldChange={handleFieldChange} /> <Editor data={data} onFieldChange={handleFieldChange} />
<div className={styles.actions}>
<Button positive content={t('action.save')} className={styles.submitButton} /> <Button positive content={t('action.save')} className={styles.submitButton} />
</Form>
<Button <Button
content={t('action.delete')} content={t('action.delete')}
className={styles.deleteButton} className={styles.deleteButton}
onClick={handleDeleteClick} onClick={handleDeleteClick}
/> />
</div>
</Form>
</div>
</Popup.Content> </Popup.Content>
</> </>
); );

9
client/src/components/labels/LabelsStep/EditStep.module.scss
View file

@ -5,13 +5,14 @@
:global(#app) { :global(#app) {
.deleteButton { .deleteButton {
bottom: 12px;
box-shadow: 0 1px 0 #cbcccc; box-shadow: 0 1px 0 #cbcccc;
position: absolute;
right: 9px;
} }
.submitButton { .actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px; margin-top: 12px;
gap: 12px;
} }
} }

13
client/src/lib/popup/Popup.module.css
View file

@ -3,7 +3,7 @@
* Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
*/ */
.closeButton { .closeButton {
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
margin: 0 !important; margin: 0 !important;
@ -16,6 +16,8 @@
} }
.wrapper { .wrapper {
display: flex;
flex-direction: column;
border-radius: 3px !important; border-radius: 3px !important;
border-width: 0 !important; border-width: 0 !important;
box-shadow: 0 8px 16px -4px rgba(9, 45, 66, 0.25), box-shadow: 0 8px 16px -4px rgba(9, 45, 66, 0.25),
@ -24,4 +26,13 @@
max-height: calc(100% - 70px); max-height: calc(100% - 70px);
padding: 0 12px 12px !important; padding: 0 12px 12px !important;
width: 304px; width: 304px;
overflow: auto;
}
@media (max-width: 900px) {
.wrapper {
width: 95vw;
max-width: 100vw;
max-height: 90vh;
}
} }