Resize plans properly

e2e/tests/visual-a11y/planning.visual.spec.js

@@ -72,11 +72,29 @@ test.describe('Visual - Planning', () => {
       name: 'Plan Visual Test',
       json: examplePlanSmall2
     });
-
     await setBoundsToSpanAllActivities(page, examplePlanSmall2, plan.url);
     await percySnapshot(page, `Plan View (theme: ${theme})`);
   });
 
+  test('Resize Plan View @2p', async ({ browser, theme }) => {
+    // need to set viewport to null to allow for resizing
+    const newContext = await browser.newContext({
+      viewport: null
+    });
+    const newPage = await newContext.newPage();
+
+    await newPage.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+    const plan = await createPlanFromJSON(newPage, {
+      name: 'Plan Visual Test',
+      json: examplePlanSmall2
+    });
+
+    await setBoundsToSpanAllActivities(newPage, examplePlanSmall2, plan.url);
+    // resize the window
+    await newPage.setViewportSize({ width: 800, height: 600 });
+    await percySnapshot(newPage, `Plan View resized (theme: ${theme})`);
+  });
+
   test('Plan View w/ draft status', async ({ page, theme }) => {
     const plan = await createPlanFromJSON(page, {
       name: 'Plan Visual Test (Draft)',

src/ui/components/TimeSystemAxis.vue

@@ -77,12 +77,13 @@
   },
   setup() {
     const axisHolder = ref(null);
-    const { size, startObserving } = useResizeObserver();
+    const { size: containerSize, startObserving } = useResizeObserver();
     onMounted(() => {
       startObserving(axisHolder.value);
     });
     return {
-      containerSize: size
+      axisHolder,
+      containerSize
     };
   },
   watch: {
@@ -95,16 +96,19 @@
     contentHeight() {
       this.updateNowMarker();
     },
-    containerSize() {
-      this.resize();
+    containerSize: {
+      handler() {
+        this.resize();
+      },
+      deep: true
     }
   },
   mounted() {
     if (this.renderingEngine === 'svg') {
       this.useSVG = true;
     }
 
-    this.container = select(this.$refs.axisHolder);
+    this.container = select(this.axisHolder);
     this.svgElement = this.container.append('svg:svg');
     // draw x axis with labels. CSS is used to position them.
     this.axisElement = this.svgElement
@@ -122,7 +126,7 @@
   },
   methods: {
     resize() {
-      if (this.$refs.axisHolder.clientWidth !== this.width) {
+      if (this.axisHolder.clientWidth !== this.width) {
         this.setDimensions();
         this.drawAxis(this.bounds, this.timeSystem);
         this.updateNowMarker();
@@ -139,11 +143,10 @@
       }
     },
     setDimensions() {
-      const axisHolder = this.$refs.axisHolder;
-      this.width = axisHolder.clientWidth;
+      this.width = this.axisHolder.clientWidth;
       this.offsetWidth = this.width - this.offset;
 
-      this.height = Math.round(axisHolder.getBoundingClientRect().height);
+      this.height = Math.round(this.axisHolder.getBoundingClientRect().height);
 
       if (this.useSVG) {
         this.svgElement.attr('width', this.width);