Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Faisal Amir 2024-11-12 15:30:18 +07:00 committed by GitHub
parent 20c467e615
commit e87d25de85
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/containers/Layout/BottomPanel/SystemMonitor/index.tsx
View File

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

19
web/screens/Thread/ThreadCenterPanel/index.tsx
View File

@ -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">