diff --git a/AppImage/components/terminal-panel.tsx b/AppImage/components/terminal-panel.tsx index 2c32bca..30ac291 100644 --- a/AppImage/components/terminal-panel.tsx +++ b/AppImage/components/terminal-panel.tsx @@ -12,7 +12,7 @@ import { Lightbulb, Terminal, Plus, - Split, + AlignJustify, Grid2X2, GripHorizontal, } from "lucide-react" @@ -134,7 +134,7 @@ const proxmoxCommands = [ export const TerminalPanel: React.FC = ({ websocketUrl, onClose }) => { const [terminals, setTerminals] = useState([]) const [activeTerminalId, setActiveTerminalId] = useState("") - const [layout, setLayout] = useState<"single" | "vertical" | "horizontal" | "grid">("single") + const [layout, setLayout] = useState<"single" | "grid">("single") const [isMobile, setIsMobile] = useState(false) const [terminalHeight, setTerminalHeight] = useState(500) // altura por defecto en px const [isResizing, setIsResizing] = useState(false) @@ -538,9 +538,15 @@ export const TerminalPanel: React.FC = ({ websocketUrl, onCl const getLayoutClass = () => { const count = terminals.length if (isMobile || count === 1) return "grid grid-cols-1" - if (layout === "vertical" || count === 2) return "grid grid-cols-2" - if (layout === "horizontal") return "grid grid-rows-2" - if (layout === "grid" || count >= 3) return "grid grid-cols-2 grid-rows-2" + + // Vista de cuadrĂ­cula 2x2 + if (layout === "grid") { + if (count === 2) return "grid grid-cols-2" + if (count === 3) return "grid grid-cols-2 grid-rows-2" + if (count === 4) return "grid grid-cols-2 grid-rows-2" + } + + // Vista de filas apiladas (single) - una terminal debajo de otra return "grid grid-cols-1" } @@ -562,26 +568,20 @@ export const TerminalPanel: React.FC = ({ websocketUrl, onCl {!isMobile && terminals.length > 1 && ( <> - @@ -666,8 +666,8 @@ export const TerminalPanel: React.FC = ({ websocketUrl, onCl ) : (
{terminals.map((terminal) => ( -
-
+
+
)}
-
(containerRefs.current[terminal.id] = el)} className="w-full h-full bg-black pt-7" /> +
(containerRefs.current[terminal.id] = el)} + className="flex-1 w-full bg-black overflow-hidden" + />
))}