From 126890ed8f9abc47e3058baafe9115d92b4faa6d Mon Sep 17 00:00:00 2001
From: cmhhelgeson <62450112+cmhhelgeson@users.noreply.github.com>
Date: Thu, 4 Jan 2024 12:27:09 -0800
Subject: [PATCH] Fixed bug where max-height was visibly changing on resize to
 greater than 768 pixels

---
 src/pages/_app.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index b6e3a1ad..fbb57f70 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -33,12 +33,15 @@ const MainLayout: React.FunctionComponent<AppProps> = ({
         prevWindowWidth.current = window.innerWidth;
         panelContentsRef.current.style.maxHeight =
           panelContentsRef.current.scrollHeight + 'px';
+        // Prevent visible height change on resize behind window.innerWidth > 768
+        panelContentsRef.current.style.transition = 'max-height 0s';
       }
       // Else when the window resizes to less than 768 pixels
       // and we haven't already gone under 768 pixels on the previous resize,
       // then set the height of panelContents to 0.
       if (window.innerWidth <= 768 && prevWindowWidth.current > 768) {
         panelContentsRef.current.style.maxHeight = '0px';
+        panelContentsRef.current.style.transition = 'max-height 0.3s ease-out';
       }
     };
     window.addEventListener('resize', resizeListener);