fix: use flex layout for terminal container to ensure proper sizing

- Remove ResizeObserver that was causing infinite resize loop
- Add display: flex to terminal-container for proper child sizing
- Use flex: 1 on .xterm element instead of height: 100%
- Remove explicit height/width from xterm-viewport and xterm-screen
- Let flexbox handle the layout naturally

apps/web/src/components/terminal.tsx

@@ -227,14 +227,6 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
 
     window.addEventListener("resize", handleResize);
 
-    // Use ResizeObserver to detect container size changes
-    const resizeObserver = new ResizeObserver(() => {
-      handleResize();
-    });
-    if (terminalRef.current) {
-      resizeObserver.observe(terminalRef.current);
-    }
-
     // Notify parent about terminal readiness
     if (onTerminalReadyRef.current) {
       const sendData = (data: string) => {
@@ -263,7 +255,6 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
     return () => {
       clearTimeout(resizeTimeout);
       window.removeEventListener("resize", handleResize);
-      resizeObserver.disconnect();
       document.removeEventListener("visibilitychange", handleVisibilityChange);
       ws.close();
       term.dispose();