fixed comment buttons mobile appearance

src/components/comment/CommentForm/index.tsx

@@ -65,34 +65,40 @@ const CommentForm: FC<IProps> = ({ comment, nodeId, onCancelEdit }) => {
 
             <CommentFormAttaches />
 
-            <Group horizontal className={styles.buttons}>
+            <div className={styles.buttons}>
-              <CommentFormAttachButtons onUpload={uploader.uploadFiles} />
+              <div className={styles.buttons_attach}>
+                <CommentFormAttachButtons onUpload={uploader.uploadFiles} />
+              </div>
 
-              {!!textarea && (
+              <div className={styles.buttons_format}>
-                <CommentFormFormatButtons
+                {!!textarea && (
-                  element={textarea}
+                  <CommentFormFormatButtons
-                  handler={formik.handleChange('text')}
+                    element={textarea}
-                />
+                    handler={formik.handleChange('text')}
-              )}
+                  />
+                )}
+              </div>
 
-              {isLoading && <LoaderCircle size={20} />}
+              <div className={styles.buttons_submit}>
+                {isLoading && <LoaderCircle size={20} />}
 
-              {isEditing && (
+                {isEditing && (
-                <Button size="small" color="link" type="button" onClick={onCancelEdit}>
+                  <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>
-              )}
+              </div>
-
+            </div>
-              <Button
-                type="submit"
-                size="small"
-                color="gray"
-                iconRight={!isEditing ? 'enter' : 'check'}
-                disabled={isLoading}
-              >
-                {!isEditing ? 'Сказать' : 'Сохранить'}
-              </Button>
-            </Group>
           </FileUploaderProvider>
         </FormikProvider>
       </form>

src/components/comment/CommentForm/styles.module.scss

@@ -21,13 +21,42 @@
 
   position: relative;
   z-index: 1;
-  display: flex;
+  display: grid;
-  flex-direction: row;
   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 {

src/components/comment/CommentFormFormatButtons/styles.module.scss

@@ -2,11 +2,8 @@
 
 .wrap {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   height: 32px;
   flex: 1;
-
+  width: 100%;
-  @media(max-width: 480px) {
-    display: none;
-  }
 }