diff --git a/src/components/molecules/MessageInput/MessageInput.styles.js b/src/components/molecules/MessageInput/MessageInput.styles.js index ee4b798..73d71df 100644 --- a/src/components/molecules/MessageInput/MessageInput.styles.js +++ b/src/components/molecules/MessageInput/MessageInput.styles.js @@ -6,7 +6,15 @@ export default css` padding: var(--spacing-xs); border-top: 1px solid var(--color-neutral-200); - textarea { + div { + position: relative; + display: flex; + max-height: 140px; + width: 100%; + flex-grow: 1; + flex-direction: column; + overflow: hidden; + padding-right: 42px; border: 1px solid var(--color-neutral-200); border-radius: var(--border-radius-sm); } diff --git a/src/components/molecules/Textarea/Textarea.styles.js b/src/components/molecules/Textarea/Textarea.styles.js index f72f7b1..f0fea50 100644 --- a/src/components/molecules/Textarea/Textarea.styles.js +++ b/src/components/molecules/Textarea/Textarea.styles.js @@ -1,25 +1,15 @@ import { css } from 'styled-components' export default css` - display: flex; width: 100%; - resize: none; border: 0 none; min-height: 43px; - height: 43px; - padding: var(--spacing-xs) var(--spacing-sm); - padding-right: 30px; - max-height: 140px; font-size: var(--font-size-sm); - position: relative; - font-family: inherit; - user-select: text; - white-space: pre-wrap; - word-break: break-word; - overflow-y: auto; + resize: none; outline: 0 none; border-radius: 10px; tab-size: 4; + padding: var(--spacing-xs) var(--spacing-sm); @supports (-webkit-touch-callout: none) { font-size: 16px;