Ensure that ViewOptions are scrollable

ui/src/shared/components/TimeMachine.scss

@@ -49,7 +49,7 @@
   }
 }
 
-.time-machine-cusomization {
+.time-machine-customization {
   background-color: $g2-kevlar;
   height: 100%;
 

ui/src/shared/components/threesizer/Threesizer.scss

@@ -180,7 +180,8 @@ $threesizer-shadow-stop: fade-out($g0-obsidian, 1);
     height: 100%;
   }
   .threesizer--header+& {
-    flex: 1 0 0;
+    flex: 1 1 0;
+    overflow: hidden;
   }
 }
 

ui/src/shared/components/view_options/ViewOptions.tsx

@@ -9,6 +9,7 @@ import {setType} from 'src/shared/actions/v2/timeMachines'
 import ViewTypeSelector from 'src/shared/components/ViewTypeSelector'
 import Threesizer from 'src/shared/components/threesizer/Threesizer'
 import OptionsSwitcher from 'src/shared/components/view_options/OptionsSwitcher'
+import FancyScrollbar from 'src/shared/components/fancy_scrollbar/FancyScrollbar'
 
 // Utils
 import {getActiveTimeMachine} from 'src/shared/selectors/timeMachines'
@@ -43,17 +44,23 @@ class ViewOptions extends PureComponent<Props> {
         name: 'Visualization Type',
         headerButtons: [],
         render: () => (
-          <ViewTypeSelector
-            type={view.properties.type}
-            onUpdateType={onUpdateType}
-          />
+          <FancyScrollbar>
+            <ViewTypeSelector
+              type={view.properties.type}
+              onUpdateType={onUpdateType}
+            />
+          </FancyScrollbar>
         ),
         headerOrientation: HANDLE_VERTICAL,
       },
       {
         name: 'Customize',
         headerButtons: [],
-        render: () => <OptionsSwitcher view={view} />,
+        render: () => (
+          <FancyScrollbar>
+            <OptionsSwitcher view={view} />
+          </FancyScrollbar>
+        ),
         headerOrientation: HANDLE_VERTICAL,
       },
     ]