diff --git a/src/components/comment/CommentForm/index.tsx b/src/components/comment/CommentForm/index.tsx index 119ad897..0f1a2b2b 100644 --- a/src/components/comment/CommentForm/index.tsx +++ b/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 = ({ comment, nodeId, onCancelEdit }) => {
-
+
-
+ + +
{!!textarea && ( = ({ comment, nodeId, onCancelEdit }) => { )}
-
+
{isLoading && } {isEditing && ( diff --git a/src/components/comment/CommentForm/styles.module.scss b/src/components/comment/CommentForm/styles.module.scss index adef4c41..b09e3bca 100644 --- a/src/components/comment/CommentForm/styles.module.scss +++ b/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"; + padding: $gap / 4; +} - @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; - } +.button_column { + padding: $gap / 4; } .uploads { diff --git a/src/components/comment/CommentFormFormatButtons/index.tsx b/src/components/comment/CommentFormFormatButtons/index.tsx index f5592cfc..17df65e6 100644 --- a/src/components/comment/CommentFormFormatButtons/index.tsx +++ b/src/components/comment/CommentFormFormatButtons/index.tsx @@ -66,6 +66,7 @@ const CommentFormFormatButtons: FC = ({ element, handler }) => { iconOnly type="button" label="Жирный Ctrl+B" + className={styles.button} /> diff --git a/src/components/comment/CommentFormFormatButtons/styles.module.scss b/src/components/comment/CommentFormFormatButtons/styles.module.scss index d07205e9..562c56fb 100644 --- a/src/components/comment/CommentFormFormatButtons/styles.module.scss +++ b/src/components/comment/CommentFormFormatButtons/styles.module.scss @@ -6,4 +6,9 @@ height: 32px; flex: 1; width: 100%; + min-width: 0; +} + +.button { + white-space: nowrap; }