From 2b16289be8ffef823a9517850f4c807b4380a2c4 Mon Sep 17 00:00:00 2001
From: nataliauvarova <n.uvarova@ispras.ru>
Date: Tue, 24 Dec 2024 11:32:13 +0000
Subject: [PATCH] kalmyk markup: fix styles

---
 src/components/JoinMarkupsModal/index.js    | 26 +++++++++++----------
 src/components/JoinMarkupsModal/styles.scss | 10 ++++++--
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/JoinMarkupsModal/index.js b/src/components/JoinMarkupsModal/index.js
index 29cd6885..9ed040b2 100644
--- a/src/components/JoinMarkupsModal/index.js
+++ b/src/components/JoinMarkupsModal/index.js
@@ -63,7 +63,6 @@ const saveMarkupGroupsMutation = gql`
   }
 `;
 
-
 export const refetchLexicalEntries = (entry_ids, client) =>
   entry_ids.forEach(le_id =>
     client.query({
@@ -106,7 +105,7 @@ const JoinMarkupsModal = ({ perspectiveId, onClose }) => {
   });
 
   const [saveMarkupGroups] = useMutation(saveMarkupGroupsMutation, {
-    onCompleted: ({save_markup_groups: result}) => {
+    onCompleted: ({ save_markup_groups: result }) => {
       if (result.triumph) {
         setSuccessMessage(
           `${getTranslation("Markup groups were saved into xlsx file.")}
@@ -240,18 +239,19 @@ const JoinMarkupsModal = ({ perspectiveId, onClose }) => {
 
   const onSaveXlsx = useCallback(() => {
     const groupList = [];
-    const fieldList =
-      Object.keys(markupDict).map(id => id.split("_")[1]).concat([getTranslation('Type'), getTranslation('Author')]);
+    const fieldList = Object.keys(markupDict)
+      .map(id => id.split("_")[1])
+      .concat([getTranslation("Type"), getTranslation("Author")]);
 
     for (const group of Object.values(groupDict)) {
       groupList.push({
         text: group.markups.map(m => m.text),
         type: getTranslation(group.type),
-        author: group.author_name,
+        author: group.author_name
       });
     }
 
-    saveMarkupGroups({variables: {perspectiveId, fieldList, groupList}});
+    saveMarkupGroups({ variables: { perspectiveId, fieldList, groupList } });
   }, [markupDict, groupDict]);
 
   if (Object.keys(markupDict) < 2) {
@@ -276,11 +276,13 @@ const JoinMarkupsModal = ({ perspectiveId, onClose }) => {
     "Lexico-grammatical replacement",
     "Antonymous translation",
     "Compensation"
-  ].sort().map((t, k) => ({
-    key: k,
-    value: t,
-    text: getTranslation(t)
-  }));
+  ]
+    .sort()
+    .map((t, k) => ({
+      key: k,
+      value: t,
+      text: getTranslation(t)
+    }));
 
   return (
     <Modal className="lingvo-modal2" dimmer open closeIcon onClose={onClose} size="fullscreen">
@@ -367,8 +369,8 @@ const JoinMarkupsModal = ({ perspectiveId, onClose }) => {
                       setTypeRelation(value);
                       resetMessages();
                     }}
+                    className="lingvo-dropdown-select"
                   />
-                  <p/>
                   <Button
                     content={getTranslation("Join markups")}
                     onClick={onAddRelation}
diff --git a/src/components/JoinMarkupsModal/styles.scss b/src/components/JoinMarkupsModal/styles.scss
index 79f8bc2d..eda32cf1 100644
--- a/src/components/JoinMarkupsModal/styles.scss
+++ b/src/components/JoinMarkupsModal/styles.scss
@@ -92,14 +92,20 @@
 
   &__actions {
     flex: 0 1 auto;
-    min-width: 197px;
+    min-width: 330px;
+    max-width: 330px;
     display: flex;
     flex-direction: column;
     padding: 10px;
     padding-right: 0;
 
     & .ui.button {
-      margin-top: 10px !important;
+      margin-top: 20px !important;
+    }
+
+    @media only screen and (max-device-width: 1230px), only screen and (max-width: 1230px) {
+      min-width: 250px;
+      max-width: 250px;
     }
 
     @media only screen and (max-device-width: 767px), only screen and (max-width: 767px) {