From 8bc1569242483399050dd1499362198e9020dd20 Mon Sep 17 00:00:00 2001
From: Symon Baikov <peterbaikov12@gmail.com>
Date: Sat, 7 Jun 2025 14:44:45 +0300
Subject: [PATCH] fix: Responsive label color selector, improve action button
 styles (#1184)

---
 .../components/labels/LabelsStep/AddStep.jsx  |  4 +-
 .../labels/LabelsStep/AddStep.module.scss     | 10 -----
 .../components/labels/LabelsStep/EditStep.jsx | 15 ++++---
 .../labels/LabelsStep/EditStep.module.scss    | 14 +++----
 .../labels/LabelsStep/Editor.module.scss      | 41 ++++++++++++-------
 client/src/lib/popup/Popup.module.css         |  2 +-
 6 files changed, 44 insertions(+), 42 deletions(-)
 delete mode 100644 client/src/components/labels/LabelsStep/AddStep.module.scss

diff --git a/client/src/components/labels/LabelsStep/AddStep.jsx b/client/src/components/labels/LabelsStep/AddStep.jsx
index 71959a60..2a4934d8 100755
--- a/client/src/components/labels/LabelsStep/AddStep.jsx
+++ b/client/src/components/labels/LabelsStep/AddStep.jsx
@@ -15,8 +15,6 @@ import { useForm } from '../../../hooks';
 import LABEL_COLORS from '../../../constants/LabelColors';
 import Editor from './Editor';
 
-import styles from './AddStep.module.scss';
-
 const AddStep = React.memo(({ cardId, defaultData, onBack }) => {
   const dispatch = useDispatch();
   const [t] = useTranslation();
@@ -52,7 +50,7 @@ const AddStep = React.memo(({ cardId, defaultData, onBack }) => {
       <Popup.Content>
         <Form onSubmit={handleSubmit}>
           <Editor data={data} onFieldChange={handleFieldChange} />
-          <Button positive content={t('action.createLabel')} className={styles.submitButton} />
+          <Button positive content={t('action.createLabel')} />
         </Form>
       </Popup.Content>
     </>
diff --git a/client/src/components/labels/LabelsStep/AddStep.module.scss b/client/src/components/labels/LabelsStep/AddStep.module.scss
deleted file mode 100644
index 6b8b028d..00000000
--- a/client/src/components/labels/LabelsStep/AddStep.module.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*!
- * Copyright (c) 2024 PLANKA Software GmbH
- * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
- */
-
-:global(#app) {
-  .submitButton {
-    margin-top: 12px;
-  }
-}
diff --git a/client/src/components/labels/LabelsStep/EditStep.jsx b/client/src/components/labels/LabelsStep/EditStep.jsx
index 8dd6c239..3abaf363 100755
--- a/client/src/components/labels/LabelsStep/EditStep.jsx
+++ b/client/src/components/labels/LabelsStep/EditStep.jsx
@@ -91,13 +91,16 @@ const EditStep = React.memo(({ labelId, onBack }) => {
       <Popup.Content>
         <Form onSubmit={handleSubmit}>
           <Editor data={data} onFieldChange={handleFieldChange} />
-          <Button positive content={t('action.save')} className={styles.submitButton} />
+          <div className={styles.actions}>
+            <Button positive content={t('action.save')} />
+            <Button
+              type="button"
+              content={t('action.delete')}
+              className={styles.deleteButton}
+              onClick={handleDeleteClick}
+            />
+          </div>
         </Form>
-        <Button
-          content={t('action.delete')}
-          className={styles.deleteButton}
-          onClick={handleDeleteClick}
-        />
       </Popup.Content>
     </>
   );
diff --git a/client/src/components/labels/LabelsStep/EditStep.module.scss b/client/src/components/labels/LabelsStep/EditStep.module.scss
index b766e7d7..8f7dceb7 100644
--- a/client/src/components/labels/LabelsStep/EditStep.module.scss
+++ b/client/src/components/labels/LabelsStep/EditStep.module.scss
@@ -4,14 +4,14 @@
  */
 
 :global(#app) {
-  .deleteButton {
-    bottom: 12px;
-    box-shadow: 0 1px 0 #cbcccc;
-    position: absolute;
-    right: 9px;
+  .actions {
+    align-items: center;
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
   }
 
-  .submitButton {
-    margin-top: 12px;
+  .deleteButton {
+    box-shadow: 0 1px 0 #cbcccc;
   }
 }
diff --git a/client/src/components/labels/LabelsStep/Editor.module.scss b/client/src/components/labels/LabelsStep/Editor.module.scss
index 12bb7ff8..c719ce5b 100644
--- a/client/src/components/labels/LabelsStep/Editor.module.scss
+++ b/client/src/components/labels/LabelsStep/Editor.module.scss
@@ -5,12 +5,8 @@
 
 :global(#app) {
   .colorButton {
-    float: left;
-    height: 30px;
-    margin: 3px;
-    padding: 0;
+    margin: 0;
     position: relative;
-    width: 41.6px;
 
     &:hover {
       opacity: 0.9;
@@ -18,28 +14,43 @@
   }
 
   .colorButtonActive:before {
-    bottom: 1px;
     color: #ffffff;
     content: "Г";
     font-size: 16px;
     line-height: 32px;
     position: absolute;
-    right: 4px;
+    right: calc(50% - 5px);
     text-align: center;
     text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
-    top: 0;
+    top: calc(50% - 17px);
     transform: rotate(-135deg);
-    width: 32px;
   }
 
   .colorButtons {
-    margin: -3px;
-    padding-bottom: 16px;
+    display: grid;
+    gap: 6px;
+    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
+    margin-bottom: 12px;
+    max-height: 60vh;
+    overflow-y: auto;
 
-    &:after {
-      clear: both;
-      content: "";
-      display: table;
+    @supports (-moz-appearance: none) {
+      scrollbar-color: rgba(0, 0, 0, 0.32) transparent;
+      scrollbar-width: thin;
+    }
+
+    &::-webkit-scrollbar {
+      width: 9px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-clip: padding-box;
+      border-left: 0.25em transparent solid;
+      border-radius: 3px;
     }
   }
 
diff --git a/client/src/lib/popup/Popup.module.css b/client/src/lib/popup/Popup.module.css
index f0b729b9..65b51c97 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;