Index: lams_central/web/includes/javascript/main.js
===================================================================
diff -u -r9c8c589b55a98647f0e497d63f302568382fd83b -rce46e7236188aeb13a7b1d70e5a9cb2b42b4d967
--- lams_central/web/includes/javascript/main.js	(.../main.js)	(revision 9c8c589b55a98647f0e497d63f302568382fd83b)
+++ lams_central/web/includes/javascript/main.js	(.../main.js)	(revision ce46e7236188aeb13a7b1d70e5a9cb2b42b4d967)
@@ -331,7 +331,7 @@
 			win = iframe.contentWindow || iframe.contentDocument;
 		if (win.resizeSequenceCanvas) {
 			var body = $(this).find('.modal-body');
-			win.resizeSequenceCanvas(body.height());
+			win.resizeSequenceCanvas(body.width(), body.height());
 		}
 	});
 }
Index: lams_monitoring/conf/language/lams/ApplicationResources.properties
===================================================================
diff -u -r642a841d321f273f2b6307ef9609b2860a048d29 -rce46e7236188aeb13a7b1d70e5a9cb2b42b4d967
--- lams_monitoring/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 642a841d321f273f2b6307ef9609b2860a048d29)
+++ lams_monitoring/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision ce46e7236188aeb13a7b1d70e5a9cb2b42b4d967)
@@ -496,3 +496,7 @@
 label.ira.tra.correct.count = correct answers iRAT & tRAT
 label.ira.tra.summary = Summary
 label.teams.setup = Setup teams
+button.canvas.fit.screen = Fit screen
+button.canvas.fit.screen.tooltip = Enlarge / shrink sequence image to fit monitoring window
+button.canvas.original.size = Original size
+button.canvas.original.size.tooltip = Show sequence image with original size
\ No newline at end of file
Index: lams_monitoring/web/css/_monitorLesson_base.scss
===================================================================
diff -u -r24e2a9d792df9de21a9037dfa557becab8ad348c -rce46e7236188aeb13a7b1d70e5a9cb2b42b4d967
--- lams_monitoring/web/css/_monitorLesson_base.scss	(.../_monitorLesson_base.scss)	(revision 24e2a9d792df9de21a9037dfa557becab8ad348c)
+++ lams_monitoring/web/css/_monitorLesson_base.scss	(.../_monitorLesson_base.scss)	(revision ce46e7236188aeb13a7b1d70e5a9cb2b42b4d967)
@@ -306,7 +306,6 @@
 /********** SEQUENCE TAB STYLES **********/
 div#sequenceCanvas {
   width: 100%;
-  overflow: auto;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -372,7 +371,7 @@
 
 div#sequenceCanvas svg.learningDesignSvg {
 	display: block;
-	overflow: hidden;
+	overflow: visible;
 }
 
 div#sequenceCanvas svg.learningDesignSvg g.gate svg {
Index: lams_monitoring/web/includes/javascript/monitorLesson.js
===================================================================
diff -u -r9c8c589b55a98647f0e497d63f302568382fd83b -rce46e7236188aeb13a7b1d70e5a9cb2b42b4d967
--- lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision 9c8c589b55a98647f0e497d63f302568382fd83b)
+++ lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision ce46e7236188aeb13a7b1d70e5a9cb2b42b4d967)
@@ -4,6 +4,8 @@
 // DIV container for lesson SVG
 // it gets accessed so many times it's worth to cache it here
 	sequenceCanvas = $('#sequenceCanvas'),
+// switch between SVG original size and fit-to-sreen (enlarge/shrink)
+	learningDesignSvgFitScreen = false,
 // info box show timeout
 	sequenceInfoTimeout = 8000,
 // which learner was selected in the search box
@@ -1148,6 +1150,8 @@
 	}).find('.modal-header').remove();
 	
 	$('#sequenceInfoDialog .modal-body').empty().append($('#sequenceInfoDialogContents').show());
+	
+	canvasFitScreen(learningDesignSvgFitScreen, true);
 }
 
 function showIntroductionDialog(lessonId) {
@@ -1180,6 +1184,8 @@
 		return;
 	}
 	sequenceRefreshInProgress = true;
