put heatmap in container

h/css/app.scss

@@ -30,13 +30,15 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
 }
 
 .annotator-heatmap {
-  background: hsla(0, 0, 0, .1);
-  border: solid thin rgba($grayLighter, .4);
-  left: 17px;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  width: $heatmap-width;
+  svg {
+    background: hsla(0, 0, 0, .1);
+    border: solid thin rgba($grayLighter, .4);
+    left: 17px;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    width: $heatmap-width;
+  }
 }
 
 
@@ -49,7 +51,6 @@ svg { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
   -webkit-overflow-scrolling: touch;
   padding: 1em;
   position: absolute;
-
   height: 100%;
   width: 100%;
   

h/js/plugin/heatmap.coffee

@@ -5,22 +5,24 @@ class Annotator.Plugin.Heatmap extends Annotator.Plugin
 
   # heatmap svg skeleton
   html: """
-        <svg class="annotator-heatmap"
-             xmlns="http://www.w3.org/2000/svg"
-             version="1.1">
-           <defs>
-             <linearGradient id="heatmap-gradient" x2="0" y2="100%">
-             </linearGradient>
-             <filter id="heatmap-blur">
-               <feGaussianBlur stdDeviation="0 2"></feGaussianBlur>
-             </filter>
-           </defs>
-           <rect x="0" y="0" width="100%" height="100%"
-                 fill="url('#heatmap-gradient')"
-                 filter="url('#heatmap-blur')" >
-           </rect>
-         </svg>
-         """
+        <div class="annotator-heatmap">
+          <svg
+               xmlns="http://www.w3.org/2000/svg"
+               version="1.1">
+             <defs>
+               <linearGradient id="heatmap-gradient" x2="0" y2="100%">
+               </linearGradient>
+               <filter id="heatmap-blur">
+                 <feGaussianBlur stdDeviation="0 2"></feGaussianBlur>
+               </filter>
+             </defs>
+             <rect x="0" y="0" width="100%" height="100%"
+                   fill="url('#heatmap-gradient')"
+                   filter="url('#heatmap-blur')" >
+             </rect>
+           </svg>
+        </div>
+        """
 
   # buckets of annotations that overlap
   buckets: []