fix: adjusted textarea and playground paddings and design

src/frontend/src/components/core/playgroundComponent/chat-view/chat-input/components/no-input.tsx

@@ -37,7 +37,7 @@ const NoInputView = ({
           </Button>
         )}
 
-        <p className="text-muted-foreground">
+        <p className="text-muted-foreground text-sm">
           Add a{" "}
           <a
             className="underline underline-offset-4"

src/frontend/src/components/core/playgroundComponent/chat-view/chat-input/components/text-area-wrapper.tsx

@@ -118,6 +118,37 @@ const TextAreaWrapper = ({
     }
   }, [chatValue, inputRef]);
 
+  const chatValueRef = useRef(chatValue);
+  const previousWidthRef = useRef<number>(0);
+
+  useEffect(() => {
+    chatValueRef.current = chatValue;
+  }, [chatValue]);
+
+  useEffect(() => {
+    const textarea = inputRef.current;
+    if (!textarea) return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.contentRect.width !== previousWidthRef.current) {
+          previousWidthRef.current = entry.contentRect.width;
+          resizeTextarea(
+            textarea,
+            chatValueRef.current,
+            previousScrollHeightRef,
+          );
+        }
+      }
+    });
+
+    resizeObserver.observe(textarea);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [inputRef]);
+
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLTextAreaElement>) => {
       const newValue = event.target.value;

src/frontend/src/components/core/playgroundComponent/sliding-container/components/flow-page-sliding-container.tsx

@@ -191,7 +191,7 @@ export function FlowPageSlidingContainerContent({
               resize="smooth"
               initial="instant"
             >
-              <StickToBottom.Content className="flex flex-col min-h-full overflow-x-hidden p-4">
+              <StickToBottom.Content className="flex flex-col min-h-full overflow-x-hidden">
                 <div className="flex flex-col w-full">
                   <Messages
                     visibleSession={currentSessionId ?? currentFlowId ?? null}

src/frontend/src/components/ui/textarea.tsx

@@ -10,11 +10,11 @@ export interface TextareaProps
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, password, editNode, ...props }, ref) => {
     return (
-      <div className="w-full">
+      <div className="h-full w-full">
         <textarea
           data-testid="textarea"
           className={cn(
-            "nopan nodelete nodrag noflow textarea-primary nowheel !max-h-fit resize-y",
+            "nopan nodelete nodrag noflow textarea-primary nowheel",
             className,
             password ? "password" : "",
           )}

src/frontend/tests/extended/regression/general-bugs-move-flow-from-folder.spec.ts

@@ -10,8 +10,12 @@ test("user must be able to move flow from folder", async ({ page }) => {
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
+  await page.waitForTimeout(1000);
+
   await renameFlow(page, { flowName: randomName });
 
+  await page.waitForTimeout(1000);
+
   await page.getByTestId("icon-ChevronLeft").click();
   await page.waitForSelector('[data-testid="add-project-button"]', {
     timeout: 3000,
@@ -24,6 +28,8 @@ test("user must be able to move flow from folder", async ({ page }) => {
 
   await page.getByTestId("sidebar-nav-Starter Project").click();
 
+  await page.waitForTimeout(500);
+
   await page.getByText(randomName).hover();
 
   await page