From a85b942388501a8d485f21bc1b75fbbb7a56971f Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Mon, 27 Apr 2026 12:16:19 -0400
Subject: [PATCH 1/2] ENG-1646: Auto-resize content input and 512 char limit in
 node creation dialog (Roam)

- Replace InputGroup with TextArea (growVertically) in create mode for auto-resize
- Add 512 character limit with an inline warning message at the limit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/roam/src/components/FuzzySelectInput.tsx | 49 +++++++++++--------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/apps/roam/src/components/FuzzySelectInput.tsx b/apps/roam/src/components/FuzzySelectInput.tsx
index 2cfe27686..3ed235d0a 100644
--- a/apps/roam/src/components/FuzzySelectInput.tsx
+++ b/apps/roam/src/components/FuzzySelectInput.tsx
@@ -8,7 +8,6 @@ import React, {
 import {
   Button,
   TextArea,
-  InputGroup,
   Menu,
   MenuItem,
   Popover,
@@ -18,6 +17,7 @@ import fuzzy from "fuzzy";
 import { Result } from "~/utils/types";
 
 const RESULTS_LIMIT = 50;
+const MAX_CONTENT_LENGTH = 512;
 
 type FuzzySelectInputProps<T extends Result = Result> = {
   value?: T;
@@ -44,7 +44,7 @@ const FuzzySelectInput = <T extends Result = Result>({
   const [isFocused, setIsFocused] = useState(false);
 
   const menuRef = useRef<HTMLUListElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
 
   const filteredItems = useMemo(() => {
     if (!query) return options;
@@ -86,7 +86,7 @@ const FuzzySelectInput = <T extends Result = Result>({
   );
 
   const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
       if (e.key === "ArrowDown") {
         e.preventDefault();
         setActiveIndex((prev) =>
@@ -227,23 +227,32 @@ const FuzzySelectInput = <T extends Result = Result>({
         </Menu>
       }
       target={
-        <InputGroup
-          fill
-          inputRef={inputRef}
-          className="w-full"
-          value={query}
-          onChange={(e) => handleInputChange(e.target.value)}
-          onKeyDown={handleKeyDown}
-          autoFocus={autoFocus}
-          placeholder={placeholder}
-          onFocus={() => {
-            setIsFocused(true);
-          }}
-          onBlur={() => {
-            setIsFocused(false);
-            setTimeout(() => setIsOpen(false), 200);
-          }}
-        />
+        <div className="w-full">
+          <TextArea
+            fill
+            inputRef={inputRef}
+            className="w-full"
+            value={query}
+            onChange={(e) => handleInputChange(e.target.value)}
+            onKeyDown={handleKeyDown}
+            autoFocus={autoFocus}
+            placeholder={placeholder}
+            growVertically
+            maxLength={MAX_CONTENT_LENGTH}
+            onFocus={() => {
+              setIsFocused(true);
+            }}
+            onBlur={() => {
+              setIsFocused(false);
+              setTimeout(() => setIsOpen(false), 200);
+            }}
+          />
+          {query.length >= MAX_CONTENT_LENGTH && (
+            <p className="mt-1 text-xs text-red-500">
+              Character limit reached ({MAX_CONTENT_LENGTH})
+            </p>
+          )}
+        </div>
       }
     />
   );

From 70ec53a7c53a3c852b9609464a0a0bf2b1c35e9b Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Mon, 27 Apr 2026 16:16:38 -0400
Subject: [PATCH 2/2] Apply 512 char limit to edit mode and reduce textarea
 min-height to 1 line

- Add maxLength and limit warning to edit mode textarea
- Reduce min-height from 96px to 2rem so textarea starts at ~1 line and grows naturally

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/roam/src/components/FuzzySelectInput.tsx | 29 ++++++++++++-------
 apps/roam/src/styles/discourseGraphStyles.css |  2 +-
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/apps/roam/src/components/FuzzySelectInput.tsx b/apps/roam/src/components/FuzzySelectInput.tsx
index 3ed235d0a..caf88df8d 100644
--- a/apps/roam/src/components/FuzzySelectInput.tsx
+++ b/apps/roam/src/components/FuzzySelectInput.tsx
@@ -158,17 +158,26 @@ const FuzzySelectInput = <T extends Result = Result>({
   }, [autoFocus, mode, isLocked]);
 
   if (mode === "edit") {
+    const editText = value?.text || "";
     return (
-      <TextArea
-        value={value?.text || ""}
-        onChange={(e) => {
-          setValue({ text: e.target.value, uid: value?.uid || "" } as T);
-        }}
-        fill
-        growVertically
-        placeholder={placeholder}
-        autoFocus={autoFocus}
-      />
+      <div className="w-full">
+        <TextArea
+          value={editText}
+          onChange={(e) => {
+            setValue({ text: e.target.value, uid: value?.uid || "" } as T);
+          }}
+          fill
+          growVertically
+          placeholder={placeholder}
+          autoFocus={autoFocus}
+          maxLength={MAX_CONTENT_LENGTH}
+        />
+        {editText.length >= MAX_CONTENT_LENGTH && (
+          <p className="mt-1 text-xs text-red-500">
+            Character limit reached ({MAX_CONTENT_LENGTH})
+          </p>
+        )}
+      </div>
     );
   }
 
diff --git a/apps/roam/src/styles/discourseGraphStyles.css b/apps/roam/src/styles/discourseGraphStyles.css
index 67c9f24b6..6eb5f04a3 100644
--- a/apps/roam/src/styles/discourseGraphStyles.css
+++ b/apps/roam/src/styles/discourseGraphStyles.css
@@ -168,7 +168,7 @@ div.roamjs-discourse-drawer div.bp3-drawer {
 }
 
 .roamjs-canvas-dialog textarea {
-  min-height: 96px;
+  min-height: 2rem;
 }
 
 /*