feat(frontend): add responsive UI support for the microagent management page (#9847)

frontend/src/components/features/microagent-management/microagent-management-content.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { MicroagentManagementSidebar } from "./microagent-management-sidebar";
 import { MicroagentManagementMain } from "./microagent-management-main";
@@ -73,14 +73,29 @@ ${formData.query}
 `;
 
 export function MicroagentManagementContent() {
+  // Responsive width state
+  const [width, setWidth] = useState(window.innerWidth);
+
   const { addMicroagentModalVisible, selectedRepository } = useSelector(
     (state: RootState) => state.microagentManagement,
   );
 
   const dispatch = useDispatch();
+
   const { createConversationAndSubscribe, isPending } =
     useCreateConversationAndSubscribeMultiple();
 
+  function handleResize() {
+    setWidth(window.innerWidth);
+  }
+
+  useEffect(() => {
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   const hideAddMicroagentModal = () => {
     dispatch(setAddMicroagentModalVisible(false));
   };
@@ -177,6 +192,26 @@ export function MicroagentManagementContent() {
     });
   };
 
+  if (width < 1024) {
+    return (
+      <div className="w-full h-full flex flex-col gap-6">
+        <div className="w-full rounded-lg border border-[#525252] bg-[#24272E] max-h-[494px] min-h-[494px]">
+          <MicroagentManagementSidebar isSmallerScreen />
+        </div>
+        <div className="w-full rounded-lg border border-[#525252] bg-[#24272E] flex-1 min-h-[494px]">
+          <MicroagentManagementMain />
+        </div>
+        {addMicroagentModalVisible && (
+          <MicroagentManagementAddMicroagentModal
+            onConfirm={handleCreateMicroagent}
+            onCancel={hideAddMicroagentModal}
+            isLoading={isPending}
+          />
+        )}
+      </div>
+    );
+  }
+
   return (
     <div className="w-full h-full flex rounded-lg border border-[#525252] bg-[#24272E] overflow-hidden">
       <MicroagentManagementSidebar />

frontend/src/components/features/microagent-management/microagent-management-sidebar.tsx

@@ -11,8 +11,15 @@ import {
 } from "#/state/microagent-management-slice";
 import { GitRepository } from "#/types/git";
 import { LoadingSpinner } from "#/components/shared/loading-spinner";
+import { cn } from "#/utils/utils";
 
-export function MicroagentManagementSidebar() {
+interface MicroagentManagementSidebarProps {
+  isSmallerScreen?: boolean;
+}
+
+export function MicroagentManagementSidebar({
+  isSmallerScreen = false,
+}: MicroagentManagementSidebarProps) {
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const { data: repositories, isLoading } = useUserRepositories();
@@ -42,7 +49,12 @@ export function MicroagentManagementSidebar() {
   }, [repositories, dispatch]);
 
   return (
-    <div className="w-[418px] h-full max-h-full overflow-y-auto overflow-x-hidden border-r border-[#525252] bg-[#24272E] rounded-tl-lg rounded-bl-lg py-10 px-6 flex flex-col">
+    <div
+      className={cn(
+        "w-[418px] h-full max-h-full overflow-y-auto overflow-x-hidden border-r border-[#525252] bg-[#24272E] rounded-tl-lg rounded-bl-lg py-10 px-6 flex flex-col",
+        isSmallerScreen && "w-full border-none",
+      )}
+    >
       <MicroagentManagementSidebarHeader />
       {isLoading ? (
         <div className="flex flex-col items-center justify-center gap-4 flex-1">