Fix: Textarea AutoSize did not resize correctly with long lines.

src/components/common/messaging/MessageBase.tsx

@@ -151,7 +151,7 @@ export const MessageContent = styled.div`
     flex-grow: 1;
     display: flex;
     // overflow: hidden;
-    font-size: 0.875rem;
+    font-size: var(--text-size);
     flex-direction: column;
     justify-content: center;
 `;

src/components/common/messaging/MessageBox.tsx

@@ -65,7 +65,7 @@ const Base = styled.div`
     background: var(--message-box);
 
     textarea {
-        font-size: 0.875rem;
+        font-size: var(--text-size);
         background: transparent;
     }
 `;
@@ -75,7 +75,7 @@ const Blocked = styled.div`
     align-items: center;
     padding: 14px 0;
     user-select: none;
-    font-size: 0.875rem;
+    font-size: var(--text-size);
     color: var(--tertiary-foreground);
 
     svg {
@@ -423,10 +423,10 @@ function MessageBox({ channel, draft }: Props) {
                     autoFocus
                     hideBorder
                     maxRows={20}
-                    padding={12}
                     id="message"
-                    value={draft ?? ""}
                     onKeyUp={onKeyUp}
+                    value={draft ?? ""}
+                    padding="var(--message-box-padding)"
                     onKeyDown={(e) => {
                         if (onKeyDown(e)) return;
 

src/components/ui/ComboBox.tsx

@@ -6,7 +6,7 @@ export default styled.select`
     font-family: inherit;
     color: var(--secondary-foreground);
     background: var(--secondary-background);
-    font-size: 0.875rem;
+    font-size: var(--text-size);
     border: none;
     outline: 2px solid transparent;
     transition: outline-color 0.2s ease-in-out;

src/components/ui/TextArea.tsx

@@ -2,8 +2,8 @@ import styled, { css } from "styled-components";
 
 export interface TextAreaProps {
     code?: boolean;
-    padding?: number;
-    lineHeight?: number;
+    padding?: string;
+    lineHeight?: string;
     hideBorder?: boolean;
 }
 
@@ -17,8 +17,8 @@ export default styled.textarea<TextAreaProps>`
     display: block;
     color: var(--foreground);
     background: var(--secondary-background);
-    padding: ${(props) => props.padding ?? DEFAULT_TEXT_AREA_PADDING}px;
-    line-height: ${(props) => props.lineHeight ?? DEFAULT_LINE_HEIGHT}px;
+    padding: ${(props) => (props.padding) ?? 'var(--textarea-padding)'};
+    line-height: ${(props) => (props.lineHeight) ?? 'var(--textarea-line-height)'};
 
     ${(props) =>
         props.hideBorder &&
@@ -31,7 +31,7 @@ export default styled.textarea<TextAreaProps>`
         css`
             border-radius: 4px;
             transition: border-color 0.2s ease-in-out;
-            border: ${TEXT_AREA_BORDER_WIDTH}px solid transparent;
+            border: var(--input-border-width) solid transparent;
         `}
 
     &:focus {
@@ -40,7 +40,7 @@ export default styled.textarea<TextAreaProps>`
         ${(props) =>
             !props.hideBorder &&
             css`
-                border: ${TEXT_AREA_BORDER_WIDTH}px solid var(--accent);
+                border: var(--input-border-width) solid var(--accent);
             `}
     }