From e87d25de85eb4c5c249fc16d6f0c4cfc8d15ad8b Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 12 Nov 2024 15:30:18 +0700
Subject: [PATCH] fix: calculate base layout with system monitor panel (#3999)

---
 .../BottomPanel/SystemMonitor/index.tsx       |  3 +--
 .../Thread/ThreadCenterPanel/index.tsx        | 19 +++++++++++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx b/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
index 14055b535..3dfdff2f9 100644
--- a/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
+++ b/web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
@@ -79,7 +79,7 @@ const SystemMonitor = () => {
       {showSystemMonitorPanel && (
         <div
           className={twMerge(
-            'fixed bottom-9 left-[49px] z-50 flex h-[200px] w-[calc(100%-48px)] flex-shrink-0 flex-col border-t border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))]',
+            'system-monitor-panel fixed bottom-9 left-[49px] z-50 flex w-[calc(100%-48px)] flex-shrink-0 flex-col border-t border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))]',
             showFullScreen && 'h-[calc(100%-63px)]',
             reduceTransparent && 'w-[calc(100%-48px)] rounded-none'
           )}
@@ -147,7 +147,6 @@ const SystemMonitor = () => {
                   <span className="flex-shrink-0 ">{ramUtilitized}%</span>
                 </div>
               </div>
-
               {gpus.length > 0 && (
                 <div className="mb-4 border-b border-[hsla(var(--app-border))] pb-4 last:border-none">
                   {gpus.map((gpu, index) => {
diff --git a/web/screens/Thread/ThreadCenterPanel/index.tsx b/web/screens/Thread/ThreadCenterPanel/index.tsx
index 3f74181f7..1f23e9dc5 100644
--- a/web/screens/Thread/ThreadCenterPanel/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/index.tsx
@@ -147,6 +147,20 @@ const ThreadCenterPanel = () => {
 
   const showSystemMonitorPanel = useAtomValue(showSystemMonitorPanelAtom)
 
+  const [height, setHeight] = useState<number>(0)
+
+  useEffect(() => {
+    if (showSystemMonitorPanel) {
+      const element = document.querySelector('.system-monitor-panel')
+
+      if (element) {
+        setHeight(element.clientHeight) // You can also use offsetHeight if needed
+      }
+    } else {
+      setHeight(0)
+    }
+  }, [showSystemMonitorPanel])
+
   return (
     <CenterPanelContainer>
       <div
@@ -193,9 +207,10 @@ const ThreadCenterPanel = () => {
         )}
         <div
           className={twMerge(
-            'flex h-full w-full flex-col justify-between',
-            showSystemMonitorPanel && 'h-[calc(100%-200px)]'
+            'flex h-full w-full flex-col justify-between'
+            // showSystemMonitorPanel && `h-[calc(100%-${height}px)]`
           )}
+          style={{ height: `calc(100% - ${height}px)` }}
         >
           {activeThread ? (
             <div className="flex h-full w-full overflow-x-hidden">