Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-12-14 16:16:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update AppImage

Browse Source
This commit is contained in:
MacRimi
2025-11-23 17:09:25 +01:00
parent c512dde028
commit 72cf16301f
2 changed files with 98 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
AppImage/app/globals.css
View File

@@ -1,6 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";
@import "tw-animate-css";
@custom-variant dark (&:is(.dark *));
/* ===================== */
/* Light Mode (default) */
@@ -84,8 +85,8 @@
--input: var(--border);
--ring: oklch(0.55 0 0);
--chart-1: oklch(0.60 0.20 255);
--chart-2: oklch(0.70 0.16 165);
--chart-1: oklch(0.6 0.2 255);
--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;
}
}

11
AppImage/components/terminal-panel.tsx
View File

@@ -360,8 +360,7 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
]).then(([Terminal, FitAddon]) => [Terminal, FitAddon])
const term = new TerminalClass({
fontFamily:
'"DejaVu Sans Mono", "Liberation Mono", "Menlo", "Monaco", "Consolas", "Courier New", monospace',
fontFamily: '"DejaVu Sans Mono", "Liberation Mono", "Menlo", "Monaco", "Consolas", "Courier New", monospace',
fontSize: isMobile ? 11 : 13,
cursorBlink: true,
@@ -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>
))}