Closes #7936

- WIP prepping activities view for adjustable swimlane height.
- Refactored ActivityTimeline.vue to not draw SVG if no activities in timeframe.
- ActivityTimeline.vue `leftOffset` now uses absolute position `left` instead of `left-margin`.

src/plugins/plan/components/ActivityTimeline.vue

@@ -25,7 +25,8 @@
       {{ heading }}
     </template>
     <template #object>
-      <svg :height="height" :width="svgWidth" :style="alignmentStyle">
+      <div class="c-plan-av" :style="alignmentStyle">
+        <svg v-if="activities.length > 0" :height="height" :width="svgWidth">
           <symbol id="activity-bar-bg" :height="rowHeight" width="2" preserveAspectRatio="none">
             <rect x="0" y="0" width="100%" height="100%" fill="currentColor" />
             <line
@@ -78,15 +79,9 @@
               </text>
             </g>
           </template>
-        <text
-          v-if="activities.length === 0"
-          x="10"
-          y="20"
-          class="c-plan__activity-label--outside-rect"
-        >
-          No activities within current timeframe
-        </text>
         </svg>
+        <div v-else class="c-timeline__no-items">No activities within timeframe</div>
+      </div>
     </template>
   </SwimLane>
 </template>
@@ -166,7 +161,7 @@ export default {
         leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
       }
       return {
-        marginLeft: `${this.alignmentData.leftWidth + leftOffset}px`
+        left: `${this.alignmentData.leftWidth + leftOffset}px`
       };
     },
     svgWidth() {

src/plugins/plan/plan.scss

@@ -29,6 +29,11 @@
     }
   }
 
+  &-av {
+    // Activities view
+    @include abs();
+  }
+
   &__activity {
     cursor: pointer;