resize observer mostly works

src/vs/workbench/contrib/void/browser/inlineDiffsService.ts

@@ -298,39 +298,27 @@ class InlineDiffsService extends Disposable implements IInlineDiffsService {
 						let zoneId: string | null = null
 						editor.changeViewZones(accessor => { zoneId = accessor.addZone(viewZone); })
 
+
+
 						// mount react
 						this._instantiationService.invokeFunction(accessor => {
 							const props: QuickEditPropsType = {
 								diffareaid: diffArea.diffareaid,
+								onChangeHeight(height) {
+									if (height === undefined) return
+									domNode.style.display = 'block'
+									viewZone.heightInPx = height
+									editor.changeViewZones(accessor => { if (zoneId) { accessor.layoutZone(zoneId) } })
+								},
 								onUserUpdateText(text) { diffArea.userText = text; },
-								onMount: () => onResize()
 							}
 							mountCtrlK(domNode, accessor, props)
 						})
 
-						// observe
-						const onResize = () => {
-							domNode.style.display = 'block'
-							console.log('resizing');
-							viewZone.heightInPx = domNode.clientHeight
-
-							editor.changeViewZones(accessor => {
-								if (zoneId) {
-									console.log('CALLING LAYOUT', viewZone.heightInPx);
-									accessor.layoutZone(zoneId)
-								}
-							})
-						}
-						const observer = new ResizeObserver(onResize)
-						console.log('observing...')
-						observer.observe(domNode)
-						onResize()
 
 						return () => {
 							editor.changeViewZones(accessor => { if (zoneId) accessor.removeZone(zoneId) });
 							domNode.remove();
-							observer.disconnect();
-							// __TODO__ dismount
 						}
 					},
 				})

src/vs/workbench/contrib/void/browser/quickEditActions.ts

@@ -9,8 +9,8 @@ import { IInlineDiffsService } from './inlineDiffsService.js';
 
 export type QuickEditPropsType = {
 	diffareaid: number,
+	onChangeHeight: (height: number) => void;
 	onUserUpdateText: (text: string) => void;
-	onMount: () => void;
 }
 
 export type QuickEdit = {

src/vs/workbench/contrib/void/browser/react/src/ctrl-k-tsx/CtrlK.tsx

@@ -8,7 +8,7 @@ export const CtrlK = (props: QuickEditPropsType) => {
 
 	const isDark = useIsDark()
 
-	return <div className={`@@void-scope ${isDark ? 'dark' : ''}`} style={{ width: '100%', height: '100%' }}>
+	return <div className={`@@void-scope ${isDark ? 'dark' : ''}`}>
 		<ErrorBoundary>
 			<CtrlKChat {...props} />
 		</ErrorBoundary>

src/vs/workbench/contrib/void/browser/react/src/ctrl-k-tsx/CtrlKChat.tsx

@@ -7,16 +7,31 @@ import { getCmdKey } from '../../../helpers/getCmdKey.js';
 import { VoidInputBox } from '../util/inputs.js';
 import { QuickEditPropsType } from '../../../quickEditActions.js';
 
-export const CtrlKChat = ({ diffareaid, onUserUpdateText, onMount }: QuickEditPropsType) => {
+export const CtrlKChat = ({ diffareaid, onUserUpdateText, onChangeHeight }: QuickEditPropsType) => {
 
 	const accessor = useAccessor()
 
 	const inlineDiffsService = accessor.get('IInlineDiffsService')
 
+	const formRef = useRef<HTMLFormElement | null>(null)
 
 	const inputBoxRef: React.MutableRefObject<InputBox | null> = useRef(null);
 
-	useEffect(() => onMount(), [onMount])
+	useEffect(() => {
+		console.log('mounting resize observer')
+		const inputContainer = formRef.current
+		if (!inputContainer) return;
+
+		// only observing 1 element
+		const resizeObserver = new ResizeObserver((entries) => {
+			const height = entries[0].contentRect.height
+			console.log('NEW HEIGHT', height)
+			onChangeHeight(height)
+		});
+		resizeObserver.observe(inputContainer);
+		return () => { resizeObserver.disconnect(); };
+	}, [onChangeHeight]);
+
 
 	// state of current message
 	const [instructions, setInstructions] = useState('') // the user's instructions
@@ -41,6 +56,7 @@ export const CtrlKChat = ({ diffareaid, onUserUpdateText, onMount }: QuickEditPr
 	}, [])
 
 	return <form
+		ref={formRef}
 		className={
 			// copied from SidebarChat.tsx
 			`flex flex-col gap-2 p-1 relative input text-left shrink-0
@@ -73,7 +89,7 @@ export const CtrlKChat = ({ diffareaid, onUserUpdateText, onMount }: QuickEditPr
 		<div
 			className={
 				// copied from SidebarChat.tsx
-				`@@[&_textarea]:!void-bg-transparent @@[&_textarea]:!void-outline-none @@[&_textarea]:!void-text-vscode-input-fg @@[&_textarea]:!void-max-h-[100px] @@[&_div.monaco-inputbox]:!void- @@[&_div.monaco-inputbox]:!void-outline-none`
+				`@@[&_textarea]:!void-bg-transparent @@[&_textarea]:!void-outline-none @@[&_textarea]:!void-text-vscode-input-fg @@[&_div.monaco-inputbox]:!void- @@[&_div.monaco-inputbox]:!void-outline-none`
 			}
 		>