Update AppImage

AppImage/app/globals.css

@@ -1,13 +1,14 @@
-@tailwind base;
+@import "tailwindcss";
-@tailwind components;
+@import "tw-animate-css";
-@tailwind utilities;
+
+@custom-variant dark (&:is(.dark *));
 
 /* ===================== */
 /* Light Mode (default)  */
 /* ===================== */
 :root {
-  --background: oklch(1 0 0);              /* blanco */
+  --background: oklch(1 0 0); /* blanco */
-  --foreground: oklch(0.145 0 0);          /* casi negro */
+  --foreground: oklch(0.145 0 0); /* casi negro */
 
   --card: oklch(1 0 0);
   --card-foreground: var(--foreground);
@@ -15,14 +16,14 @@
   --popover: var(--card);
   --popover-foreground: var(--foreground);
 
-  --primary: oklch(0.205 0 0);             /* gris oscuro */
+  --primary: oklch(0.205 0 0); /* gris oscuro */
-  --primary-foreground: oklch(0.985 0 0);  /* blanco */
+  --primary-foreground: oklch(0.985 0 0); /* blanco */
 
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: var(--primary);
 
   --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);    /* gris medio */
+  --muted-foreground: oklch(0.556 0 0); /* gris medio */
 
   --accent: oklch(0.97 0 0);
   --accent-foreground: var(--primary);
@@ -56,8 +57,8 @@
 /* Dark Mode (gris)      */
 /* ===================== */
 .dark {
-  --background: oklch(0.22 0 0);           /* gris oscuro */
+  --background: oklch(0.22 0 0); /* gris oscuro */
-  --foreground: oklch(0.97 0 0);           /* blanco/gris claro */
+  --foreground: oklch(0.97 0 0); /* blanco/gris claro */
 
   --card: oklch(0.24 0 0);
   --card-foreground: var(--foreground);
@@ -65,7 +66,7 @@
   --popover: var(--card);
   --popover-foreground: var(--foreground);
 
-  --primary: oklch(0.83 0 0);              /* casi blanco */
+  --primary: oklch(0.83 0 0); /* casi blanco */
   --primary-foreground: var(--background);
 
   --secondary: oklch(0.28 0 0);
@@ -84,8 +85,8 @@
   --input: var(--border);
   --ring: oklch(0.55 0 0);
 
-  --chart-1: oklch(0.60 0.20 255);
+  --chart-1: oklch(0.6 0.2 255);
-  --chart-2: oklch(0.70 0.16 165);
+  --chart-2: oklch(0.7 0.16 165);
   --chart-3: oklch(0.76 0.19 70);
   --chart-4: oklch(0.63 0.25 305);
   --chart-5: oklch(0.66 0.24 20);
@@ -100,12 +101,52 @@
   --sidebar-ring: var(--ring);
 }
 
