diff --git a/ui (gen4)/css/layout.less b/ui (gen4)/css/layout.less
index 3efc26e2..bcc4a54c 100755
--- a/ui (gen4)/css/layout.less	
+++ b/ui (gen4)/css/layout.less	
@@ -1114,6 +1114,9 @@ stretching in width... */
 .overlay-info:hover {
 	.user-select(auto);
 }
+.overlay-info .spacer {
+	opacity: 0.5,
+}
 .overlay-info .spacer~* {
 	float: right;
 }
@@ -1743,6 +1746,9 @@ progress:not(value)::-webkit-progress-bar {
 .light.viewer .progress-bar {
 	color: silver;
 }
+.light.viewer .overlay-info .spacer {
+	opacity: 0.6,
+}
 
 
 /*@import "theme-gray";*/
diff --git a/ui (gen4)/features/sort.js b/ui (gen4)/features/sort.js
index 62eddfc3..f31bbe5c 100755
--- a/ui (gen4)/features/sort.js	
+++ b/ui (gen4)/features/sort.js	
@@ -58,8 +58,11 @@ module.SortActions = actions.Actions({
 		// 		the previous methods in chain...
 		'sort-methods': {
 			'none': '',
+			// NOTE: for when date resolution is not good enough this 
+			// 		also takes into account file sequence number...
 			// NOTE: this is descending by default...
-			'Date': 'metadata.createDate birthtime keep-position reverse',
+			'Date': 'metadata.createDate birthtime name-sequence keep-position reverse',
+			'Date (simple)': 'metadata.createDate birthtime keep-position reverse',
 			'File date': 'birthtime keep-position reverse',
 			'Name (XP-style)': 'name-leading-sequence name path keep-position',
 			'File sequence number': 'name-sequence name path keep-position',
diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js
index 0f0be90d..565235d7 100755
--- a/ui (gen4)/features/ui-widgets.js	
+++ b/ui (gen4)/features/ui-widgets.js	
@@ -424,9 +424,22 @@ var DialogsActions = actions.Actions({
 	get uiElements(){ 
 		return this.actions.filter(this.isUIElement.bind(this)) },
 
-	// get top overlay and overlay client...
-	get overlay(){ 
-		return overlay.getOverlay(this.viewer) },
+	// Get modal container...
+	//
+	// Protocol:
+	// 	- get the last modal widgets (CSS selector: .modal-widget)
+	// 	- return one of the following:
+	// 		.data('widget-controller')
+	// 		element
+	// 		null
+	get modal(){
+		var modal = this.ribbons.viewer
+			.find('modal-widget')
+				.last()
+		return modal.data('widget-controller') 
+			|| (modal.length > 0 && modal) 
+			|| null
+	},
 
 	// testers...
 	isUIContainer: ['- Interface/',
@@ -452,26 +465,14 @@ var DialogsActions = actions.Actions({
 					o && o.focus()	
 				})
 		})],
-	// XXX should this be renamed to BottomDrawer???
+
 	Drawer: ['- Interface/',
 		makeDrawer('bottom')],
-	
-	// XXX not implemented yet...
-	TopDrawer: ['- Interface/',
-		makeDrawer('top')],
 	BottomDrawer: ['- Interface/',
 		makeDrawer('bottom')],
+	TopDrawer: ['- Interface/',
+		makeDrawer('top')],
 
-	RightDrawer: ['- Interface/',
-		makeUIContainer(function(dialog, options){
-			// XXX
-			console.error('Not yet implemented.')
-		})],
-	LeftDrawer: ['- Interface/',
-		makeUIContainer(function(dialog, options){
-			// XXX
-			console.error('Not yet implemented.')
-		})],
 
 	// like panel but drop down from mouse location or specified position
 	DropDown: ['- Interface/',
@@ -491,6 +492,7 @@ var DialogsActions = actions.Actions({
 			// XXX
 			//console.error('Not yet implemented.')
 
+			// minimal container...
 			var panel = {
 				client: dialog,
 				dom: $('<div>')
diff --git a/ui (gen4)/lib/widget/drawer.js b/ui (gen4)/lib/widget/drawer.js
index b688eb4b..37049b33 100755
--- a/ui (gen4)/lib/widget/drawer.js	
+++ b/ui (gen4)/lib/widget/drawer.js	
@@ -19,7 +19,7 @@ var DrawerClassPrototype = {
 	make: function(obj, client, options){
 		var that = this
 		var overlay = $('<div>')
-			.addClass('drawer-widget ' + (options.direction || 'bottom'))
+			.addClass('drawer-widget modal-widget' + (options.direction || 'bottom'))
 			.append($('<div>')
 				.addClass('content')
 				.click(function(){
@@ -41,6 +41,7 @@ var DrawerClassPrototype = {
 }
 
 
+// XXX add a non-modal version...
 var DrawerPrototype = {
 	dom: null,
 	client: null,
diff --git a/ui (gen4)/lib/widget/overlay.js b/ui (gen4)/lib/widget/overlay.js
index a261a687..708b7a9c 100755
--- a/ui (gen4)/lib/widget/overlay.js	
+++ b/ui (gen4)/lib/widget/overlay.js	
@@ -19,7 +19,7 @@ var OverlayClassPrototype = {
 	make: function(obj, client, options){
 		var that = this
 		var overlay = $('<div>')
-			.addClass('overlay-widget')
+			.addClass('overlay-widget modal-widget')
 			.on(options.nonPropagatedEvents.join(' '), function(){
 				event.stopPropagation()
 			})