diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less
index a420554b..964c5840 100755
--- a/ui (gen4)/css/layout.less	
+++ b/ui (gen4)/css/layout.less	
@@ -424,12 +424,14 @@ stretching in width... */
 }
 */
 
+/* NOTE: this is essentially a ribbon... */
 .shadow {
 	position: absolute;
 	overflow: visible;
 
 	width: auto;
 	height: auto;
+	margin: 0px;
 
 	background: black;
 
diff --git a/ui (gen4)/index.html b/ui (gen4)/index.html
index ed6c71e9..b00439d2 100755
--- a/ui (gen4)/index.html	
+++ b/ui (gen4)/index.html	
@@ -30,6 +30,7 @@
 */
 
 .shadow {
+	margin: 0px;
 	z-index: 4000;
 }
 .ui-bounds-indicators {
diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js
index 94d3bfb5..b4e17913 100755
--- a/ui (gen4)/ribbons.js	
+++ b/ui (gen4)/ribbons.js	
@@ -375,6 +375,7 @@ module.RibbonsPrototype = {
 	// 		Example: several fast consecutive horizontal shifts will result
 	// 			in a single shadow "flowing" through the ribbon.
 	// NOTE: multiple shadows of different images are supported...
+	// NOTE: the .shadow element is essentially a ribbon.
 	//
 	// XXX should we also have a ribbon shadow???
 	makeShadow: function(target, animate, delay){
@@ -411,7 +412,7 @@ module.RibbonsPrototype = {
 			// ...we need to scale it to the current scale...
 			var shadow = setElementScale(
 				$('<div>')
-					.addClass('shadow')
+					.addClass('shadow ribbon')
 					.attr({
 						gid: gid,
 						ticket: ticket,
@@ -422,10 +423,13 @@ module.RibbonsPrototype = {
 							.clone()
 							.removeClass('current')
 							.attr('gid', null))
+					/*
 					.css({
-						width: img.width(),
-						height: img.height(),
-					}), s)
+						width: img.outerWidth(),
+						height: img.outerHeight(),
+					})
+					*/
+					, s)
 				// place it over the current image...
 				.css({
 					top: io.top - vo.top,
diff --git a/ui (gen4)/viewer.js b/ui (gen4)/viewer.js
index b41591f4..7a7bbccf 100755
--- a/ui (gen4)/viewer.js	
+++ b/ui (gen4)/viewer.js	
@@ -1092,15 +1092,15 @@ actions.Actions({
 // 		| | image	  |	|	- block close to viewer proportion
 // 		| |	   <-->	  |	|	- image block growing parallel to viewer
 // 		| |			  |	|	  longer side
-// 		| +-----------+	|
-// 		+---------------+
+// 		| +-----------+	|   - this stage is not affected specific by image
+// 		+---------------+	  proportions and can be done in bulk
 //
 //
 // C)
 // 		 viewer
 // 		+---------------+
 // 		| image			|	- image block same size as viewer
-// 		|				|
+// 		|				|	- need to account for chrome
 // 		|				|
 // 		|				|
 // 		|				|
@@ -1113,10 +1113,10 @@ actions.Actions({
 // 		.				.
 // 		+---------------+
 // 		| viewer		|	- image bigger than viewer in one dimension
-// 		|		^		|	- block grows along viewer short side, now
-// 		|		|		|	  closer to image proportions
-// 		|		v		|	- drag enabled
-// 		|				|
+// 		|		^		|	- block grows to fit image proportions
+// 		|		|		|	- need to account for individual image 
+// 		|		v		|	  proportions
+// 		|				|	- drag enabled
 // 		+---------------+
 // 		.				.
 // 		+ - - - - - - - +
@@ -1142,7 +1142,6 @@ module.SingleImageView = Feature({
 	tag: 'ui-single-image-view',
 
 	// XXX should this be an action???
-	// XXX
 	updateImageProportions: function(actions){
 		// XXX
 	},