diff --git a/frontend/src/components/EditableText.jsx b/frontend/src/components/EditableText.jsx
index 85586593..1bc122f6 100644
--- a/frontend/src/components/EditableText.jsx
+++ b/frontend/src/components/EditableText.jsx
@@ -1,6 +1,6 @@
 import '../styles/EditableText.css';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
 import FormattedText from './FormattedText';
 import DiscreeteDropdown from './DiscreeteDropdown';
 import PictureUploadAction from '../menu-items/PictureUploadAction';
@@ -13,6 +13,7 @@ function EditableText({id, text, rubric, isPartOf, links, beingEditedBy, fragmen
   const [editedDocument, setEditedDocument] = useState();
   const [editedText, setEditedText] = useState();
   const [hasBeenChanged, setHasBeenChanged] = useState(false);
+  const textareaRef = useRef(null);
   const PASSAGE = new RegExp(`\\{${rubric}} ?([^{]*)`);
   const isEditedByOther = beingEditedBy && beingEditedBy !== user;
 
@@ -70,6 +71,15 @@ function EditableText({id, text, rubric, isPartOf, links, beingEditedBy, fragmen
     }
   }, [rawEditMode, updateEditedDocument]);
 
+  useLayoutEffect(() => {
+    if (textareaRef.current && beingEdited) {
+      const el = textareaRef.current;
+      if (el.scrollHeight > el.clientHeight) {
+        el.style.height = `${el.scrollHeight}px`;
+      }
+    }
+  }, [editedText, beingEdited]);
+
   let handleClick = () => {
     if (isEditedByOther) return;
     setBeingEdited(true);
@@ -153,7 +163,7 @@ function EditableText({id, text, rubric, isPartOf, links, beingEditedBy, fragmen
   return (
     <form className="position-relative">
       <PencilSquare className="being-edited-icon self" data-testid="being-edited-self" />
-      <textarea className="form-control" type="text" rows="5" autoFocus
+      <textarea className="form-control editable-textarea" ref={textareaRef} type="text" rows="5" autoFocus
         value={editedText} onChange={handleChange} onBlur={handleBlur}
       />
     </form>
diff --git a/frontend/src/styles/EditableText.css b/frontend/src/styles/EditableText.css
index 95977c69..5d897f41 100644
--- a/frontend/src/styles/EditableText.css
+++ b/frontend/src/styles/EditableText.css
@@ -12,16 +12,16 @@
   border-color: black;
 }
 
-.being-edited-icon {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  color: #d2691e;
-  z-index: 5;
-  pointer-events: auto;
+.editable-text-form {
+  margin-inline: -0.5rem;
 }
 
-.being-edited-icon.self {
-  color: #2e7d32;
+.editable-textarea {
+  display: block;
+  width: 100%;
+  min-height: 150px;
+  overflow: hidden;
+  resize: none;
 }
 
+