Set tempvar preview list dimensions in fancy scrollbar instead of with css

ui/src/tempVars/components/TemplatePreviewList.tsx

@@ -8,7 +8,7 @@ import {TEMPLATE_PREVIEW_LIST_DIMENSIONS as DIMENSIONS} from 'src/tempVars/const
 
 import {TemplateValue} from 'src/types'
 
-const {RESULTS_TO_DISPLAY, LI_HEIGHT, LI_MARGIN_BOTTOM} = DIMENSIONS
+const {RESULTS_TO_DISPLAY, LI_HEIGHT, LI_MARGIN_BOTTOM, OFFSET} = DIMENSIONS
 
 interface Props {
   items: TemplateValue[]
@@ -21,11 +21,12 @@ class TemplatePreviewList extends PureComponent<Props> {
     const {items, onUpdateDefaultTemplateValue} = this.props
 
     return (
-      <div
-        className="temp-builder--results-list"
-        style={{height: `${this.resultsListHeight}px`}}
-      >
-        <FancyScrollbar autoHide={false}>
+      <div className="temp-builder--results-list">
+        <FancyScrollbar
+          autoHide={false}
+          autoHeight={true}
+          maxHeight={this.resultsListHeight}
+        >
           {items.map(item => (
             <TemplatePreviewListItem
               key={uuid.v4()}
@@ -42,7 +43,7 @@ class TemplatePreviewList extends PureComponent<Props> {
     const {items} = this.props
     const count = Math.min(items.length, RESULTS_TO_DISPLAY)
 
-    return count * (LI_HEIGHT + LI_MARGIN_BOTTOM)
+    return count * (LI_HEIGHT + LI_MARGIN_BOTTOM) - OFFSET
   }
 }
 

ui/src/tempVars/constants/index.ts

@@ -191,7 +191,8 @@ interface PreviewListDimensions {
 export const TEMPLATE_PREVIEW_LIST_DIMENSIONS: Readonly<
   PreviewListDimensions
 > = {
-  RESULTS_TO_DISPLAY: 10,
+  RESULTS_TO_DISPLAY: 9,
   LI_HEIGHT: 28,
   LI_MARGIN_BOTTOM: 2,
+  OFFSET: 14,
 }