diff --git a/src/components/EdgeSlices.vue b/src/components/EdgeSlices.vue
index 3164cb21..18856a45 100644
--- a/src/components/EdgeSlices.vue
+++ b/src/components/EdgeSlices.vue
@@ -2,7 +2,7 @@
 import { select, selectAll } from 'd3-selection';
 import store from '@/store';
 import {
-  computed, defineComponent, ref,
+  computed, defineComponent, getCurrentInstance, ref,
 } from '@vue/composition-api';
 import { extent } from 'd3-array';
 import { formatLongDate, formatShortDate } from '@/lib/utils';
@@ -13,7 +13,8 @@ export default defineComponent({
   setup() {
     const slicedNetwork = computed(() => store.state.slicedNetwork);
     const isDate = computed(() => store.state.isDate);
-    const svgWidth = computed(() => parseFloat(select('svg#matrix').attr('width')));
+    const currentInstance = getCurrentInstance();
+    const svgWidth = computed(() => (currentInstance !== null ? currentInstance.proxy.$vuetify.breakpoint.width - store.state.controlsWidth : 0));
 
     const currentTime = computed(() => {
       const times: { timeRanges: {[key: number]: number[] | Date[]} ; current: number ; slices: number } = { timeRanges: {}, current: 0, slices: 0 };
diff --git a/src/store/index.ts b/src/store/index.ts
index 2ea29524..b7605b05 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -78,6 +78,7 @@ const {
     columnTypes: null,
     slicedNetwork: [],
     isDate: false,
+    controlsWidth: 256,
   } as State,
 
   getters: {
diff --git a/src/types.ts b/src/types.ts
index b6cbef2f..52b475f1 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -111,6 +111,7 @@ export interface State {
     left: number;
   };
   isDate: boolean;
+  controlsWidth: number;
 }
 
 export type ProvenanceEventTypes =