--- a/light9/web/timeline/timeline-elements.html	Sun May 06 05:29:46 2018 +0000
+++ b/light9/web/timeline/timeline-elements.html	Sun May 06 22:41:36 2018 +0000
@@ -31,16 +31,19 @@
      }
      #coveredByDiagram {
          position: relative;
+         display: flex;
+         flex-direction: column;
+         height: 100%;
      }
      #dia, #adjusters, #cursorCanvas, #adjustersCanvas {
          position: absolute;
          left: 0; top: 0; right: 0; bottom: 0;
      }
      #debug {
-      background: white;
-      font-family: monospace;
-      font-size: 125%;
-      height: 15px;
+         background: white;
+         font-family: monospace;
+         font-size: 125%;
+         height: 15px;
      }
     </style>
     <div>
@@ -86,15 +89,18 @@
      :host {
          display: flex;
          height: 100%;
+         flex-direction: column;
      }
-     div {
-         display: flex;
-         flex-direction: column;
+     #top {
+     }
+     #rows {
          height: 100%;
      }
      #rows.dragging {
          background: rgba(126, 52, 245, 0.0784);
-         }
+     }
+     light9-timeline-time-axis {
+     }
      light9-timeline-audio {
          width: 100%;
          height: 100px;
@@ -111,9 +117,8 @@
                              show="{{show}}"
                              zoom="{{zoomFlattened}}">
       </light9-timeline-audio>
-      <div id="rows">
-      </div>
     </div>
+    <div id="rows"></div>
   </template>
 </dom-module>
 

--- a/light9/web/timeline/timeline.coffee	Sun May 06 05:29:46 2018 +0000
+++ b/light9/web/timeline/timeline.coffee	Sun May 06 22:41:36 2018 +0000
@@ -276,21 +276,28 @@
   @observers: [
     'onGraph(graph, dia, setAdjuster, song, zoomInX)'
   ]
+  @listeners: {'iron-resize': 'update'}
+  update: ->
+    @renderer.resize(@clientWidth, @clientHeight)
+    @renderer.render(@stage);
+
   onZoom: ->
     updateZoomFlattened = ->
       log('updateZoomFlattened')
       @zoomFlattened = ko.toJS(@zoom)
     ko.computed(updateZoomFlattened.bind(@))
+    
   connectedCallback: ->
      super.connectedCallback()
-     root = @closest('light9-timeline-editor')
-     stage = new PIXI.Container();
+
+     @stage = new PIXI.Container()
      
-     renderer = PIXI.autoDetectRenderer(300,200, {
+     @renderer = PIXI.autoDetectRenderer({
          backgroundColor: 0xff6060,
-     });
+        autoResize: true,
+     })
      
-     @$.rows.appendChild(renderer.view);
+     @$.rows.appendChild(@renderer.view);
      graphics = new PIXI.Graphics();
 
      graphics.beginFill(0xFF3300);
@@ -302,9 +309,11 @@
      graphics.lineTo(50, 50);
      graphics.endFill();
      
-     stage.addChild(graphics);
-     renderer.render(stage);
+     @stage.addChild(graphics);
+     @renderer.render(@stage);
 
+     # iron-resize should be doing this but it never fires
+     setInterval(@update.bind(@), 1000)
   onGraph: ->
     U = (x) => @graph.Uri(x)
     log('assign rows',@song)