fixed comment button appearance on small devices

src/components/comment/CommentForm/index.tsx

@@ -15,6 +15,7 @@ import { UploadDropzone } from '~/components/upload/UploadDropzone';
 import styles from './styles.module.scss';
 import { ERROR_LITERAL } from '~/constants/errors';
 import { useInputPasteUpload } from '~/utils/hooks/useInputPasteUpload';
+import { Filler } from '~/components/containers/Filler';
 
 interface IProps {
   comment?: IComment;
@@ -67,11 +68,13 @@ const CommentForm: FC<IProps> = ({ comment, nodeId, onCancelEdit }) => {
             <CommentFormAttaches />
 
             <div className={styles.buttons}>
-              <div className={styles.buttons_attach}>
+              <div className={styles.button_column}>
                 <CommentFormAttachButtons onUpload={uploader.uploadFiles} />
               </div>
 
-              <div className={styles.buttons_format}>
+              <Filler />
+
+              <div className={styles.button_column}>
                 {!!textarea && (
                   <CommentFormFormatButtons
                     element={textarea}
@@ -80,7 +83,7 @@ const CommentForm: FC<IProps> = ({ comment, nodeId, onCancelEdit }) => {
                 )}
               </div>
 
-              <div className={styles.buttons_submit}>
+              <div className={styles.button_column}>
                 {isLoading && <LoaderCircle size={20} />}
 
                 {isEditing && (

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

@@ -20,42 +20,15 @@
 .buttons {
   position: relative;
   z-index: 1;
-  display: grid;
+  display: flex;
   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;
+  padding: $gap / 4;
 }
 
-  &_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;
-  }
+.button_column {
+  padding: $gap / 4;
 }
 
 .uploads {

src/components/comment/CommentFormFormatButtons/index.tsx

@@ -66,6 +66,7 @@ const CommentFormFormatButtons: FC<IProps> = ({ element, handler }) => {
         iconOnly
         type="button"
         label="Жирный Ctrl+B"
+        className={styles.button}
       />
 
       <Button
@@ -76,6 +77,7 @@ const CommentFormFormatButtons: FC<IProps> = ({ element, handler }) => {
         iconOnly
         type="button"
         label="Наклонный Ctrl+I"
+        className={styles.button}
       />
 
       <Button
@@ -86,6 +88,7 @@ const CommentFormFormatButtons: FC<IProps> = ({ element, handler }) => {
         iconOnly
         type="button"
         label="Заголовок"
+        className={styles.button}
       />
 
       <Button
@@ -96,6 +99,7 @@ const CommentFormFormatButtons: FC<IProps> = ({ element, handler }) => {
         iconOnly
         type="button"
         label="Ссылка"
+        className={styles.button}
       />
 
       <Button
@@ -105,6 +109,7 @@ const CommentFormFormatButtons: FC<IProps> = ({ element, handler }) => {
         iconOnly
         type="button"
         label="Коммент"
+        className={styles.button}
       >
         {`/ /`}
       </Button>

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

@@ -6,4 +6,9 @@
   height: 32px;
   flex: 1;
   width: 100%;
+  min-width: 0;
+}
+
+.button {
+  white-space: nowrap;
 }