Update AppImage

2025-12-14 16:16:21 +00:00 · 2025-11-22 20:02:42 +01:00
parent 31894dd117
commit aebf83d735
2 changed files with 90 additions and 67 deletions
--- a/AppImage/app/globals.css
+++ b/AppImage/app/globals.css
@@ -1,43 +1,58 @@
@import "tailwindcss";
+@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
+  --background: oklch(1 0 0); /* blanco */
+  --foreground: oklch(0.145 0 0); /* casi negro */
+
  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
+  --card-foreground: var(--foreground);
+
+  --popover: var(--card);
+  --popover-foreground: var(--foreground);
+
+  --primary: oklch(0.205 0 0); /* gris oscuro */
+  --primary-foreground: oklch(0.985 0 0); /* blanco */
+
  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
+  --secondary-foreground: var(--primary);
+
  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
+  --muted-foreground: oklch(0.556 0 0); /* gris medio */
+
  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
+  --accent-foreground: var(--primary);
+
  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.145 0 0);
+
  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
+  --input: var(--border);
  --ring: oklch(0.708 0 0);
+
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
+
  --radius: 0.625rem;
+
  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-accent-foreground: var(--primary);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
 }

+/* ===================== */
+/* Dark Mode (gris)      */
+/* ===================== */
 .dark {
  --background: oklch(0.22 0 0); /* gris oscuro */
  --foreground: oklch(0.97 0 0); /* blanco/gris claro */
@@ -124,58 +139,67 @@
 }

 /* ===================== */
-/* Base styles           */
+/* Base layer            */
 /* ===================== */
-* {
-  border-color: var(--border);
-  outline-color: color-mix(in oklch, var(--ring), transparent 50%);
-}
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }

-body {
-  background-color: var(--background);
-  color: var(--foreground);
-}
+  body {
+    @apply bg-background text-foreground;
+  }

-/* Foco accesible */
-:is(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus {
-  outline: none;
-}
-:is(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
-  outline: 2px solid color-mix(in oklch, var(--ring), transparent 50%);
-  outline-offset: 2px;
+  /* Foco accesible */
+  :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 {
+    @apply ring-2;
+    --tw-ring-color: var(--ring);
+    --tw-ring-opacity: 0.5; /* equivalente al /50 */
+  }
 }

 /* ===================== */
 /* Ajustes para Charts   */
 /* ===================== */
-/* Recharts axis */
-.recharts-cartesian-axis-tick tspan {
-  fill: var(--muted-foreground);
-}
-.recharts-cartesian-axis-line,
-.recharts-cartesian-grid line {
-  stroke: var(--border);
-}
+@layer components {
+  /* Recharts axis */
+  .recharts-cartesian-axis-tick tspan {
+    fill: var(--muted-foreground);
+  }
+  .recharts-cartesian-axis-line,
+  .recharts-cartesian-grid line {
+    stroke: var(--border);
+  }

-/* Chart.js axis */
-.chartjs-render-monitor text {
-  fill: var(--muted-foreground);
-}
-.chartjs-render-monitor line {
-  stroke: var(--border);
-}
+  /* Chart.js axis */
+  .chartjs-render-monitor text {
+    fill: var(--muted-foreground);
+  }
+  .chartjs-render-monitor line {
+    stroke: var(--border);
+  }

-/* ===================== */
-/* Terminal xterm styles */
-/* ===================== */
-.xterm {
-  padding: 0 !important;
-}
+  /* Fix xterm.js padding and centering issues */
+  .xterm {
+    padding: 0 !important;
+    margin: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+  }

-.xterm .xterm-viewport {
-  overflow-y: auto !important;
-}
+  .xterm .xterm-viewport {
+    width: 100% !important;
+  }

-.xterm .xterm-screen {
-  padding: 0 !important;
+  .xterm .xterm-screen {
+    width: 100% !important;
+  }
+
+  /* Remove internal padding from xterm rows to fix menu centering */
+  .xterm .xterm-rows {
+    padding: 0 !important;
+  }
 }
--- a/AppImage/components/terminal-panel.tsx
+++ b/AppImage/components/terminal-panel.tsx
@@ -288,7 +288,7 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
      cursorBlink: true,
      scrollback: 2000,
      disableStdin: false,
-      cols: isMobile ? 80 : layout === "grid" ? 60 : 120,
+      cols: isMobile ? 40 : layout === "grid" ? 60 : 120,
      rows: isMobile ? 20 : layout === "grid" ? 15 : 30,
      theme: {
        background: "#000000",
@@ -318,7 +318,10 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
    term.loadAddon(fitAddon)

    term.open(container)
-    fitAddon.fit()
+
+    setTimeout(() => {
+      fitAddon.fit()
+    }, 100)

    const wsUrl = websocketUrl || getWebSocketUrl()
    const ws = new WebSocket(wsUrl)
@@ -560,11 +563,7 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
            </TabsList>
            {terminals.map((terminal) => (
              <TabsContent key={terminal.id} value={terminal.id} className="flex-1 m-0 p-0">
-                <div
-                  ref={setContainerRef(terminal.id)}
-                  className="w-full h-full bg-black"
-                  style={{ height: "calc(100vh - 24rem)" }}
-                />
+                <div ref={setContainerRef(terminal.id)} className="w-full h-full bg-black overflow-hidden" />
              </TabsContent>
            ))}
          </Tabs>
@@ -587,7 +586,7 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
                    </button>
                  )}
                </div>
-                <div ref={setContainerRef(terminal.id)} className="w-full h-full bg-black pt-7" />
+                <div ref={setContainerRef(terminal.id)} className="w-full h-full bg-black overflow-hidden" />
              </div>
            ))}
          </div>