MD Settings: adjust dialog style and scroll border visual

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js

Index: ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
diff --git a/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js b/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
index 0e197fa099552776aee1e43f7e083202f6fc77ca..fcdde610a0cf242173987ce29d0010451f5eea26 100644
--- a/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
+++ b/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.js
@@ -66,10 +66,20 @@ Polymer({
     if (this.showScrollBorders) {
       var bodyContainer = this.$$('.body-container');
 
+      var bottomMarker = this.$.bodyBottomMarker;
+      var topMarker = this.$.bodyTopMarker;
+
       var callback = function(entries) {
-        assert(entries.length == 1);
-        bodyContainer.classList.toggle(
-            'bottom-scrollable', entries[0].intersectionRatio == 0);
+        for (var i = 0; i < entries.length; i++) {
+          var target = entries[i].target;
+          assert(target == bottomMarker || target == topMarker);
+
+          classToToggle =
+              target == bottomMarker ? 'bottom-scrollable' : 'top-scrollable';
+
+          bodyContainer.classList.toggle(
+              classToToggle, entries[i].intersectionRatio == 0);
+        }
       };
 
       this.intersectionObserver_ = new IntersectionObserver(
@@ -78,7 +88,8 @@ Polymer({
             root: bodyContainer,
             threshold: 0,
           }));
-      this.intersectionObserver_.observe(this.$.bodyBottomMarker);
+      this.intersectionObserver_.observe(bottomMarker);
+      this.intersectionObserver_.observe(topMarker);
     }
   },