From bcbb99a66e1750aed13e114342bbbdad8e49a62c Mon Sep 17 00:00:00 2001
From: Jamie Wong <jamie.lf.wong@gmail.com>
Date: Fri, 29 Dec 2017 20:44:40 -0500
Subject: [PATCH] Switch to flexbox

---
 flamechart-minimap-view.tsx |  4 ++--
 flamechart-style.ts         | 15 ++++++---------
 flamechart-view.tsx         |  4 ++--
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/flamechart-minimap-view.tsx b/flamechart-minimap-view.tsx
index 2d3bfed..71eb9c0 100644
--- a/flamechart-minimap-view.tsx
+++ b/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}
diff --git a/flamechart-style.ts b/flamechart-style.ts
index e75e7de..f162bb2 100644
--- a/flamechart-style.ts
+++ b/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
   },
 });
\ No newline at end of file
diff --git a/flamechart-view.tsx b/flamechart-view.tsx
index 07b3781..78dd2fa 100644
--- a/flamechart-view.tsx
+++ b/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} />