added better resizing of popup input field while in transitioning to fullscreen mode

src/editor/popup/components/input/index.js

@@ -4,7 +4,7 @@ import './style.scss';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef, useEffect } from '@wordpress/element';
+import { useRef, useEffect, useState } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
@@ -13,9 +13,11 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { ReactComponent as MindLogoIcon } from '../../../../icons/mind-logo.svg';
 
 export default function Input(props) {
-	const { onInsert } = props;
+	const { onInsert, isFullscreen } = props;
 
 	const ref = useRef();
+	const prevIsFullscreenRef = useRef(isFullscreen);
+	const [isForceResize, setIsForceResize] = useState(0);
 
 	const { reset, setInput, setScreen, requestAI } = useDispatch('mind/popup');
 
@@ -87,7 +89,37 @@ export default function Input(props) {
 			// Trying to set this with state or a ref will product an incorrect value.
 			ref.current.style.height = scrollHeight + 'px';
 		}
-	}, [ref, input, loading, hasResponse]);
+	}, [ref, input, loading, hasResponse, isForceResize]);
+
+	// Automatic height after fullscreen transition.
+	// Trigger resize 3 times during fullscreen transition
+	useEffect(() => {
+		// Only run when transitioning from false to true
+		const allowRezise = isFullscreen && !prevIsFullscreenRef.current;
+
+		prevIsFullscreenRef.current = isFullscreen;
+
+		if (allowRezise) {
+			// Array of delays for the three resizes
+			const resizeDelays = [100, 200, 300];
+			const timeoutIds = [];
+
+			// Schedule the three resizes
+			resizeDelays.forEach((delay) => {
+				const timeoutId = setTimeout(() => {
+					// Using functional update to avoid dependency on current state
+					setIsForceResize((prev) => prev + 1);
+				}, delay);
+
+				timeoutIds.push(timeoutId);
+			});
+
+			// Cleanup function to clear all timeouts
+			return () => {
+				timeoutIds.forEach((id) => clearTimeout(id));
+			};
+		}
+	}, [isFullscreen]);
 
 	return (
 		<div className="mind-popup-input">

src/editor/popup/index.js

@@ -149,7 +149,7 @@ export default function Popup() {
 		>
 			{connected ? (
 				<>
-					<Input onInsert={onInsert} />
+					<Input onInsert={onInsert} isFullscreen={isFullscreen} />
 					{loading && <LoadingLine />}
 					<Content />
 					<Footer onInsert={onInsert} />