Dynamically calculate heights of panel option containers

nextstrain · Nov 15, 2023 · 1c26491 · 1c26491
1 parent 92d66ea
commit 1c26491
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/components/controls/panelSection.tsx b/src/components/controls/panelSection.tsx
@@ -31,6 +31,16 @@ export const PanelSection = ({ panel, title, tooltip, options=undefined }: Props
     setOptionsAreVisible(panelIsVisible)
   }, [panelIsVisible])
 
+  const [contentHeight, setContentHeight] = React.useState(1000);
+  const optionsContainer = React.useRef<HTMLDivElement>(null);
+
+  // FIXME: useLayoutEffect?
+  React.useEffect(() => {
+    if (optionsContainer.current) {
+      setContentHeight(optionsContainer.current.scrollHeight); // FIXME: offsetHeight?
+    }
+  }, [options]);
+
   return (
     <PanelSectionContainer>
       <PanelHeader
@@ -42,7 +52,7 @@ export const PanelSection = ({ panel, title, tooltip, options=undefined }: Props
         optionsAreVisible={optionsAreVisible}
         setOptionsAreVisible={setOptionsAreVisible}
       />
-      <PanelOptionsContainer className={`${optionsAreVisible ? "open" : ""}`}>
+      <PanelOptionsContainer ref={optionsContainer} className={`${optionsAreVisible ? "open" : ""}`} contentHeight={contentHeight}>
         {options}
       </PanelOptionsContainer>
     </PanelSectionContainer>

diff --git a/src/components/controls/styles.js b/src/components/controls/styles.js
@@ -56,7 +56,7 @@ export const PanelOptionsContainer = styled.div`
 
   &.open {
     visibility: visible;
-    max-height: 100vh;
+    max-height: ${({ contentHeight }) => `${contentHeight}px`};
   }
 `