dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

fix: Resize dashboard boxes and reduce server stats size to add scrolling

Browse Source
This commit is contained in:
LukeGus
2025-10-18 16:09:40 -05:00
parent eda60ae3b6
commit 7d76731ee9
2 changed files with 49 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/ui/Desktop/Apps/Dashboard/Dashboard.tsx
View File

@@ -380,7 +380,7 @@ export function Dashboard({
<Separator className="mt-3 p-0.25" /> <Separator className="mt-3 p-0.25" />
<div className="flex flex-col h-screen my-5 mx-5 gap-4"> <div className="flex flex-col flex-1 my-5 mx-5 gap-4 min-h-0">
<div className="flex flex-row flex-1 gap-4 min-h-0"> <div className="flex flex-row flex-1 gap-4 min-h-0">
<div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden"> <div className="flex-1 border-2 border-dark-border rounded-md bg-dark-bg-darker flex flex-col overflow-hidden">
<div className="flex flex-col mx-3 my-2 overflow-y-auto overflow-x-hidden"> <div className="flex flex-col mx-3 my-2 overflow-y-auto overflow-x-hidden">

94
src/ui/Desktop/Apps/Server/Server.tsx
View File

@@ -409,58 +409,60 @@ export function Server({
</div> </div>
<Separator className="p-0.25 w-full" /> <Separator className="p-0.25 w-full" />
{showStatsUI && ( <div className="flex-1 overflow-y-auto min-h-0">
<div className="rounded-lg border-2 border-dark-border m-3 bg-dark-bg-darker p-4"> {showStatsUI && (
{isLoadingMetrics && !metrics ? ( <div className="rounded-lg border-2 border-dark-border m-3 bg-dark-bg-darker p-4 max-h-[50vh] overflow-y-auto">
<div className="flex items-center justify-center py-8"> {isLoadingMetrics && !metrics ? (
<div className="flex items-center gap-3"> <div className="flex items-center justify-center py-8">
<div className="w-6 h-6 border-2 border-blue-400 border-t-transparent rounded-full animate-spin"></div> <div className="flex items-center gap-3">
<span className="text-gray-300"> <div className="w-6 h-6 border-2 border-blue-400 border-t-transparent rounded-full animate-spin"></div>
{t("serverStats.loadingMetrics")} <span className="text-gray-300">
</span> {t("serverStats.loadingMetrics")}
</div> </span>
</div>
) : !metrics && serverStatus === "offline" ? (
<div className="flex items-center justify-center py-8">
<div className="text-center">
<div className="w-12 h-12 mx-auto mb-3 rounded-full bg-red-500/20 flex items-center justify-center">
<div className="w-6 h-6 border-2 border-red-400 rounded-full"></div>
</div> </div>
<p className="text-gray-300 mb-1">
{t("serverStats.serverOffline")}
</p>
<p className="text-sm text-gray-500">
{t("serverStats.cannotFetchMetrics")}
</p>
</div> </div>
</div> ) : !metrics && serverStatus === "offline" ? (
) : ( <div className="flex items-center justify-center py-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div className="text-center">
{enabledWidgets.map((widgetType) => ( <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-red-500/20 flex items-center justify-center">
<div key={widgetType} className="h-[280px]"> <div className="w-6 h-6 border-2 border-red-400 rounded-full"></div>
{renderWidget(widgetType)} </div>
<p className="text-gray-300 mb-1">
{t("serverStats.serverOffline")}
</p>
<p className="text-sm text-gray-500">
{t("serverStats.cannotFetchMetrics")}
</p>
</div> </div>
))} </div>
</div> ) : (
)} <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
</div> {enabledWidgets.map((widgetType) => (
)} <div key={widgetType} className="h-[280px]">
{renderWidget(widgetType)}
{/* SSH Tunnels */} </div>
{currentHostConfig?.tunnelConnections && ))}
currentHostConfig.tunnelConnections.length > 0 && ( </div>
<div className="rounded-lg border-2 border-dark-border m-3 bg-dark-bg-darker h-[360px] overflow-hidden flex flex-col min-h-0"> )}
<Tunnel
filterHostKey={
currentHostConfig?.name &&
currentHostConfig.name.trim() !== ""
? currentHostConfig.name
: `${currentHostConfig?.username}@${currentHostConfig?.ip}`
}
/>
</div> </div>
)} )}
{/* SSH Tunnels */}
{currentHostConfig?.tunnelConnections &&
currentHostConfig.tunnelConnections.length > 0 && (
<div className="rounded-lg border-2 border-dark-border m-3 bg-dark-bg-darker h-[360px] overflow-hidden flex flex-col min-h-0">
<Tunnel
filterHostKey={
currentHostConfig?.name &&
currentHostConfig.name.trim() !== ""
? currentHostConfig.name
: `${currentHostConfig?.username}@${currentHostConfig?.ip}`
}
/>
</div>
)}
</div>
<p className="px-4 pt-2 pb-2 text-sm text-gray-500"> <p className="px-4 pt-2 pb-2 text-sm text-gray-500">
{t("serverStats.feedbackMessage")}{" "} {t("serverStats.feedbackMessage")}{" "}
<a <a