fixed comment buttons mobile appearance

src/components/comment/CommentForm/index.tsx

@@ -65,16 +65,21 @@ const CommentForm: FC<IProps> = ({ comment, nodeId, onCancelEdit }) => {
 
             <CommentFormAttaches />
 
-            <Group horizontal className={styles.buttons}>
+            <div className={styles.buttons}>
+              <div className={styles.buttons_attach}>
                 <CommentFormAttachButtons onUpload={uploader.uploadFiles} />
+              </div>
 
+              <div className={styles.buttons_format}>
                 {!!textarea && (
                   <CommentFormFormatButtons
                     element={textarea}
                     handler={formik.handleChange('text')}
                   />
                 )}
+              </div>
 
+              <div className={styles.buttons_submit}>
                 {isLoading && <LoaderCircle size={20} />}
 
                 {isEditing && (
@@ -92,7 +97,8 @@ const CommentForm: FC<IProps> = ({ comment, nodeId, onCancelEdit }) => {
                 >
                   {!isEditing ? 'Сказать' : 'Сохранить'}
                 </Button>
-            </Group>
+              </div>
+            </div>
           </FileUploaderProvider>
         </FormikProvider>
       </form>

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 {

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%;
 }