UI improvements (#213)

* use two column for logs view on wider screens

* hide log controls when panel is minimized

ui/src/pages/LogViewer.tsx

@@ -6,7 +6,7 @@ const LogViewer = () => {
   const { proxyLogs, upstreamLogs } = useAPI();
 
   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="upstream" title="Upstream Logs" logData={upstreamLogs} />
     </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">
           {/* Title - Always full width on mobile, normal on desktop */}
           <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>
 
+          {!isCollapsed && (
             <div className="flex flex-col sm:flex-row gap-4 w-full md:w-auto">
               {/* Sizing Buttons - Stacks vertically on mobile */}
               <div className="flex flex-wrap gap-2">
@@ -118,6 +119,7 @@ export const LogPanel = ({ id, title, logData, className }: LogPanelProps) => {
                 </button>
               </div>
             </div>
+          )}
         </div>
       </div>