fix: calculate base layout with system monitor panel (#3999)

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) => {

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',
+            'flex h-full w-full flex-col justify-between'
-            showSystemMonitorPanel && 'h-[calc(100%-200px)]'
+            // showSystemMonitorPanel && `h-[calc(100%-${height}px)]`
           )}
+          style={{ height: `calc(100% - ${height}px)` }}
         >
           {activeThread ? (
             <div className="flex h-full w-full overflow-x-hidden">