+@theme inline {
+  /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
 /* ===================== */
 /* Base layer            */
 /* ===================== */
 @layer base {
   * {
-    @apply border-border;
+    @apply border-border outline-ring/50;
   }
 
   body {
@@ -113,10 +154,10 @@
   }
 
   /* Foco accesible */
-  :is(button,[role="button"],a,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus {
+  :is(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus {
     @apply outline-none;
   }
-  :is(button,[role="button"],a,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible {
+  :is(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
     @apply ring-2;
     --tw-ring-color: var(--ring);
     --tw-ring-opacity: 0.5; /* equivalente al /50 */
@@ -149,22 +190,28 @@
 /* Ajustes para xterm    */
 /* ===================== */
 
-/* Terminal sin padding, ancho completo */
+/* Terminal sin padding, ancho completo pero sin overflow */
 .xterm {
   padding: 0 !important;
   width: 100% !important;
+  max-width: 100% !important;
+  overflow: hidden !important;
 }
 
 /* Viewport sin padding ni margen */
 .xterm-viewport {
   padding: 0 !important;
   margin: 0 !important;
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
 }
 
 /* Parte donde se pinta el texto */
 .xterm-screen {
   padding: 0 !important;
   margin: 0 !important;
+  width: 100% !important;
+  max-width: 100% !important;
 }
 
 /* Quitar margen raro en filas */
@@ -172,24 +219,48 @@
   margin: 0 !important;
 }
 
-/* Ocultar barra horizontal en caso de glitch */
+/* Mantener scrollbar vertical pero ocultar horizontal */
 .xterm-viewport::-webkit-scrollbar {
-  width: 0;
+  width: 8px;
   height: 0;
 }
 
+.xterm-viewport::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.xterm-viewport::-webkit-scrollbar-thumb {
+  background: var(--muted);
+  border-radius: 4px;
+}
+
+.xterm-viewport::-webkit-scrollbar-thumb:hover {
+  background: var(--muted-foreground);
+}
+
 /* ========================= */
 /* Ajustes específicos móvil */
 /* ========================= */
 @media (max-width: 768px) {
+  /* Forzar ancho correcto sin overflow */
+  .xterm {
+    max-width: 100vw !important;
+  }
 
-  /* Ocultamos cualquier desbordamiento horizontal */
   .xterm-viewport {
     overflow-x: hidden !important;
+    max-width: 100% !important;
   }
 
   .xterm-screen {
-    width: 101% !important;  
+    width: 100% !important;
+    max-width: 100% !important;
     display: block;
   }
+
+  /* Ocultar scrollbar en móvil para más espacio */
+  .xterm-viewport::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
 }

AppImage/components/terminal-panel.tsx

@@ -360,14 +360,13 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
     ]).then(([Terminal, FitAddon]) => [Terminal, FitAddon])
 
     const term = new TerminalClass({
-      fontFamily:
+      fontFamily: '"DejaVu Sans Mono", "Liberation Mono", "Menlo", "Monaco", "Consolas", "Courier New", monospace',
-        '"DejaVu Sans Mono", "Liberation Mono", "Menlo", "Monaco", "Consolas", "Courier New", monospace',
 
       fontSize: isMobile ? 11 : 13,
       cursorBlink: true,
       scrollback: 2000,
       disableStdin: false,
-      customGlyphs: true, 
+      customGlyphs: true,
       cols: isMobile ? 40 : layout === "grid" ? 60 : 120,
       rows: isMobile ? 20 : layout === "grid" ? 20 : 40,
       theme: {
@@ -638,7 +637,7 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
 
       <div
         className="flex-1 overflow-hidden flex flex-col"
-        style={!isMobile ? { height: `${terminalHeight}px`, minHeight: "200px", maxHeight: "1200px" } : undefined}
+        style={!isMobile ? { height: `${terminalHeight}px` } : undefined}
       >
         {isMobile ? (
           <Tabs value={activeTerminalId} onValueChange={setActiveTerminalId} className="h-full flex flex-col">
@@ -671,9 +670,9 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
             ))}
           </Tabs>
         ) : (
-          <div className={`${getLayoutClass()} h-full gap-0.5 bg-zinc-800 p-0.5`}>
+          <div className={`${getLayoutClass()} h-full gap-0.5 bg-zinc-800 p-0.5 w-full overflow-hidden`}>
             {terminals.map((terminal) => (
-              <div key={terminal.id} className="relative bg-zinc-900 overflow-hidden flex flex-col min-h-0">
+              <div key={terminal.id} className="relative bg-zinc-900 overflow-hidden flex flex-col min-h-0 w-full">
                 <div className="flex-shrink-0 flex items-center justify-between px-2 py-1 bg-zinc-900/95 border-b border-zinc-800">
                   <button
                     onClick={() => setActiveTerminalId(terminal.id)}
@@ -691,7 +690,7 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
                 </div>
                 <div
                   ref={(el) => (containerRefs.current[terminal.id] = el)}
-                  className="flex-1 w-full bg-black overflow-hidden"
+                  className="flex-1 w-full max-w-full bg-black overflow-hidden"
                 />
               </div>
             ))}