Fix style Textarea and MessageInput

juandinella · Oct 10, 2023 · c7d7b5c · c7d7b5c
1 parent 482cc48
commit c7d7b5c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 13 deletions.
diff --git 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
@@ -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;