Calc offset based on number of handles

ui/src/ifql/components/TimeMachine.tsx

@@ -78,6 +78,10 @@ class TimeMachine extends PureComponent<Props> {
         name: 'Explore',
         render: () => <SchemaExplorer />,
       },
+      {
+        name: 'Test',
+        render: () => <div>im a test</div>,
+      },
     ]
   }
 }

ui/src/shared/components/ResizeDivision.tsx

@@ -10,6 +10,7 @@ interface Props {
   name?: string
   minPixels: number
   size: number
+  offset: number
   activeHandleID: string
   draggable: boolean
   orientation: string
@@ -50,8 +51,10 @@ class Division extends PureComponent<Props> {
   }
 
   private get containerStyle() {
+    const {size, offset} = this.props
+
     return {
-      height: `calc((100% - 90px) * ${this.props.size} + 30px)`,
+      height: `calc((100% - ${offset}px) * ${size} + 30px)`,
     }
   }
 

ui/src/shared/components/Threesizer.tsx

@@ -5,7 +5,11 @@ import _ from 'lodash'
 
 import ResizeDivision from 'src/shared/components/ResizeDivision'
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import {HANDLE_HORIZONTAL, HANDLE_VERTICAL} from 'src/shared/constants/'
+import {
+  HANDLE_PIXELS,
+  HANDLE_HORIZONTAL,
+  HANDLE_VERTICAL,
+} from 'src/shared/constants/'
 
 const initialDragEvent = {
   percentX: 0,
@@ -115,6 +119,7 @@ class Threesizer extends Component<Props, State> {
             id={d.id}
             name={d.name}
             size={d.size}
+            offset={this.offset}
             draggable={i > 0}
             minPixels={d.minPixels}
             orientation={orientation}
@@ -128,6 +133,10 @@ class Threesizer extends Component<Props, State> {
     )
   }
 
+  private get offset(): number {
+    return HANDLE_PIXELS * this.state.divisions.length
+  }
+
   private get className(): string {
     const {orientation} = this.props
     const {activeHandleID} = this.state

ui/src/shared/constants/index.tsx

@@ -478,7 +478,9 @@ export const FIVE_SECONDS = 5000
 export const TEN_SECONDS = 10000
 export const INFINITE = -1
 
+// Resizer && Threesizer
 export const HUNDRED = 100
 export const REQUIRED_HALVES = 2
 export const HANDLE_VERTICAL = 'vertical'
 export const HANDLE_HORIZONTAL = 'horizontal'
+export const HANDLE_PIXELS = 30