Refactor: Make system responsive

src/components/agents/CreateAgentDialog.tsx

@@ -41,7 +41,7 @@ export function CreateAgentDialog({ open, onOpenChange }: CreateAgentDialogProps
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl">
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>Criar Novo Agente</DialogTitle>
           <DialogDescription>

src/components/layout/AppLayout.tsx

@@ -1,11 +1,13 @@
 import { AppSidebar } from "./AppSidebar";
+import { MobileNav } from "./MobileNav";
 import { Outlet } from "react-router-dom";
 
 export function AppLayout() {
   return (
     <div className="flex h-screen w-full bg-background overflow-hidden">
+      <MobileNav />
       <AppSidebar />
-      <main className="flex-1 p-6 lg:p-8 overflow-y-auto">
+      <main className="flex-1 p-4 md:p-6 lg:p-8 overflow-y-auto pt-16 md:pt-6">
         <Outlet />
       </main>
     </div>

src/components/layout/MobileNav.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import { NavLink } from "react-router-dom";
+import { Bot, FileText, TestTube, Menu, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { ThemeToggle } from "./ThemeToggle";
+
+const menuItems = [
+  { title: "Agentes", url: "/agents", icon: Bot },
+  { title: "Prompts", url: "/", icon: FileText },
+  { title: "Testar Prompt", url: "/test", icon: TestTube },
+];
+
+export function MobileNav() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      {/* Mobile Header */}
+      <header className="md:hidden fixed top-0 left-0 right-0 z-50 bg-background border-b border-border px-4 py-3 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
+            <span className="text-xs font-bold text-white">HX</span>
+          </div>
+          <h1 className="text-lg font-bold gradient-text">HGTX PromptLab</h1>
+        </div>
+        <div className="flex items-center gap-2">
+          <ThemeToggle />
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            {isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+          </Button>
+        </div>
+      </header>
+
+      {/* Mobile Menu Overlay */}
+      {isOpen && (
+        <>
+          <div
+            className="md:hidden fixed inset-0 bg-background/80 backdrop-blur-sm z-40"
+            onClick={() => setIsOpen(false)}
+          />
+          <nav className="md:hidden fixed top-[57px] left-0 right-0 bg-background border-b border-border z-40 animate-fade-in">
+            <div className="px-4 py-2 space-y-1">
+              {menuItems.map((item) => {
+                const Icon = item.icon;
+                return (
+                  <NavLink
+                    key={item.title}
+                    to={item.url}
+                    end
+                    onClick={() => setIsOpen(false)}
+                    className={({ isActive }) =>
+                      `flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
+                        isActive
+                          ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                          : "text-foreground hover:bg-accent"
+                      }`
+                    }
+                  >
+                    <Icon className="w-5 h-5" />
+                    <span className="font-medium">{item.title}</span>
+                  </NavLink>
+                );
+              })}
+            </div>
+          </nav>
+        </>
+      )}
+    </>
+  );
+}

src/components/prompts/CreatePromptDialog.tsx

@@ -80,7 +80,7 @@ Siga estas diretrizes em todas as suas interações.`;
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto w-[95vw] sm:w-full">
         <DialogHeader>
           <DialogTitle>Criar Novo Prompt</DialogTitle>
           <DialogDescription>

src/components/prompts/EditPromptDialog.tsx

@@ -83,7 +83,7 @@ export function EditPromptDialog({ open, onOpenChange, prompt }: EditPromptDialo
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto w-[95vw] sm:w-full">
         <DialogHeader>
           <DialogTitle>Editar Prompt</DialogTitle>
           <DialogDescription>

src/components/prompts/PromptHistoryDialog.tsx

@@ -120,7 +120,7 @@ export function PromptHistoryDialog({ open, onOpenChange, prompt }: PromptHistor
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-4xl max-h-[90vh]">
+      <DialogContent className="max-w-4xl max-h-[90vh] w-[95vw] sm:w-full">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <GitBranch className="h-5 w-5" />