diff --git a/ui (gen4)/features/keyboard.js b/ui (gen4)/features/keyboard.js
index fe72aec5..34a781f0 100755
--- a/ui (gen4)/features/keyboard.js	
+++ b/ui (gen4)/features/keyboard.js	
@@ -72,10 +72,8 @@ module.GLOBAL_KEYBOARD = {
 		],
 
 		'#1': 'fitScreen',
-		// XXX use a means to scale that does not get affected by image 
-		// 		proportions...
-		//'#2': 'fitNormal',
-		//'#3': 'fitSmall',
+		'#2': 'fitNormal',
+		'#3': 'fitSmall',
 
 		Esc: 'toggleSingleImage: "off" -- Exit single image view',
 
diff --git a/ui (gen4)/features/sort.js b/ui (gen4)/features/sort.js
index 532e7c2d..62eddfc3 100755
--- a/ui (gen4)/features/sort.js	
+++ b/ui (gen4)/features/sort.js	
@@ -22,6 +22,7 @@ var browse = require('lib/widget/browse')
 
 /*********************************************************************/
 
+// XXX add sorting on load....
 var SortActions = 
 module.SortActions = actions.Actions({
 	config: {
@@ -392,6 +393,9 @@ module.Sort = core.ImageGridFeatures.Feature({
 
 //---------------------------------------------------------------------
 
+// XXX add ability to partition ribbons in different modes...
+// 		- by hour/day/month/year in date modes...
+// 		- ???
 var SortUIActions = actions.Actions({
 	// XXX should we be able to edit modes??? 
 	sortDialog: ['Edit|Sort/Sort images...',
diff --git a/ui (gen4)/features/ui-single-image.js b/ui (gen4)/features/ui-single-image.js
index 3b14c102..94f20af2 100755
--- a/ui (gen4)/features/ui-single-image.js	
+++ b/ui (gen4)/features/ui-single-image.js	
@@ -95,7 +95,8 @@ function updateImageProportions(){
 	// outer diameter -- (m)ax
 	var dm = Math.max(h, w)
 	
-	var c = Math.min(this.screenwidth, this.screenheight)
+	//var c = Math.min(this.screenwidth, this.screenheight)
+	var c = this.screenfit 
 
 	// change proportions...
 	if(c < threshold){
@@ -196,10 +197,25 @@ function updateImageProportions(){
 
 var SingleImageActions = actions.Actions({
 	config: {
+		// View scale...
+		//
 		// NOTE: these will get overwritten if/when the user changes the scale...
 		'single-image-scale': null,
 		'ribbon-scale': null,
 
+		// Set scale 'units' for different viewes...
+		//
+		// NOTE: the units are actually properties used to get/set the values.
+		'single-image-scale-unit': 'screenwidth',
+		'ribbon-scale-unit': 'screenfit',
+
+		// The threshold from which the image block starts to tend to 
+		// screen proportions...
+		// 	- Above this the block is square.
+		// 	- At 1 the block is the same proportions as the screen.
+		// 	- between this and 1 the block is proportionally between a
+		// 		square and screen proportions.
+		//
 		// NOTE: setting this to null or to -1 will disable the feature...
 		'single-image-proportions-threshold': 2,
 
@@ -271,10 +287,12 @@ module.SingleImageView = core.ImageGridFeatures.Feature({
 				if(this.toggleSingleImage('?') == 'on'){
 					updateImageProportions.call(this)
 
-					this.config['single-image-scale'] = this.scale
+					this.config['single-image-scale'] = 
+						this[this.config['single-image-scale-unit']]
 
 				} else {
-					this.config['ribbon-scale'] = this.scale
+					this.config['ribbon-scale'] = 
+						this[this.config['ribbon-scale-unit']] 
 				}
 			}],
 		// update new images...
@@ -298,15 +316,17 @@ module.SingleImageView = core.ImageGridFeatures.Feature({
 
 					// singe image mode -- set image proportions...
 					if(state == 'on'){
-						updateImageProportions.call(this)
-
 						// update scale...
 						if(state != pre_state){
-							var s = this.scale
-							this.config['ribbon-scale'] = s
-							this.scale = this.config['single-image-scale'] || s
+							this.config['ribbon-scale'] = 
+								this[this.config['ribbon-scale-unit']] 
+							this[this.config['single-image-scale-unit']] =
+								this.config['single-image-scale']
+									|| this[this.config['single-image-scale-unit']]
 						}
 
+						updateImageProportions.call(this)
+
 					// ribbon mode -- restore original image size...
 					} else {
 						// reset image container size...
@@ -323,9 +343,11 @@ module.SingleImageView = core.ImageGridFeatures.Feature({
 
 						// update scale...
 						if(state != pre_state){
-							var s = this.scale
-							this.config['single-image-scale'] = s
-							this.scale = this.config['ribbon-scale'] || s
+							this.config['single-image-scale'] = 
+								this[this.config['single-image-scale-unit']]
+							this[this.config['ribbon-scale-unit']] =
+								this.config['ribbon-scale']
+									|| this[this.config['ribbon-scale-unit']] 
 						}
 					}
 				}
@@ -353,8 +375,10 @@ module.SingleImageViewLocalStorage = core.ImageGridFeatures.Feature({
 				// 		we need to save these for when it is, thus avoiding
 				// 		stray actions overwriting the config with defaults
 				// 		when not finding a value in the viewer...
-				var rscale = this.config['ribbon-scale'] || this.scale
-				var iscale = this.config['single-image-scale'] || this.scale
+				var rscale = this.config['ribbon-scale']
+					|| this[this.config['ribbon-scale-unit']] 
+				var iscale = this.config['single-image-scale']
+					|| this[this.config['single-image-scale-unit']]
 
 				return function(){
 					// prevent this from doing anything while no viewer...
diff --git a/ui (gen4)/features/ui.js b/ui (gen4)/features/ui.js
index 3e8cd9c8..f3a22d7b 100755
--- a/ui (gen4)/features/ui.js	
+++ b/ui (gen4)/features/ui.js	
@@ -206,9 +206,34 @@ module.ViewerActions = actions.Actions({
 		return this.ribbons != null ? this.ribbons.getScreenHeightRibbons() : null
 	},
 	set screenheight(n){
-		this.fitRibbon(n)
+		this.fitRibbon(n, false)
 	},
 
+	// this is the size in image radii on the narrow side of the screen...
+	get screenfit(){
+		if(!this.ribbons || !this.ribbons.viewer){
+			return null
+		}
+		var viewer = this.ribbons.viewer
+		var W = viewer.width()
+		var H = viewer.height()
+
+		return W < H ?
+			this.screenwidth
+			: this.screenheight
+	},
+	set screenfit(n){
+		var viewer = this.ribbons.viewer
+		var W = viewer.width()
+		var H = viewer.height()
+
+		if(W < H){
+			this.screenwidth = n
+
+		} else {
+			this.screenheight = n
+		}
+	},
 
 	load: [
 		function(data){
@@ -614,17 +639,17 @@ module.ViewerActions = actions.Actions({
 
 	// XXX make this viewer/image proportion independent....
 	fitSmall: ['Zoom/Show small image',
-		function(){ this.fitImage(5, 0) }],
+		function(){ this.screenfit = 4 }],
 	// XXX make this viewer/image proportion independent....
 	fitNormal: ['Zoom/Show normal image',
-		function(){ this.fitImage(1.5, 0) }],
+		function(){ this.screenfit = 1.2 }],
 	fitScreen: ['Zoom/Fit image to screen',
-		function(){ this.fitImage(1, 0) }],
+		function(){ this.screenfit = 1 }],
 
 
 	fitRibbon: ['Zoom/Fit ribbon vertically',
-		function(count){
-			this.ribbons.fitRibbon(count)
+		function(count, whole){
+			this.ribbons.fitRibbon(count, whole)
 			this.refresh()
 		}],