fix: alignment issue #88 #89

src/components/DiagramFrame/SeqDiagram/MessageLayer/MessageLayer.vue

@@ -56,11 +56,42 @@ onUpdated(() => {
     border-right-width: 7px;
   }
 
+  .occurrence .interaction.sync.self {
+    border-left-width: 7px;
+  }
+
+  .occurrence {
+    .interaction.sync.self {
+      border-left-width: 7px;
+    }
+    .interaction.async {
+      border-right-width: 0;
+    }
+  }
+
+  .occurrence {
+    .occurrence {
+      .interaction.sync.self {
+        border-left-width: 7px;
+      }
+      .interaction.async {
+        border-right-width: 7px;
+      }
+    }
+  }
+  .interaction.sync.self {
+    border-left-width: 0;
+  }
+
+  .interaction.async {
+    border-left-width: 8px;
+  }
+
   .interaction.sync.right-to-left {
     /* This border width configuration make sure the content width is
        the same as from the source occurrence's right border to target
        occurrence's left boarder (boarder not inclusive).*/
-    border-right-width: 0;
+    border-right-width: 7px;
     border-left-width: 7px;
   }