From ebdb09a611fdbd4a5830d4d416e3dfee5c816510 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 9 Mar 2021 15:19:40 +0700
Subject: [PATCH] fixed comment buttons mobile appearance

---
 src/components/comment/CommentForm/index.tsx  | 54 ++++++++++---------
 .../comment/CommentForm/styles.module.scss    | 33 +++++++++++-
 .../styles.module.scss                        |  7 +--
 3 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/src/components/comment/CommentForm/index.tsx b/src/components/comment/CommentForm/index.tsx
index b644509d..6fbdea56 100644
--- a/src/components/comment/CommentForm/index.tsx
+++ b/src/components/comment/CommentForm/index.tsx
@@ -65,34 +65,40 @@ const CommentForm: FC<IProps> = ({ comment, nodeId, onCancelEdit }) => {
 
             <CommentFormAttaches />
 
-            <Group horizontal className={styles.buttons}>
-              <CommentFormAttachButtons onUpload={uploader.uploadFiles} />
+            <div className={styles.buttons}>
+              <div className={styles.buttons_attach}>
+                <CommentFormAttachButtons onUpload={uploader.uploadFiles} />
+              </div>
 
-              {!!textarea && (
-                <CommentFormFormatButtons
-                  element={textarea}
-                  handler={formik.handleChange('text')}
-                />
-              )}
+              <div className={styles.buttons_format}>
+                {!!textarea && (
+                  <CommentFormFormatButtons
+                    element={textarea}
+                    handler={formik.handleChange('text')}
+                  />
+                )}
+              </div>
 
-              {isLoading && <LoaderCircle size={20} />}
+              <div className={styles.buttons_submit}>
+                {isLoading && <LoaderCircle size={20} />}
 
-              {isEditing && (
-                <Button size="small" color="link" type="button" onClick={onCancelEdit}>
-                  Отмена
+                {isEditing && (
+                  <Button size="small" color="link" type="button" onClick={onCancelEdit}>
+                    Отмена
+                  </Button>
+                )}
+
+                <Button
+                  type="submit"
+                  size="small"
+                  color="gray"
+                  iconRight={!isEditing ? 'enter' : 'check'}
+                  disabled={isLoading}
+                >
+                  {!isEditing ? 'Сказать' : 'Сохранить'}
                 </Button>
-              )}
-
-              <Button
-                type="submit"
-                size="small"
-                color="gray"
-                iconRight={!isEditing ? 'enter' : 'check'}
-                disabled={isLoading}
-              >
-                {!isEditing ? 'Сказать' : 'Сохранить'}
-              </Button>
-            </Group>
+              </div>
+            </div>
           </FileUploaderProvider>
         </FormikProvider>
       </form>
diff --git a/src/components/comment/CommentForm/styles.module.scss b/src/components/comment/CommentForm/styles.module.scss
index 12798bf2..fb629c05 100644
--- a/src/components/comment/CommentForm/styles.module.scss
+++ b/src/components/comment/CommentForm/styles.module.scss
@@ -21,13 +21,42 @@
 
   position: relative;
   z-index: 1;
-  display: flex;
-  flex-direction: row;
+  display: grid;
   background: transparentize(black, 0.8);
   padding: $gap / 2;
   border-radius: 0 0 $radius $radius;
   flex-wrap: wrap;
+  column-gap: $gap;
+  grid-template-columns: auto 1fr auto;
+  grid-template-rows: 1fr;
+  grid-template-areas: "attach format submit";
 
+  @media(max-width: 470px) {
+    padding: $gap;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: 1fr 1fr;
+    grid-template-areas:
+    "attach format"
+    "submit submit";
+    row-gap: $gap;
+  }
+
+  &_attach {
+    grid-area: attach;
+  }
+
+  &_format {
+    grid-area: format;
+  }
+
+  &_submit {
+    grid-area: submit;
+    display: grid;
+    grid-auto-flow: column;
+    align-items: flex-end;
+    justify-content: flex-end;
+    column-gap: $gap / 2;
+  }
 }
 
 .uploads {
diff --git a/src/components/comment/CommentFormFormatButtons/styles.module.scss b/src/components/comment/CommentFormFormatButtons/styles.module.scss
index e63a68c1..d07205e9 100644
--- a/src/components/comment/CommentFormFormatButtons/styles.module.scss
+++ b/src/components/comment/CommentFormFormatButtons/styles.module.scss
@@ -2,11 +2,8 @@
 
 .wrap {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   height: 32px;
   flex: 1;
-
-  @media(max-width: 480px) {
-    display: none;
-  }
+  width: 100%;
 }