Switch to flexbox

flamechart-minimap-view.tsx

@@ -1,5 +1,5 @@
 import * as regl from 'regl'
-import { vec3, ReglCommand, ReglCommandConstructor } from 'regl'
+import { vec3, ReglCommand } from 'regl'
 import { h, Component } from 'preact'
 import { css } from 'aphrodite'
 import { Flamechart } from './flamechart'
@@ -155,7 +155,7 @@ export class FlamechartMinimapView extends Component<FlamechartMinimapViewProps,
   render() {
     return (
       <div
-        className={css(style.minimap)} >
+        className={css(style.minimap, style.vbox)} >
         <canvas
           width={1} height={1}
           ref={this.canvasRef}

flamechart-style.ts

@@ -49,6 +49,11 @@ export const style = StyleSheet.create({
   clip: {
     overflow: 'hidden'
   },
+  vbox: {
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+  },
   fill: {
     width: '100%',
     height: '100%',
@@ -57,18 +62,10 @@ export const style = StyleSheet.create({
     top: 0
   },
   minimap: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
     height: Sizes.MINIMAP_HEIGHT,
-    width: '100%',
     borderBottom: `${Sizes.SEPARATOR_HEIGHT}px solid ${Colors.MEDIUM_GRAY}`
   },
   panZoomView: {
-    position: 'absolute',
-    left: 0,
-    top: Sizes.MINIMAP_HEIGHT + Sizes.SEPARATOR_HEIGHT,
-    width: '100%',
-    height: `calc(100% - ${Sizes.MINIMAP_HEIGHT + Sizes.SEPARATOR_HEIGHT}px)`,
+    flex: 1
   },
 });

flamechart-view.tsx

@@ -508,7 +508,7 @@ export class FlamechartPanZoomView extends ReloadableComponent<FlamechartPanZoom
   render() {
     return (
       <div
-        className={css(style.panZoomView)}
+        className={css(style.panZoomView, style.vbox)}
         onMouseDown={this.onMouseDown}
         onMouseMove={this.onMouseMove}
         onWheel={this.onWheel}>
@@ -617,7 +617,7 @@ export class FlamechartView extends ReloadableComponent<FlamechartViewProps, Fla
 
   render() {
     return (
-      <div className={css(style.fill, style.clip)} ref={this.containerRef}>
+      <div className={css(style.fill, style.clip, style.vbox)} ref={this.containerRef}>
         <FlamechartMinimapView
           configSpaceViewportRect={this.state.configSpaceViewportRect}
           flamechart={this.props.flamechart} />