+	
+	sequenceCanvas.css('visibility', 'hidden');
 
 	if (originalSequenceCanvas) {
 		// put bottom layer, LD SVG
@@ -1272,7 +1278,12 @@
 			
 			// modyfing SVG in DOM does not render changes, so we need to reload it
 			sequenceCanvas.html(sequenceCanvas.html());
+			// SVG needs resizing after reload
+			window.parent.resizeSequenceCanvas();
 			
+			// only now show SVG so there is no "jump" when resizing
+			sequenceCanvas.css('visibility', 'visible');
+			
 			if (sequenceSearchedLearner != null && !response.searchedLearnerFound) {
 				// the learner has not started the lesson yet, display an info box
 				sequenceClearSearchPhrase();
@@ -2117,15 +2128,47 @@
 /**
  * Adjusts sequence canvas (SVG) based on space available in the dialog.
  */
-function resizeSequenceCanvas(height){
+function resizeSequenceCanvas(width, height){
 	var svg = $('svg.learningDesignSvg', sequenceCanvas),
-		svgHeight = +svg.attr('height') + 10,
-		appliedHeight = Math.max(svgHeight, height - 140);
+		viewBoxParts = svg.attr('viewBox').split(' '),
+		svgHeight = +viewBoxParts[3],
+		sequenceCanvasHeight = learningDesignSvgFitScreen ? height - 140 : Math.max(svgHeight + 10, height - 140);
+	
+	// By default sequenceCanvas div is as high as SVG, but for SVG vertical centering
+	// we want it to be as large as available space (iframe height minus toolbars)
+	// or if SVG is higher, then as high as SVG
 	sequenceCanvas.css({
-		'height'  : appliedHeight + 'px'
+		'height'  : sequenceCanvasHeight + 'px'
 	});
+	
+	// if we want SVG to fit screen, then we make it as wide & high as sequenceCanvas div
+	// but no more than extra 30% because small SVGs look weird if they are too large
+	if (learningDesignSvgFitScreen) {
+		var svgWidth = +viewBoxParts[2],
+			sequenceCanvasWidth = sequenceCanvas.width();
+		svg.attr({
+			'preserveAspectRatio' : 'xMidYMid meet',
+			'width' : Math.min(svgWidth * 1.3, sequenceCanvasWidth - 10),
+			'height': Math.min(svgHeight * 1.3, sequenceCanvasHeight - 10)
+		})
+	}
 }
 
+function canvasFitScreen(fitScreen, skipResize) {
+	learningDesignSvgFitScreen = fitScreen;
+	if (!skipResize) {
+		updateSequenceTab();
+	}
+	
+	if (fitScreen) {
+		$('#canvasFitScreenButton').hide();
+		$('#canvasOriginalSizeButton').show();
+	} else {
+		$('#canvasFitScreenButton').show();
+		$('#canvasOriginalSizeButton').hide();
+	}
+}
+
 //********** LEARNERS TAB FUNCTIONS **********
 
 /**
Index: lams_monitoring/web/monitor.jsp
===================================================================
diff -u -r9c8c589b55a98647f0e497d63f302568382fd83b -rce46e7236188aeb13a7b1d70e5a9cb2b42b4d967
--- lams_monitoring/web/monitor.jsp	(.../monitor.jsp)	(revision 9c8c589b55a98647f0e497d63f302568382fd83b)
+++ lams_monitoring/web/monitor.jsp	(.../monitor.jsp)	(revision ce46e7236188aeb13a7b1d70e5a9cb2b42b4d967)
@@ -552,6 +552,14 @@
 						       href="#" onClick="javascript:openLiveEdit()">
 								<i class="fa fa-pencil"></i> <span class="hidden-xs"><fmt:message key='button.live.edit'/></span>
 							</a>
+							<a id="canvasFitScreenButton" class="btn btn-sm btn-default title="<fmt:message key='button.canvas.fit.screen.tooltip'/>"
+						       href="#" onClick="javascript:canvasFitScreen(true)">
+								<i class="fa fa-arrows-alt"></i> <span class="hidden-xs"><fmt:message key='button.canvas.fit.screen'/></span>
+							</a>
+							<a id="canvasOriginalSizeButton" class="btn btn-sm btn-default title="<fmt:message key='button.canvas.original.size.tooltip'/>"
+						       href="#" onClick="javascript:canvasFitScreen(false)">
+								<i class="fa fa-arrow-circle-o-up"></i> <span class="hidden-xs"><fmt:message key='button.canvas.original.size'/></span>
+							</a>
 							<span id="sequenceSearchPhraseClear"
 								 class="fa fa-xs fa-times-circle"
 								 onClick="javascript:sequenceClearSearchPhrase(true)"