Revert "Add resizable and collapsible panel layout (#5926)"

This reverts commit c37e865.

frontend/src/routes/_oh.app/route.tsx

@@ -24,10 +24,6 @@ import { useLatestRepoCommit } from "#/hooks/query/use-latest-repo-commit";
 import { useAuth } from "#/context/auth-context";
 import { useConversationConfig } from "#/hooks/query/use-conversation-config";
 import { Container } from "#/components/layout/container";
-import {
-  Orientation,
-  ResizablePanel,
-} from "#/components/layout/resizable-panel";
 import Security from "#/components/shared/modals/security/security";
 import { useEndSession } from "#/hooks/use-end-session";
 import { useUserConversation } from "#/hooks/query/get-conversation-permissions";
@@ -41,7 +37,6 @@ function AppContent() {
   const { data: settings } = useSettings();
 
   const endSession = useEndSession();
-  const [width, setWidth] = React.useState(window.innerWidth);
 
   const { conversationId } = useConversation();
 
@@ -93,49 +88,24 @@ function AppContent() {
     dispatch(clearJupyter());
   });
 
-  function handleResize() {
-    setWidth(window.innerWidth);
-  }
-
-  React.useEffect(() => {
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
   const {
     isOpen: securityModalIsOpen,
     onOpen: onSecurityModalOpen,
     onOpenChange: onSecurityModalOpenChange,
   } = useDisclosure();
 
-  function renderMain() {
-    if (width <= 640) {
-      return (
-        <div className="rounded-xl overflow-hidden border border-neutral-600 w-full">
-          <ChatInterface />
-        </div>
-      );
-    }
-    return (
-      <ResizablePanel
-        orientation={Orientation.HORIZONTAL}
-        className="grow h-full min-h-0 min-w-0"
-        initialSize={500}
-        firstClassName="rounded-xl overflow-hidden border border-neutral-600"
-        secondClassName="flex flex-col overflow-hidden"
-        firstChild={<ChatInterface />}
-        secondChild={
-          <ResizablePanel
-            orientation={Orientation.VERTICAL}
-            className="grow h-full min-h-0 min-w-0"
-            initialSize={500}
-            firstClassName="rounded-xl overflow-hidden border border-neutral-600"
-            secondClassName="flex flex-col overflow-hidden"
-            firstChild={
+  return (
+    <WsClientProvider ghToken={gitHubToken} conversationId={conversationId}>
+      <EventHandler>
+        <div data-testid="app-route" className="flex flex-col h-full gap-3">
+          <div className="flex h-full overflow-auto gap-3">
+            <Container className="w-full md:w-[390px] max-h-full relative">
+              <ChatInterface />
+            </Container>
+
+            <div className="hidden md:flex flex-col grow gap-3">
               <Container
-                className="h-full"
+                className="h-2/3"
                 labels={[
                   { label: "Workspace", to: "", icon: <CodeIcon /> },
                   { label: "Jupyter", to: "jupyter", icon: <ListIcon /> },
@@ -155,30 +125,18 @@ function AppContent() {
                   <Outlet />
                 </FilesProvider>
               </Container>
-            }
-            secondChild={
+              {/* Terminal uses some API that is not compatible in a server-environment. For this reason, we lazy load it to ensure
+               * that it loads only in the client-side. */}
               <Container
-                className="h-full overflow-scroll"
+                className="h-1/3 overflow-scroll"
                 label={<TerminalStatusLabel />}
               >
-                {/* Terminal uses some API that is not compatible in a server-environment. For this reason, we lazy load it to ensure
-                 * that it loads only in the client-side. */}
                 <React.Suspense fallback={<div className="h-full" />}>
                   <Terminal secrets={secrets} />
                 </React.Suspense>
               </Container>
-            }
-          />
-        }
-      />
-    );
-  }
-
-  return (
-    <WsClientProvider ghToken={gitHubToken} conversationId={conversationId}>
-      <EventHandler>
-        <div data-testid="app-route" className="flex flex-col h-full gap-3">
-          <div className="flex h-full overflow-auto">{renderMain()}</div>
+            </div>
+          </div>
 
           <div className="h-[60px]">
             <Controls