diff --git a/ui (gen4)/css/widget/browse.css b/ui (gen4)/css/widget/browse.css
index a137ccd4..edd415d6 100755
--- a/ui (gen4)/css/widget/browse.css	
+++ b/ui (gen4)/css/widget/browse.css	
@@ -17,10 +17,14 @@
 }
 */
 .browse-widget .v-block {
+	position: relative;
+
 	width: 100%;
 	height: auto;
 
 	box-sizing: border-box;
+
+	overflow: hidden;
 }
 .browse-widget .v-block:not(:first-of-type) {
 	border-top: 1px solid rgba(255, 255, 255, 0.3);
@@ -41,6 +45,8 @@
 /************************************************************ Path ***/
 
 .browse-widget .path {
+	position: relative;
+
 	padding: 5px;
 	padding-left: 10px;
 	padding-right: 10px;
@@ -56,6 +62,29 @@
 	max-width: 80vh;
 	overflow: auto;
 }
+
+/* path scroll shadow... */
+.browse-widget .path:not(:hover).scrolling {
+	mix-blend-mode: overlay;
+}
+.browse-widget .path:not(:hover).scrolling:after {
+	position: fixed;
+	content: " ";
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+}
+.browse-widget .path:not(:hover).scrolling.left:not(.right):after {
+	background: linear-gradient(90deg, gray, transparent 15%);
+}
+.browse-widget .path:not(:hover).scrolling.right:not(.left):after {
+	background: linear-gradient(90deg, transparent 85%, gray);
+}
+.browse-widget .path:not(:hover).scrolling.left.right:after {
+	background: linear-gradient(90deg, gray, transparent 15%, transparent 85%, gray);
+}
+
 /* XXX not sure about this... */
 .browse-widget .path::-webkit-scrollbar {
 	width: 5px;
diff --git a/ui (gen4)/lib/widget/browse.js b/ui (gen4)/lib/widget/browse.js
index 3f0bb7b6..cf7e23e3 100755
--- a/ui (gen4)/lib/widget/browse.js	
+++ b/ui (gen4)/lib/widget/browse.js	
@@ -840,7 +840,29 @@ var BrowserPrototype = {
 		var l = browser.find('.list').empty()
 
 		// set the path prefix...
-		p.attr('prefix', this.options.pathPrefix)
+		p
+			.attr('prefix', this.options.pathPrefix)
+			.scroll(function(){
+				// handle path scroll..
+				if(p[0].offsetWidth < p[0].scrollWidth){
+					// scroll all the way to the right...
+					p.addClass('scrolling')
+
+					// left out of view...
+					p[0].scrollLeft > 0 ? 
+						p.addClass('left') 
+						: p.removeClass('left')
+
+					// right out of view...
+					p[0].scrollLeft + p[0].offsetWidth + 5 <= p[0].scrollWidth ? 
+						p.addClass('right') 
+						: p.removeClass('right')
+
+				// keep left aligned...
+				} else {
+					p.removeClass('scrolling')
+				}
+			})
 
 		var c = []
 		// fill the path field...
@@ -889,9 +911,8 @@ var BrowserPrototype = {
 
 
 		// handle path scroll..
-		var e = p.children().last()
 		// scroll to the end when wider than view...
-		if(e.length > 0 && p.width() < p[0].scrollWidth){
+		if(p[0].offsetWidth < p[0].scrollWidth){
 			// scroll all the way to the right...
 			p.scrollLeft(p[0].scrollWidth)
 
@@ -1653,6 +1674,17 @@ var BrowserPrototype = {
 
 			this.trigger('select', elem)
 
+			// handle path scroll -- scroll to the end when wider than view...
+			var p = browser.find('.path')
+			if(p[0].offsetWidth < p[0].scrollWidth){
+				// scroll all the way to the right...
+				p.scrollLeft(p[0].scrollWidth)
+
+			// keep left aligned...
+			} else {
+				p.scrollLeft(0)
+			}
+
 			return elem
 		}