Fix textarea size with autosizing

packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/Dialog/index.tsx

@@ -144,7 +144,16 @@ export const Dialog: React.FC = () => {
                 />
               ) : null}
             </Stack>
-            <AddReply comment={comment} />
+            <AddReply
+              comment={comment}
+              onSubmit={() => {
+                // scroll to bottom of the list,
+                // have to wait for it to load though :)
+                window.requestAnimationFrame(() => {
+                  listRef.current.scrollTop = listRef.current.scrollHeight;
+                });
+              }}
+            />
           </>
         )}
       </Stack>
@@ -176,7 +185,6 @@ const DialogAddComment: React.FC<{
       <DragHandle onPan={onDragHandlerPan}>
         <Stack
           justify="space-between"
-          align="center"
           marginY={4}
           marginLeft={4}
           marginRight={2}
@@ -203,6 +211,7 @@ const DialogAddComment: React.FC<{
           border: 'none',
           paddingLeft: 4,
         })}
+        style={{ minHeight: 32 }}
         value={value}
         onChange={e => setValue(e.target.value)}
         placeholder="Add comment..."
@@ -268,6 +277,9 @@ const DialogHeader = ({ comment, hasShadow }) => {
             transition: 'color',
             transitionDuration: theme => theme.speeds[1],
             color: comment.isResolved ? 'green' : 'mutedForeground',
+            ':hover:not(:disabled), :focus:not(:disabled)': {
+              color: comment.isResolved ? 'green' : 'foreground',
+            },
           })}
         />
         <IconButton
@@ -385,7 +397,7 @@ const Replies = ({ replies, repliesRenderedCallback }) => {
   );
 };
 
-const AddReply = ({ comment }) => {
+const AddReply = ({ comment, ...props }) => {
   const { actions } = useOvermind();
   const [value, setValue] = useState('');
 
@@ -395,6 +407,7 @@ const AddReply = ({ comment }) => {
       content: value,
       parentCommentId: comment.id,
     });
+    if (props.onSubmit) props.onSubmit();
   };
 
   return (
@@ -405,8 +418,9 @@ const AddReply = ({ comment }) => {
         border: 'none',
         borderTop: '1px solid',
         borderColor: 'sideBar.border',
-        paddingX: 4,
+        padding: 4,
       })}
+      style={{ minHeight: 54 }}
       value={value}
       onChange={e => setValue(e.target.value)}
       placeholder="Reply..."

packages/components/src/components/Icon/icons.tsx

@@ -135,7 +135,7 @@ export const check = props => (
     <path
       fillRule="evenodd"
       clipRule="evenodd"
-      d="M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8ZM16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM10.9124 5L11.9409 6.02852L7.12513 10.8443L6.09661 9.81577L6.10102 9.81136L4.5 8.21034L5.52852 7.18182L7.12954 8.78284L10.9124 5Z"
+      d="M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8ZM16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM11.1945 4.57143L12.1707 5.54756L6.45109 11.2671L6.019 10.8351L3.5 8.36104L4.3008 7.54567L6.27821 9.48776L11.1945 4.57143Z"
       fill="currentColor"
     />
   </Element>

packages/components/src/components/Textarea/index.stories.tsx

@@ -38,6 +38,16 @@ export const autoResize = () => (
   </Wrapper>
 );
 
+export const autoResizeWithInitialHeight = () => (
+  <Wrapper>
+    <Textarea
+      autosize
+      placeholder="Write a lot of lines here"
+      style={{ minHeight: 32 }}
+    />
+  </Wrapper>
+);
+
 export const Controlled = () => {
   const [value, setValue] = React.useState('');
   return (

packages/components/src/components/Textarea/index.tsx

@@ -47,7 +47,6 @@ export const Textarea: React.FC<ITextareaProps> = ({
   ...props
 }) => {
   const [innerValue, setInnerValue] = React.useState<string>(defaultValue);
-
   /**
    * To support both contolled and uncontrolled components
    * We sync props.value with internalValue
@@ -79,14 +78,14 @@ export const Textarea: React.FC<ITextareaProps> = ({
   return (
     <>
       <Wrapper>
-        <Autosize value={innerValue}>
+        <Autosize value={innerValue} style={props.style}>
           {(height: number) => (
             <TextareaComponent
               value={innerValue}
               onChange={internalOnChange}
               maxLength={maxLength}
-              style={{ height }}
               {...props}
+              style={{ ...(props.style || {}), height }}
             />
           )}
         </Autosize>
@@ -101,7 +100,7 @@ export const Textarea: React.FC<ITextareaProps> = ({
   );
 };
 
-const Autosize = ({ value, ...props }) => (
+const Autosize = ({ value, style = {}, ...props }) => (
   <Rect>
     {({ rect, ref }) => (
       <>
@@ -116,6 +115,7 @@ const Autosize = ({ value, ...props }) => (
               lineHeight: 1,
               minHeight: 64,
               padding: 8,
+              ...style,
             }}
           >
             {value + ' '}