From 96cabeff982a9793cfa0a57c53a3fcb06aef8176 Mon Sep 17 00:00:00 2001
From: Evan Simkowitz <esimkowitz@users.noreply.github.com>
Date: Tue, 20 Feb 2024 12:23:39 -0800
Subject: [PATCH] Fix sidebar middle div max-height calculation (#299)

* Fix sidebar middle div max-height calculation

* remove logs

* update bottom div padding
---
 src/app/sidebar/sidebar.less |  4 ++--
 src/app/sidebar/sidebar.tsx  | 43 +++++++++++++++++++++++++++++++-----
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/app/sidebar/sidebar.less b/src/app/sidebar/sidebar.less
index 96e4e1803..d548bc447 100644
--- a/src/app/sidebar/sidebar.less
+++ b/src/app/sidebar/sidebar.less
@@ -119,7 +119,6 @@
     }
 
     .middle {
-        max-height: calc(100vh - 32em);
         padding: 4px 6px 8px 6px;
         border-bottom: 1px solid @base-border;
         .item {
@@ -142,9 +141,10 @@
 
     .bottom {
         position: absolute;
-        bottom: 2em;
+        bottom: 2rem;
         left: 0;
         width: 100%;
+        padding-top: 0.8rem;
     }
 
     .item {
diff --git a/src/app/sidebar/sidebar.tsx b/src/app/sidebar/sidebar.tsx
index fe0f67438..a518f3301 100644
--- a/src/app/sidebar/sidebar.tsx
+++ b/src/app/sidebar/sidebar.tsx
@@ -64,7 +64,7 @@ interface MainSideBarProps {
 
 @mobxReact.observer
 class MainSideBar extends React.Component<MainSideBarProps, {}> {
-    sidebarRef = React.createRef<HTMLDivElement>();
+    middleHeightSubtractor = mobx.observable.box(404);
 
     handleSessionClick(sessionId: string) {
         GlobalCommandRunner.switchSession(sessionId);
@@ -203,14 +203,37 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
         });
     }
 
+    /**
+     * Calculate the subtractor portion for the middle div's height calculation, which should be `100vh - subtractor`.
+     */
+    setMiddleHeightSubtractor() {
+        const windowHeight = window.innerHeight;
+        const bottomHeight = windowHeight - window.document.getElementById("sidebar-bottom")?.offsetTop;
+        const middleTop = document.getElementById("sidebar-middle")?.offsetTop;
+        const newMiddleHeightSubtractor = bottomHeight + middleTop;
+        if (!Number.isNaN(newMiddleHeightSubtractor)) {
+            mobx.action(() => {
+                this.middleHeightSubtractor.set(newMiddleHeightSubtractor);
+            })();
+        }
+    }
+
+    componentDidMount() {
+        this.setMiddleHeightSubtractor();
+    }
+
+    componentDidUpdate() {
+        this.setMiddleHeightSubtractor();
+    }
+
     render() {
-        let clientData = this.props.clientData;
+        const clientData = this.props.clientData;
         let needsUpdate = false;
         if (!clientData?.clientopts.noreleasecheck && !isBlank(clientData?.releaseinfo?.latestversion)) {
             needsUpdate = compareLoose(appconst.VERSION, clientData.releaseinfo.latestversion) < 0;
         }
-        let mainSidebar = GlobalModel.mainSidebarModel;
-        let isCollapsed = mainSidebar.getCollapsed();
+        const mainSidebar = GlobalModel.mainSidebarModel;
+        const isCollapsed = mainSidebar.getCollapsed();
         return (
             <ResizableSidebar
                 className="main-sidebar"
@@ -271,8 +294,16 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
                                     </CenteredIcon>,
                                 ]}
                             />
-                            <div className="middle hideScrollbarUntillHover">{this.getSessions()}</div>
-                            <div className="bottom">
+                            <div
+                                className="middle hideScrollbarUntillHover"
+                                id="sidebar-middle"
+                                style={{
+                                    maxHeight: `calc(100vh - ${this.middleHeightSubtractor.get()}px)`,
+                                }}
+                            >
+                                {this.getSessions()}
+                            </div>
+                            <div className="bottom" id="sidebar-bottom">
                                 <If condition={needsUpdate}>
                                     <SideBarItem
                                         key="update-available"