Index: lams_central/web/includes/javascript/authoring/authoringActivity.js
===================================================================
diff -u -r9cdb52bc59fb1adb7c4c402831caf27236e1e2ea -r3766c345983c3eeb37befb5ee15e01cdcde9b160
--- lams_central/web/includes/javascript/authoring/authoringActivity.js	(.../authoringActivity.js)	(revision 9cdb52bc59fb1adb7c4c402831caf27236e1e2ea)
+++ lams_central/web/includes/javascript/authoring/authoringActivity.js	(.../authoringActivity.js)	(revision 3766c345983c3eeb37befb5ee15e01cdcde9b160)
@@ -500,11 +500,17 @@
 		});
 		
 		this.items = paper.g(shape, shapeBorder, label, icon);
+		this.items.attr({
+			'uiid'   : this.uiid,
+			'data-x' : x,
+			'data-y' : y,
+			'data-width' : width,
+			'data-height': height
+		});
+		
 		if (this.readOnly && !isReadOnlyMode) {
 			this.items.attr('filter', layout.conf.readOnlyFilter);
 		}
-		// uiid is needed in Monitoring
-		this.items.attr('uiid', this.uiid);
 		this.items.shape = shape;
 		
 		ActivityLib.activityHandlersInit(this);
@@ -677,7 +683,13 @@
 			this.items.attr('filter', layout.conf.readOnlyFilter);
 		}
 		// uiid is needed in Monitoring
-		this.items.attr('uiid', this.uiid);
+		this.items.attr({
+			'uiid'   : this.uiid,
+			'data-x' : x,
+			'data-y' : y,
+			'data-width' : width,
+			'data-height': height
+		});
         this.items.addClass('toolActivity');
 		this.items.shape = shape;
 		
@@ -1804,6 +1816,17 @@
 	},
 	
 	/**
+	 * Reduce length of activity's title so it fits in its SVG shape.
+	 */
+	shortenActivityTitle : function(title) {
+		if (title.length > 23) {
+			title = title.substring(0, 22) + '...';
+		}
+		return title;
+	},
+	
+	
+	/**
 	 * Crawles through branches setting their lengths and finding the longest one.
 	 */
 	updateBranchesLength : function(branchingActivity) {
@@ -1838,18 +1861,22 @@
 	
 	wrapActivityTitle : function(title, x, y) {
 		if (title.length < 15) {
-			return paper.text(x + 135, y + 45, title)
+			var label = paper.text(x + 135, y + 45, title)
 			 			 .attr(layout.activityTitleTextAttributes)
 			 			 .attr({
 			 				 'text-anchor' : 'middle'
 			 			 });
+			label.addClass('activityTitleLabel');
+			return label;
 		}
 		
 		const firstLine = paper.text(x + 75, y + 35, title.substring(0, 13))
 			 			 .attr(layout.activityTitleTextAttributes),
 			secondLine = paper.text(x + 75, y + 55, title.length > 24 ? title.substring(13, 24) + '...'  : title.substring(13, title.length))
-				 			 .attr(layout.activityTitleTextAttributes);
-				
-		return paper.g(firstLine, secondLine);
+				 			 .attr(layout.activityTitleTextAttributes),
+			labelGroup = paper.g(firstLine, secondLine);
+		
+		labelGroup.addClass('activityTitleLabel');
+		return labelGroup;
 	}
 }; 
Index: lams_monitoring/web/includes/javascript/monitorLesson.js
===================================================================
diff -u -r918a4d770ceef452f8dd7f2b91f3061ed83b5d7b -r3766c345983c3eeb37befb5ee15e01cdcde9b160
--- lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision 918a4d770ceef452f8dd7f2b91f3061ed83b5d7b)
+++ lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision 3766c345983c3eeb37befb5ee15e01cdcde9b160)
@@ -1225,7 +1225,6 @@
 						activityGroup.find('image').attr('xlink:href', gateClosedIcon).show();
 					}
 				}
-				
 				// are there any learners in this or any activity?
 				learnerCount += activity.learnerCount;
 				if (response.contributeActivities) {
@@ -1543,12 +1542,41 @@
 	}
 	
 	// add group of users icon
-	var appendTarget = $('svg', sequenceCanvas)[0],
+	var appendTarget = $('svg.learningDesignSvg', sequenceCanvas)[0],
+		isTool = activity.type == 1,
+		isGrouping = activity.type == 2,
 		// branching and gates require extra adjustments
 		isBranching =  [10,11,12,13].indexOf(activity.type) > -1,
 		isGate = [3,4,5,14].indexOf(activity.type) > -1;
 	
 	if (activity.learnerCount > 0){
+		
+		if (isTool || isGrouping) {
+			// if learners reached the activity, make room for their icons: make activity icon and label smaller and move to top
+			var activityGroup = $('g[id="' + activity.id + '"]', appendTarget);
+			// 
+			$('svg', activityGroup).attr({
+				'x'     : coord.x + 20,
+				'y'     : coord.y + 3,
+				'width' : '30px',
+				'height': '30px'
+			});
+			
+			$('.activityTitleLabel', activityGroup).remove();
+			$('<text>').text(activity.title.length < 20 ? activity.title : activity.title.substring(0, 20) + '...')
+					   .attr({
+							'x' : coord.x + 55,
+							'y' : coord.y + 20
+						})
+						.css({
+							'text-anchor' : 'start',
+							'font-size'   : '12px',
+							'font-family' : 'sans-serif'
+						})
+						.addClass('activityTitleLabel')
+						.appendTo(activityGroup);
+		}
+		
 		var	groupTitle = activity.learnerCount + ' ' + LABELS.LEARNER_GROUP_COUNT + ' ' + LABELS.LEARNER_GROUP_SHOW,
 			element = appendXMLElement('image', {
 			'id'         : 'act' + activity.id + 'learnerGroup',
@@ -1821,17 +1849,14 @@
 	if (group.length == 0) {
 		return;
 	}
-	var path = $('path', group).attr('d'),
-	// extract width and height from path M<x>,<y>h<width>v<height>... or M <x> <y> h <width> v <height>...
-		match = /M\s?(\d+)\s?,?\s?(\d+)\s?h\s?(\d+)\s?v\s?(\d+)/.exec(path);
-	if (match) {
-		return {
-			'x'    : +match[1],
-			'y'    : +match[2] + 1,
-			'x2'   : +match[1] + +match[3],
-			'y2'   : +match[2] + +match[4]
-		}
+	
+	return {
+		'x'    : +group.data('x'),
+		'y'    : +group.data('y'),
+		'x2'   : +group.data('x') + +group.data('width'),
+		'y2'   : +group.data('y') + +group.data('height')
 	}
+	
 }