No more observer resize errors

frontend/src/BackstoryTextField.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, useEffect, ChangeEvent, KeyboardEvent } from 'react';
 import { useTheme } from '@mui/material/styles';
+import './BackstoryTextField.css';
 
 interface BackstoryTextFieldProps {
   value: string;
@@ -29,7 +30,7 @@ const BackstoryTextField: React.FC<BackstoryTextFieldProps> = ({
   
       shadow.value = value || placeholder || '';
   
-      window.setTimeout(() => {
+      window.requestAnimationFrame(() => {
         const computed = getComputedStyle(textarea);
         const paddingTop = parseFloat(computed.paddingTop || '0');
         const paddingBottom = parseFloat(computed.paddingBottom || '0');
@@ -38,9 +39,9 @@ const BackstoryTextField: React.FC<BackstoryTextFieldProps> = ({
         const newHeight = shadow.scrollHeight + totalPadding;
     
         textarea.style.height = `${newHeight}px`;
-      }, 100);
+      });
     }
-  }, [value, multiline, placeholder]);
+  }, [value, multiline, textareaRef, shadowRef, placeholder]);
 
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
     if (onChange) {
@@ -49,9 +50,6 @@ const BackstoryTextField: React.FC<BackstoryTextFieldProps> = ({
   };
 
   const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) => {
-    if (!multiline && e.key === 'Enter') {
-      e.preventDefault();
-    }
     if (onKeyDown) {
       onKeyDown(e);
     }
@@ -59,15 +57,14 @@ const BackstoryTextField: React.FC<BackstoryTextFieldProps> = ({
 
   const sharedStyle = {
     width: '100%',
-    padding: '14px',
+    padding: '16.5px 14px',
     resize: 'none' as const,
     overflow: 'hidden' as const,
     boxSizing: 'border-box' as const,
+    minHeight: 'calc(1.5rem + 28px)', // lineHeight + padding-top + padding-bottom
     lineHeight: '1.5',
-    borderRadius: '0.25rem',
+    borderRadius: '4px',
     fontSize: '16px',
-    opacity: disabled ? "0.38" : "1",
-    color: disabled ? 'rgba(0, 0, 0, 0.38)' : 'rgb(46, 46, 46)',
     backgroundColor: 'rgba(0, 0, 0, 0)',
     fontFamily: theme.typography.fontFamily,
   };
@@ -75,6 +72,7 @@ const BackstoryTextField: React.FC<BackstoryTextFieldProps> = ({
   if (!multiline) {
     return (
       <input
+        className="BackstoryTextField"
         type="text"
         value={value}
         disabled={disabled}
@@ -89,6 +87,7 @@ const BackstoryTextField: React.FC<BackstoryTextFieldProps> = ({
   return (
     <>
       <textarea
+        className="BackstoryTextField"
         ref={textareaRef}
         value={value}
         disabled={disabled}
@@ -101,8 +100,10 @@ const BackstoryTextField: React.FC<BackstoryTextFieldProps> = ({
         }}
       />
       <textarea
+        className="BackgroundTextField"
         ref={shadowRef}
         aria-hidden="true"
+        value={placeholder || ""}
         style={{
           ...sharedStyle,
           position: 'relative',
@@ -113,6 +114,7 @@ const BackstoryTextField: React.FC<BackstoryTextFieldProps> = ({
           margin: '0px',
           overflow: 'auto',
           height: '0px',
+          minHeight: '0px',
         }}
         readOnly
         tabIndex={-1}

frontend/src/VectorVisualizer.tsx

@@ -147,14 +147,6 @@ const VectorVisualizer: React.FC<VectorVisualizerProps> = (props: VectorVisualiz
     fetchCollection();
   }, [result, setResult, connectionBase, setSnack, sessionId, view2D])  
 
-  /* Trigger a resize event to force Plotly to rescale */
-  useEffect(() => {
-    window.dispatchEvent(new Event('resize'));
-    if (plotlyRef.current) {
-      Plot.Plots.resize(plotlyRef.current);
-    }
-  }, [plotlyRef])
-
   useEffect(() => {
     if (!result || !result.embeddings) return;
     if (result.embeddings.length === 0) return;