Merge pull request #248 from equinor/bug/track-content-width-sometime…

…s-does-not-fit-track-width

bug/Track content width sometimes does not fit track width

package.json

@@ -25,6 +25,7 @@
   ],
   "types": "dist/index.d.ts",
   "scripts": {
+    "start": "rollup -c -w",
     "prebuild": "rimraf dist",
     "build": "rollup -c",
     "prepub": "npm run build",

src/tracks/canvas-track.ts

@@ -28,15 +28,17 @@ export default class CanvasTrack<TOptions extends TrackOptions> extends Track<TO
       elm,
     } = this;
 
+    const boundingClient = elm.getBoundingClientRect();
+
     if (ctx) {
       const canvas = select(ctx.canvas);
       const props = {
         styles: {
-          width: `${elm.clientWidth}px`,
+          width: `${boundingClient.width}px`,
           height: `${elm.clientHeight}px`,
         },
         attrs: {
-          width: elm.clientWidth,
+          width: boundingClient.width,
           height: elm.clientHeight,
         },
       };

src/tracks/svg-track.ts

@@ -23,9 +23,12 @@ export default abstract class SvgTrack<TOptions extends TrackOptions> extends Tr
    */
   onUpdate(trackEvent: OnUpdateEvent) : void {
     super.onUpdate(trackEvent);
+
+    const boundingClient = this.elm.getBoundingClientRect();
+
     setStyles(this.plotGroup, {
       height: `${this.elm.clientHeight}px`,
-      width: `${this.elm.clientWidth}px`,
+      width: `${boundingClient.width}px`,
     });
   }
 }