minimal POC of resizing width for a single swimlane label

src/ui/components/swim-lane/SwimLane.vue

@@ -25,6 +25,7 @@
     ref="swimLane"
     class="u-contents"
     :class="[{ 'c-swimlane': !isNested }, statusClass]"
+    :style="gridTemplateColumnStyle"
     @mouseover.ctrl="showToolTip"
     @mouseleave="hideToolTip"
   >
@@ -55,7 +56,9 @@
           @click="pressOnButton"
         />
       </div>
+      <div class="c-swimlane__handle" @mousedown="resizeStart"></div>
     </div>
+
     <div
       class="c-swimlane__lane-object"
       :style="{ 'min-height': minHeight }"
@@ -158,7 +161,8 @@ export default {
   },
   data() {
     return {
-      buttonPressed: false
+      buttonPressed: false,
+      labelWidth: 200
     };
   },
   computed: {
@@ -169,17 +173,25 @@ export default {
         return '';
       }
     },
-
     swimlaneClass() {
       if (!this.spanRowsCount && !this.isNested) {
         return 'c-swimlane__lane-label --span-cols';
       }
-
       return '';
     },
-
     statusClass() {
       return this.status ? `is-status--${this.status}` : '';
+    },
+    gridTemplateColumnStyle() {
+      if (this.isNested) {
+        return {};
+      }
+
+      const columnWidth = this.labelWidth / 2;
+
+      return {
+        'grid-template-columns': `${columnWidth}px ${columnWidth}px 1fr`
+      };
     }
   },
   methods: {
@@ -194,6 +206,31 @@ export default {
       } else {
         this.buttonClickOff();
       }
+    },
+    resizeStart(event) {
+      console.log(`resizingStart: ${this.resizeStartX}`);
+      this.resizeStartX = event.clientX;
+      this.resizeStartWidth = this.labelWidth;
+
+      document.addEventListener('mouseup', this.resizeEnd, {
+        once: true,
+        capture: true
+      });
+      document.addEventListener('mousemove', this.resize);
+      event.preventDefault();
+    },
+    resizeEnd(event) {
+      console.log('resizingEnd');
+      this.resizeStartX = undefined;
+      this.resizeStartWidth = undefined;
+      document.removeEventListener('mousemove', this.resize);
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    resize(event) {
+      console.log(`resizing: ${this.labelWidth}`);
+      let delta = event.clientX - this.resizeStartX;
+      this.labelWidth = this.resizeStartWidth + delta;
     }
   }
 };

src/ui/components/swim-lane/swimlane.scss

@@ -23,7 +23,7 @@
 .c-swimlane {
   display: grid;
   flex: 1 1 auto;
-  grid-template-columns: 100px 100px 1fr;
+  // grid-template-columns: 100px 100px 1fr;
   grid-template-rows: 1fr;
   grid-column-gap: 1px;
   grid-row-gap: 1px; // Used for grid within a swimlane for Plan views
@@ -47,6 +47,29 @@
     padding: $interiorMarginSm $interiorMargin;
   }
 
+  &__handle {
+    // In SwimLane.vue
+    @include abs();
+    display: none; // Set to display: block in .is-editing section below
+    left: auto;
+    // right: -1 * $tabularTdPadLR;
+    width: $splitterHandleD;
+    cursor: col-resize;
+
+    &:before {
+      // Extended hit area
+      top: 0;
+      right: $splitterHandleHitMargin * -1;
+      bottom: 0;
+      left: $splitterHandleHitMargin * -1;
+    }
+
+    &:hover {
+      background-color: $colorSplitterHover;
+      @include transition(background-color);
+    }
+  }
+
   &__lane-object {
     background: rgba(black, 0.1);
     height: 100%;
@@ -74,3 +97,9 @@
     display: contents;
   }
 }
+
+.is-editing {
+  .c-swimlane__handle {
+    display: block;
+  }
+}