andreas/llama-swap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI improvements (#213)

Browse Source 
* use two column for logs view on wider screens

* hide log controls when panel is minimized
This commit is contained in:
Benson Wong
2025-07-31 11:59:21 -07:00
committed by GitHub
parent 5172cb2e12
commit 574fdfabb4
1 changed files with 27 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/pages/LogViewer.tsx
View File

@@ -6,7 +6,7 @@ const LogViewer = () => {
const { proxyLogs, upstreamLogs } = useAPI(); const { proxyLogs, upstreamLogs } = useAPI();
return ( return (
<div className="flex flex-col gap-5" style={{ height: "calc(100vh - 125px)" }}> <div className="flex flex-col lg:flex-row gap-5" style={{ height: "calc(100vh - 125px)" }}>
<LogPanel id="proxy" title="Proxy Logs" logData={proxyLogs} /> <LogPanel id="proxy" title="Proxy Logs" logData={proxyLogs} />
<LogPanel id="upstream" title="Upstream Logs" logData={upstreamLogs} /> <LogPanel id="upstream" title="Upstream Logs" logData={upstreamLogs} />
</div> </div>
@@ -90,9 +90,10 @@ export const LogPanel = ({ id, title, logData, className }: LogPanelProps) => {
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
{/* Title - Always full width on mobile, normal on desktop */} {/* Title - Always full width on mobile, normal on desktop */}
<div className="w-full md:w-auto" onClick={() => setIsCollapsed(!isCollapsed)}> <div className="w-full md:w-auto" onClick={() => setIsCollapsed(!isCollapsed)}>
<h3 className="m-0 text-lg">{title}</h3> <h3 className="m-0 text-lg p-0">{title}</h3>
</div> </div>
{!isCollapsed && (
<div className="flex flex-col sm:flex-row gap-4 w-full md:w-auto"> <div className="flex flex-col sm:flex-row gap-4 w-full md:w-auto">
{/* Sizing Buttons - Stacks vertically on mobile */} {/* Sizing Buttons - Stacks vertically on mobile */}
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
@@ -118,6 +119,7 @@ export const LogPanel = ({ id, title, logData, className }: LogPanelProps) => {
</button> </button>
</div> </div>
</div> </div>
)}
</div> </div>
</div> </div>