Add text area auto size for notes

src/components/TextareaAutoSize.css

@@ -0,0 +1,22 @@
+.textarea-auto-size {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
+  display: block;
+  width: 100%;
+  appearance: none;
+  font-size: inherit;
+  line-height: inherit;
+  border-radius: 4px;
+  color: inherit;
+  background-color: transparent;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", sans-serif;
+  padding: 4px;
+  border: none;
+  resize: none;
+}
+
+.textarea-auto-size:focus {
+  outline: none;
+}

src/components/TextareaAutoSize.js

@@ -0,0 +1,8 @@
+import TextareaAutosize from "react-textarea-autosize";
+import "./TextareaAutoSize.css";
+
+function StyledTextareaAutoSize(props) {
+  return <TextareaAutosize className="textarea-auto-size" {...props} />;
+}
+
+export default StyledTextareaAutoSize;

src/components/note/NoteMenu.js

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from "react";
-import { Box, Flex, Text, IconButton, Textarea } from "theme-ui";
+import { Box, Flex, Text, IconButton } from "theme-ui";
 
 import Slider from "../Slider";
+import TextareaAutosize from "../TextareaAutoSize";
 
 import MapMenu from "../map/MapMenu";
 
@@ -128,20 +129,12 @@ function NoteMenu({
           }}
           sx={{ alignItems: "center" }}
         >
-          <Textarea
+          <TextareaAutosize
             id="changeNoteText"
             onChange={handleTextChange}
             value={(note && note.text) || ""}
-            sx={{
-              padding: "4px",
-              border: "none",
-              ":focus": {
-                outline: "none",
-              },
-              resize: "none",
-            }}
-            rows={1}
             onKeyPress={handleTextKeyPress}
+            maxRows={4}
           />
         </Flex>
         <Box