Update AppImage

2025-12-14 16:16:21 +00:00 · 2025-11-22 22:50:23 +01:00
parent db5141e010
commit fe074729ea
2 changed files with 41 additions and 32 deletions
--- a/AppImage/components/proxmox-dashboard.tsx
+++ b/AppImage/components/proxmox-dashboard.tsx
@@ -12,7 +12,6 @@ import Hardware from "./hardware"
 import { SystemLogs } from "./system-logs"
 import { Settings } from "./settings"
 import { OnboardingCarousel } from "./onboarding-carousel"
-import { HealthStatusModal } from "./health-status-modal"
 import { ReleaseNotesModal, useVersionCheck } from "./release-notes-modal"
 import { getApiUrl, fetchApi } from "../lib/api-config"
 import { TerminalPanel } from "./terminal-panel"
@@ -273,7 +272,7 @@ export function ProxmoxDashboard() {
  }

  return (
-    <div className="min-h-screen bg-background flex flex-col">
+    <div className="min-h-screen bg-gradient-to-b from-zinc-900 to-black text-white flex flex-col">
      <OnboardingCarousel />
      <ReleaseNotesModal open={showReleaseNotes} onClose={() => setShowReleaseNotes(false)} />

@@ -610,8 +609,12 @@ export function ProxmoxDashboard() {
        </div>
      </div>

-      <div className="container mx-auto px-4 md:px-6 py-4 md:py-6 flex-1 flex flex-col">
-        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4 md:space-y-6 flex-1 flex flex-col">
+      <div className="container mx-auto px-4 md:px-6 py-4 md:py-6 flex-1 flex flex-col min-h-0">
+        <Tabs
+          value={activeTab}
+          onValueChange={setActiveTab}
+          className="space-y-4 md:space-y-6 flex-1 flex flex-col min-h-0"
+        >
          <TabsContent value="overview" className="space-y-4 md:space-y-6 mt-0">
            <SystemOverview key={`overview-${componentKey}`} />
          </TabsContent>
@@ -632,7 +635,7 @@ export function ProxmoxDashboard() {
            <Hardware key={`hardware-${componentKey}`} />
          </TabsContent>

-          <TabsContent value="terminal" className="flex-1 flex flex-col overflow-hidden mt-0">
+          <TabsContent value="terminal" className="flex-1 flex flex-col overflow-hidden mt-0 min-h-0">
            <TerminalPanel key={`terminal-${componentKey}`} />
          </TabsContent>

@@ -644,23 +647,21 @@ export function ProxmoxDashboard() {
            <Settings />
          </TabsContent>
        </Tabs>
-
-        <footer className="mt-8 md:mt-12 pt-4 md:pt-6 border-t border-border text-center text-xs md:text-sm text-muted-foreground flex-shrink-0">
-          <p className="font-medium mb-2">ProxMenux Monitor v1.0.1</p>
-          <p>
-            <a
-              href="https://ko-fi.com/macrimi"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-blue-500 hover:text-blue-600 hover:underline transition-colors"
-            >
-              Support and contribute to the project
-            </a>
-          </p>
-        </footer>
      </div>

-      <HealthStatusModal open={showHealthModal} onOpenChange={setShowHealthModal} getApiUrl={getApiUrl} />
+      <footer className="mt-8 md:mt-12 pt-4 md:pt-6 border-t border-border text-center text-xs md:text-sm text-muted-foreground flex-shrink-0">
+        <p className="font-medium mb-2">ProxMenux Monitor v1.0.1</p>
+        <p>
+          <a
+            href="https://ko-fi.com/macrimi"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-500 hover:text-blue-600 hover:underline transition-colors"
+          >
+            Support and contribute to the project
+          </a>
+        </p>
+      </footer>
    </div>
  )
 }
--- a/AppImage/components/terminal-panel.tsx
+++ b/AppImage/components/terminal-panel.tsx
@@ -320,13 +320,21 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
    const performResize = () => {
      const xtermViewport = container.querySelector(".xterm-viewport") as HTMLElement
      const xtermScreen = container.querySelector(".xterm-screen") as HTMLElement
-      if (xtermViewport) xtermViewport.style.padding = "0"
-      if (xtermScreen) xtermScreen.style.padding = "0"
+      if (xtermViewport) {
+        xtermViewport.style.padding = "0"
+        xtermViewport.style.width = "100%"
+        xtermViewport.style.height = "100%"
+      }
+      if (xtermScreen) {
+        xtermScreen.style.padding = "0"
+      }

      fitAddon.fit()
      const cols = term.cols
      const rows = term.rows
-      console.log(`[v0] Terminal resized: ${cols}x${rows}`)
+      console.log(
+        `[v0] Terminal ${terminal.id} resized: ${cols}x${rows} (container: ${container.offsetWidth}x${container.offsetHeight})`,
+      )

      // Send resize to backend via HTTP
      const apiUrl = getApiUrl()
@@ -486,7 +494,7 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
  const activeTerminal = terminals.find((t) => t.id === activeTerminalId)

  return (
-    <>
+    <div className="flex flex-col h-full w-full">
      <style jsx>{`
        :global(.xterm .xterm-viewport) {
          padding: 0 !important;
@@ -579,8 +587,8 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
        </div>

        <div className="flex-1 overflow-hidden">
-          {isMobile ? (
-            <Tabs value={activeTerminalId} onValueChange={setActiveTerminalId} className="h-full flex flex-col">
+          {isMobile || terminals.length === 1 ? (
+            <Tabs value={activeTerminalId} onValueChange={setActiveTerminalId} className="flex-1 flex flex-col min-h-0">
              <TabsList className="bg-zinc-900 border-b border-zinc-800 rounded-none justify-start overflow-x-auto flex-shrink-0">
                {terminals.map((terminal) => (
                  <TabsTrigger
@@ -596,20 +604,20 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
                <TabsContent
                  key={terminal.id}
                  value={terminal.id}
-                  className="flex-1 m-0 data-[state=active]:flex data-[state=inactive]:hidden"
+                  className="flex-1 m-0 min-h-0 data-[state=active]:flex data-[state=inactive]:hidden"
                >
-                  <div ref={setContainerRef(terminal.id)} className="w-full h-full bg-black" />
+                  <div ref={setContainerRef(terminal.id)} className="absolute inset-0 bg-black" />
                </TabsContent>
              ))}
            </Tabs>
          ) : (
-            <div className={`${getLayoutClass()} gap-2 h-full p-2`}>
+            <div className={`${getLayoutClass()} gap-2 h-full w-full p-2 min-h-0`}>
              {terminals.map((terminal) => (
                <div
                  key={terminal.id}
                  className={`relative bg-black rounded flex flex-col overflow-hidden border ${
                    terminal.id === activeTerminalId ? "border-blue-500" : "border-zinc-700"
-                  }`}
+                  } min-h-0`}
                  onClick={() => setActiveTerminalId(terminal.id)}
                >
                  <div className="flex items-center justify-between px-2 py-1 bg-zinc-800 border-b border-zinc-700">
@@ -628,7 +636,7 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
                      </Button>
                    )}
                  </div>
-                  <div ref={setContainerRef(terminal.id)} className="flex-1 w-full overflow-hidden bg-black" />
+                  <div ref={setContainerRef(terminal.id)} className="flex-1 w-full overflow-hidden bg-black min-h-0" />
                </div>
              ))}
            </div>
@@ -840,6 +848,6 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
          </DialogContent>
        </Dialog>
      </div>
-    </>
+    </div>
  )
 }