🚧 Add transition when toggling panel transitions

This currently has two problems:

1. It does not allow dropdowns from within the options to render lower
   than the boundaries.
2. It transitions the height from viewport height to 0, however all the
   actual panel option divs are shorter than that. This means there is a
   delay before the transition makes a visible change, and the speed is
   much faster than if it went from panel option div's height to 0.

(2) is more of a nuisance and can be addressed by dynamically setting
the max-height based on the containing div's scrollHeight, however (1)
is the prevailing and blocking problem.

src/components/controls/panelSection.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useSelector } from "react-redux";
-import { PanelSectionContainer } from "./styles";
+import { PanelOptionsContainer, PanelSectionContainer } from "./styles";
 import { Title, Tooltip } from "./annotatedTitle";
 import { PanelHeader, PanelId } from "./panelHeader";
 import { RootState } from "../../store";
@@ -42,7 +42,9 @@ export const PanelSection = ({ panel, title, tooltip, options=undefined }: Props
         optionsAreVisible={optionsAreVisible}
         setOptionsAreVisible={setOptionsAreVisible}
       />
-      {optionsAreVisible && options}
+      <PanelOptionsContainer className={`${optionsAreVisible ? "open" : ""}`}>
+        {options}
+      </PanelOptionsContainer>
     </PanelSectionContainer>
   );
 };

src/components/controls/styles.js

@@ -48,6 +48,18 @@ export const PanelSectionContainer = styled.div`
   }
 `;
 
+export const PanelOptionsContainer = styled.div`
+  visibility: hidden;
+  transition: visibility .5s, max-height .5s;
+  max-height: 0;
+  overflow: hidden;
+
+  &.open {
+    visibility: visible;
+    max-height: 100vh;
+  }
+`
+
 export const TitleAndIconContainer = styled.span`
   display: inline-flex;
   align-items: center;