From 847ef4b63f9eb4581207ceb5e48e1ff141fa994a Mon Sep 17 00:00:00 2001
From: Ayumi Hamasaki <46076483+ayumihamasaki2@users.noreply.github.com>
Date: Sun, 22 Sep 2019 18:53:33 +0100
Subject: [PATCH 1/8] Fix CMS scrollbar issue

---
 modules/backend/assets/css/october.css              | 2 +-
 modules/backend/assets/less/controls/scrollbar.less | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css
index fb572f7c55..f168deb902 100644
--- a/modules/backend/assets/css/october.css
+++ b/modules/backend/assets/css/october.css
@@ -119,7 +119,7 @@
 .control-scrollbar >div {-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}
 .control-scrollbar >.scrollbar-scrollbar {position:absolute;z-index:100}
 .control-scrollbar >.scrollbar-scrollbar .scrollbar-track {background-color:transparent;position:relative;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
-.control-scrollbar >.scrollbar-scrollbar .scrollbar-track .scrollbar-thumb {background-color:rgba(0,0,0,0.35);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;overflow:hidden;position:absolute}
+.control-scrollbar >.scrollbar-scrollbar .scrollbar-track .scrollbar-thumb {background-color:rgba(0,0,0,0.35);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;overflow:hidden;position:sticky}
 .control-scrollbar >.scrollbar-scrollbar.disabled {display:none !important}
 .control-scrollbar.vertical >.scrollbar-scrollbar {right:0;margin-right:5px;width:6px}
 .control-scrollbar.vertical >.scrollbar-scrollbar .scrollbar-track {height:100%;width:6px}
diff --git a/modules/backend/assets/less/controls/scrollbar.less b/modules/backend/assets/less/controls/scrollbar.less
index 92f6bd4449..408e009226 100644
--- a/modules/backend/assets/less/controls/scrollbar.less
+++ b/modules/backend/assets/less/controls/scrollbar.less
@@ -31,7 +31,7 @@
                 .border-radius(5px);
                 cursor: pointer;
                 overflow: hidden;
-                position: absolute;
+                position: sticky;
             }
         }
 

From 9f4d06cdc50e68d17b0eb25d806cc8b5e01a9800 Mon Sep 17 00:00:00 2001
From: Ayumi Hamasaki <46076483+ayumihamasaki2@users.noreply.github.com>
Date: Sun, 22 Sep 2019 20:57:26 +0100
Subject: [PATCH 2/8] Fix the media manager issue

---
 .../widgets/mediamanager/assets/css/mediamanager.css |  3 ++-
 .../mediamanager/assets/less/mediamanager.less       | 12 ++++++++++++
 .../backend/widgets/mediamanager/partials/_body.htm  |  2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/modules/backend/widgets/mediamanager/assets/css/mediamanager.css b/modules/backend/widgets/mediamanager/assets/css/mediamanager.css
index 74e0a857ab..a88b97d49d 100644
--- a/modules/backend/widgets/mediamanager/assets/css/mediamanager.css
+++ b/modules/backend/widgets/mediamanager/assets/css/mediamanager.css
@@ -126,4 +126,5 @@ body:not(.no-select) div[data-control="media-manager"] .media-list li:hover h4 a
 @media (max-width:1280px) {div[data-control="media-manager"] .media-list.list li {width:230px }}
 @media (max-width:1024px) {div[data-control="media-manager"] .media-list.list li {display:block;width:auto }}
 @media (max-width:768px) {div[data-control="media-manager"] [data-control="preview-sidebar"],div[data-control="media-manager"] [data-command="toggle-sidebar"] {display:none !important }div[data-control="media-manager"] .media-list.list {padding:0 }div[data-control="media-manager"] .media-list.list li {-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin:0;border-right:none;border-left:none;border-bottom:none }}
-@media (max-width:480px) {div[data-control="media-manager"] [data-control="left-sidebar"] {display:none !important }}
\ No newline at end of file
+@media (max-width:480px) {div[data-control="media-manager"] [data-control="left-sidebar"] {display:none !important }}
+#right-sidebar-mediamanager.hide {display:table-cell !important;opacity:0;width:0 !important;overflow:hidden}
diff --git a/modules/backend/widgets/mediamanager/assets/less/mediamanager.less b/modules/backend/widgets/mediamanager/assets/less/mediamanager.less
index 9ff16d3939..69b9aa45f0 100644
--- a/modules/backend/widgets/mediamanager/assets/less/mediamanager.less
+++ b/modules/backend/widgets/mediamanager/assets/less/mediamanager.less
@@ -698,3 +698,15 @@ body:not(.no-select) {
         }
     }
 }
+
+//
+// Important - The right sidebar panel needs to be displayed and not hidden
+// for the scrollbar to work. In this case I have overwritten the hide class
+// for display:none and used opacity: 0 see github issue: https://github.com/octobercms/october/issues/4601
+//
+#right-sidebar-mediamanager.hide {
+	display: table-cell !important;
+	opacity: 0;
+	width: 0px !important;
+	overflow: hidden;
+}
\ No newline at end of file
diff --git a/modules/backend/widgets/mediamanager/partials/_body.htm b/modules/backend/widgets/mediamanager/partials/_body.htm
index fef45ae219..8363a8ae6e 100644
--- a/modules/backend/widgets/mediamanager/partials/_body.htm
+++ b/modules/backend/widgets/mediamanager/partials/_body.htm
@@ -46,7 +46,7 @@
                                             </div>
                                         </div>
 
-                                        <div class="layout-cell w-300 panel border-left no-padding <?= !$sidebarVisible ? 'hide' : null ?>" data-control="preview-sidebar">
+                                        <div id="right-sidebar-mediamanager" class="layout-cell w-300 panel border-left no-padding <?= !$sidebarVisible ? 'hide' : null ?>" data-control="preview-sidebar">
                                             <!-- Right sidebar -->
                                             <?= $this->makePartial('right-sidebar') ?>
                                         </div>

From 8872d04bbe8acf5b03506ffd42a1e8fc3569f605 Mon Sep 17 00:00:00 2001
From: Ayumi Hamasaki <46076483+ayumihamasaki2@users.noreply.github.com>
Date: Sun, 22 Sep 2019 20:59:35 +0100
Subject: [PATCH 3/8] future ref

---
 modules/backend/assets/less/controls/scrollbar.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/backend/assets/less/controls/scrollbar.less b/modules/backend/assets/less/controls/scrollbar.less
index 408e009226..1be4cfaac8 100644
--- a/modules/backend/assets/less/controls/scrollbar.less
+++ b/modules/backend/assets/less/controls/scrollbar.less
@@ -31,7 +31,7 @@
                 .border-radius(5px);
                 cursor: pointer;
                 overflow: hidden;
-                position: sticky;
+                position: sticky; /* important use sticky - see github issue: https://github.com/octobercms/october/issues/4621 */
             }
         }
 

From 0abc0a3558da8bff19b63b5ac31f04fd28148182 Mon Sep 17 00:00:00 2001
From: Ayumi Hamasaki <46076483+ayumihamasaki2@users.noreply.github.com>
Date: Sun, 22 Sep 2019 21:12:30 +0100
Subject: [PATCH 4/8] Update mediamanager.css

---
 .../backend/widgets/mediamanager/assets/css/mediamanager.css    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/backend/widgets/mediamanager/assets/css/mediamanager.css b/modules/backend/widgets/mediamanager/assets/css/mediamanager.css
index a88b97d49d..d38c9b3a2a 100644
--- a/modules/backend/widgets/mediamanager/assets/css/mediamanager.css
+++ b/modules/backend/widgets/mediamanager/assets/css/mediamanager.css
@@ -127,4 +127,4 @@ body:not(.no-select) div[data-control="media-manager"] .media-list li:hover h4 a
 @media (max-width:1024px) {div[data-control="media-manager"] .media-list.list li {display:block;width:auto }}
 @media (max-width:768px) {div[data-control="media-manager"] [data-control="preview-sidebar"],div[data-control="media-manager"] [data-command="toggle-sidebar"] {display:none !important }div[data-control="media-manager"] .media-list.list {padding:0 }div[data-control="media-manager"] .media-list.list li {-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin:0;border-right:none;border-left:none;border-bottom:none }}
 @media (max-width:480px) {div[data-control="media-manager"] [data-control="left-sidebar"] {display:none !important }}
-#right-sidebar-mediamanager.hide {display:table-cell !important;opacity:0;width:0 !important;overflow:hidden}
+#right-sidebar-mediamanager.hide {display:table-cell !important;opacity:0;width:0px !important;overflow:hidden}

From a8be695a70d66fb75cd0545dd1171f37a2d5a416 Mon Sep 17 00:00:00 2001
From: Ayumi Hamasaki <46076483+ayumihamasaki2@users.noreply.github.com>
Date: Mon, 23 Sep 2019 11:31:08 +0100
Subject: [PATCH 5/8] Added position sticky polyfill for IE11 support

---
 modules/backend/assets/js/october-min.js             | 2 +-
 modules/backend/assets/js/october.js                 | 1 +
 modules/backend/assets/js/october.sticky-polyfill.js | 7 +++++++
 3 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 modules/backend/assets/js/october.sticky-polyfill.js

diff --git a/modules/backend/assets/js/october-min.js b/modules/backend/assets/js/october-min.js
index e053435ccc..490248bde7 100644
--- a/modules/backend/assets/js/october-min.js
+++ b/modules/backend/assets/js/october-min.js
@@ -1262,7 +1262,7 @@ return result?result:items}
 $.fn.dateTimeConverter.Constructor=DateTimeConverter
 $.fn.dateTimeConverter.noConflict=function(){$.fn.dateTimeConverter=old
 return this}
-$(document).render(function(){$('time[data-datetime-control]').dateTimeConverter()})}(window.jQuery);$.ajaxPrefilter(function(options){var token=$('meta[name="csrf-token"]').attr('content')
+$(document).render(function(){$('time[data-datetime-control]').dateTimeConverter()})}(window.jQuery);!function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function d(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c])}function e(a){return parseFloat(a)||0}function f(a){for(var b=0;a;)b+=a.offsetTop,a=a.offsetParent;return b}function g(){function c(){a.pageXOffset!=m.left?(m.top=a.pageYOffset,m.left=a.pageXOffset,p.refreshAll()):a.pageYOffset!=m.top&&(m.top=a.pageYOffset,m.left=a.pageXOffset,n.forEach(function(a){return a._recalcPosition()}))}function d(){f=setInterval(function(){n.forEach(function(a){return a._fastCheck()})},500)}function e(){clearInterval(f)}if(!k){k=!0,c(),a.addEventListener("scroll",c),a.addEventListener("resize",p.refreshAll),a.addEventListener("orientationchange",p.refreshAll);var f=void 0,g=void 0,h=void 0;"hidden"in b?(g="hidden",h="visibilitychange"):"webkitHidden"in b&&(g="webkitHidden",h="webkitvisibilitychange"),h?(b[g]||d(),b.addEventListener(h,function(){b[g]?e():d()})):d()}}var h=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),i=!1,j="undefined"!=typeof a;j&&a.getComputedStyle?!function(){var a=b.createElement("div");["","-webkit-","-moz-","-ms-"].some(function(b){try{a.style.position=b+"sticky"}catch(a){}return""!=a.style.position})&&(i=!0)}():i=!0;var k=!1,l="undefined"!=typeof ShadowRoot,m={top:null,left:null},n=[],o=function(){function g(a){if(c(this,g),!(a instanceof HTMLElement))throw new Error("First argument must be HTMLElement");if(n.some(function(b){return b._node===a}))throw new Error("Stickyfill is already applied to this node");this._node=a,this._stickyMode=null,this._active=!1,n.push(this),this.refresh()}return h(g,[{key:"refresh",value:function(){if(!i&&!this._removed){this._active&&this._deactivate();var c=this._node,g=getComputedStyle(c),h={position:g.position,top:g.top,display:g.display,marginTop:g.marginTop,marginBottom:g.marginBottom,marginLeft:g.marginLeft,marginRight:g.marginRight,cssFloat:g.cssFloat};if(!isNaN(parseFloat(h.top))&&"table-cell"!=h.display&&"none"!=h.display){this._active=!0;var j=c.style.position;"sticky"!=g.position&&"-webkit-sticky"!=g.position||(c.style.position="static");var k=c.parentNode,m=l&&k instanceof ShadowRoot?k.host:k,n=c.getBoundingClientRect(),o=m.getBoundingClientRect(),p=getComputedStyle(m);this._parent={node:m,styles:{position:m.style.position},offsetHeight:m.offsetHeight},this._offsetToWindow={left:n.left,right:b.documentElement.clientWidth-n.right},this._offsetToParent={top:n.top-o.top-e(p.borderTopWidth),left:n.left-o.left-e(p.borderLeftWidth),right:-n.right+o.right-e(p.borderRightWidth)},this._styles={position:j,top:c.style.top,bottom:c.style.bottom,left:c.style.left,right:c.style.right,width:c.style.width,marginTop:c.style.marginTop,marginLeft:c.style.marginLeft,marginRight:c.style.marginRight};var q=e(h.top);this._limits={start:n.top+a.pageYOffset-q,end:o.top+a.pageYOffset+m.offsetHeight-e(p.borderBottomWidth)-c.offsetHeight-q-e(h.marginBottom)};var r=p.position;"absolute"!=r&&"relative"!=r&&(m.style.position="relative"),this._recalcPosition();var s=this._clone={};s.node=b.createElement("div"),d(s.node.style,{width:n.right-n.left+"px",height:n.bottom-n.top+"px",marginTop:h.marginTop,marginBottom:h.marginBottom,marginLeft:h.marginLeft,marginRight:h.marginRight,cssFloat:h.cssFloat,padding:0,border:0,borderSpacing:0,fontSize:"1em",position:"static"}),k.insertBefore(s.node,c),s.docOffsetTop=f(s.node)}}}},{key:"_recalcPosition",value:function(){if(this._active&&!this._removed){var a=m.top<=this._limits.start?"start":m.top>=this._limits.end?"end":"middle";if(this._stickyMode!=a){switch(a){case"start":d(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:this._offsetToParent.top+"px",bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"middle":d(this._node.style,{position:"fixed",left:this._offsetToWindow.left+"px",right:this._offsetToWindow.right+"px",top:this._styles.top,bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"end":d(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:"auto",bottom:0,width:"auto",marginLeft:0,marginRight:0})}this._stickyMode=a}}}},{key:"_fastCheck",value:function(){this._active&&!this._removed&&(Math.abs(f(this._clone.node)-this._clone.docOffsetTop)>1||Math.abs(this._parent.node.offsetHeight-this._parent.offsetHeight)>1)&&this.refresh()}},{key:"_deactivate",value:function(){var a=this;this._active&&!this._removed&&(this._clone.node.parentNode.removeChild(this._clone.node),delete this._clone,d(this._node.style,this._styles),delete this._styles,n.some(function(b){return b!==a&&b._parent&&b._parent.node===a._parent.node})||d(this._parent.node.style,this._parent.styles),delete this._parent,this._stickyMode=null,this._active=!1,delete this._offsetToWindow,delete this._offsetToParent,delete this._limits)}},{key:"remove",value:function(){var a=this;this._deactivate(),n.some(function(b,c){if(b._node===a._node)return n.splice(c,1),!0}),this._removed=!0}}]),g}(),p={stickies:n,Sticky:o,forceSticky:function(){i=!1,g(),this.refreshAll()},addOne:function(a){if(!(a instanceof HTMLElement)){if(!a.length||!a[0])return;a=a[0]}for(var b=0;b<n.length;b++)if(n[b]._node===a)return n[b];return new o(a)},add:function(a){if(a instanceof HTMLElement&&(a=[a]),a.length){for(var b=[],c=function(c){var d=a[c];return d instanceof HTMLElement?n.some(function(a){if(a._node===d)return b.push(a),!0})?"continue":void b.push(new o(d)):(b.push(void 0),"continue")},d=0;d<a.length;d++){c(d)}return b}},refreshAll:function(){n.forEach(function(a){return a.refresh()})},removeOne:function(a){if(!(a instanceof HTMLElement)){if(!a.length||!a[0])return;a=a[0]}n.some(function(b){if(b._node===a)return b.remove(),!0})},remove:function(a){if(a instanceof HTMLElement&&(a=[a]),a.length)for(var b=function(b){var c=a[b];n.some(function(a){if(a._node===c)return a.remove(),!0})},c=0;c<a.length;c++)b(c)},removeAll:function(){for(;n.length;)n[0].remove()}};i||g(),"undefined"!=typeof module&&module.exports?module.exports=p:j&&(a.Stickyfill=p)}(window,document);$.ajaxPrefilter(function(options){var token=$('meta[name="csrf-token"]').attr('content')
 if(token){if(!options.headers)options.headers={}
 options.headers['X-CSRF-TOKEN']=token}})
 if($.oc===undefined)
diff --git a/modules/backend/assets/js/october.js b/modules/backend/assets/js/october.js
index 17fd9d38de..4d0350b105 100644
--- a/modules/backend/assets/js/october.js
+++ b/modules/backend/assets/js/october.js
@@ -31,6 +31,7 @@
 =require october.treelist.js
 =require october.sidenav-tree.js
 =require october.datetime.js
+=require october.sticky-polyfill.js
 
 =require backend.js
 */
diff --git a/modules/backend/assets/js/october.sticky-polyfill.js b/modules/backend/assets/js/october.sticky-polyfill.js
new file mode 100644
index 0000000000..c988946fd8
--- /dev/null
+++ b/modules/backend/assets/js/october.sticky-polyfill.js
@@ -0,0 +1,7 @@
+/*!
+  * Stickyfill – `position: sticky` polyfill
+  * v. 2.1.0 | https://github.com/wilddeer/stickyfill
+  * This is the ES5 version and allows support for IE9 - IE11
+  * MIT License
+  */
+!function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function d(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c])}function e(a){return parseFloat(a)||0}function f(a){for(var b=0;a;)b+=a.offsetTop,a=a.offsetParent;return b}function g(){function c(){a.pageXOffset!=m.left?(m.top=a.pageYOffset,m.left=a.pageXOffset,p.refreshAll()):a.pageYOffset!=m.top&&(m.top=a.pageYOffset,m.left=a.pageXOffset,n.forEach(function(a){return a._recalcPosition()}))}function d(){f=setInterval(function(){n.forEach(function(a){return a._fastCheck()})},500)}function e(){clearInterval(f)}if(!k){k=!0,c(),a.addEventListener("scroll",c),a.addEventListener("resize",p.refreshAll),a.addEventListener("orientationchange",p.refreshAll);var f=void 0,g=void 0,h=void 0;"hidden"in b?(g="hidden",h="visibilitychange"):"webkitHidden"in b&&(g="webkitHidden",h="webkitvisibilitychange"),h?(b[g]||d(),b.addEventListener(h,function(){b[g]?e():d()})):d()}}var h=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),i=!1,j="undefined"!=typeof a;j&&a.getComputedStyle?!function(){var a=b.createElement("div");["","-webkit-","-moz-","-ms-"].some(function(b){try{a.style.position=b+"sticky"}catch(a){}return""!=a.style.position})&&(i=!0)}():i=!0;var k=!1,l="undefined"!=typeof ShadowRoot,m={top:null,left:null},n=[],o=function(){function g(a){if(c(this,g),!(a instanceof HTMLElement))throw new Error("First argument must be HTMLElement");if(n.some(function(b){return b._node===a}))throw new Error("Stickyfill is already applied to this node");this._node=a,this._stickyMode=null,this._active=!1,n.push(this),this.refresh()}return h(g,[{key:"refresh",value:function(){if(!i&&!this._removed){this._active&&this._deactivate();var c=this._node,g=getComputedStyle(c),h={position:g.position,top:g.top,display:g.display,marginTop:g.marginTop,marginBottom:g.marginBottom,marginLeft:g.marginLeft,marginRight:g.marginRight,cssFloat:g.cssFloat};if(!isNaN(parseFloat(h.top))&&"table-cell"!=h.display&&"none"!=h.display){this._active=!0;var j=c.style.position;"sticky"!=g.position&&"-webkit-sticky"!=g.position||(c.style.position="static");var k=c.parentNode,m=l&&k instanceof ShadowRoot?k.host:k,n=c.getBoundingClientRect(),o=m.getBoundingClientRect(),p=getComputedStyle(m);this._parent={node:m,styles:{position:m.style.position},offsetHeight:m.offsetHeight},this._offsetToWindow={left:n.left,right:b.documentElement.clientWidth-n.right},this._offsetToParent={top:n.top-o.top-e(p.borderTopWidth),left:n.left-o.left-e(p.borderLeftWidth),right:-n.right+o.right-e(p.borderRightWidth)},this._styles={position:j,top:c.style.top,bottom:c.style.bottom,left:c.style.left,right:c.style.right,width:c.style.width,marginTop:c.style.marginTop,marginLeft:c.style.marginLeft,marginRight:c.style.marginRight};var q=e(h.top);this._limits={start:n.top+a.pageYOffset-q,end:o.top+a.pageYOffset+m.offsetHeight-e(p.borderBottomWidth)-c.offsetHeight-q-e(h.marginBottom)};var r=p.position;"absolute"!=r&&"relative"!=r&&(m.style.position="relative"),this._recalcPosition();var s=this._clone={};s.node=b.createElement("div"),d(s.node.style,{width:n.right-n.left+"px",height:n.bottom-n.top+"px",marginTop:h.marginTop,marginBottom:h.marginBottom,marginLeft:h.marginLeft,marginRight:h.marginRight,cssFloat:h.cssFloat,padding:0,border:0,borderSpacing:0,fontSize:"1em",position:"static"}),k.insertBefore(s.node,c),s.docOffsetTop=f(s.node)}}}},{key:"_recalcPosition",value:function(){if(this._active&&!this._removed){var a=m.top<=this._limits.start?"start":m.top>=this._limits.end?"end":"middle";if(this._stickyMode!=a){switch(a){case"start":d(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:this._offsetToParent.top+"px",bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"middle":d(this._node.style,{position:"fixed",left:this._offsetToWindow.left+"px",right:this._offsetToWindow.right+"px",top:this._styles.top,bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"end":d(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:"auto",bottom:0,width:"auto",marginLeft:0,marginRight:0})}this._stickyMode=a}}}},{key:"_fastCheck",value:function(){this._active&&!this._removed&&(Math.abs(f(this._clone.node)-this._clone.docOffsetTop)>1||Math.abs(this._parent.node.offsetHeight-this._parent.offsetHeight)>1)&&this.refresh()}},{key:"_deactivate",value:function(){var a=this;this._active&&!this._removed&&(this._clone.node.parentNode.removeChild(this._clone.node),delete this._clone,d(this._node.style,this._styles),delete this._styles,n.some(function(b){return b!==a&&b._parent&&b._parent.node===a._parent.node})||d(this._parent.node.style,this._parent.styles),delete this._parent,this._stickyMode=null,this._active=!1,delete this._offsetToWindow,delete this._offsetToParent,delete this._limits)}},{key:"remove",value:function(){var a=this;this._deactivate(),n.some(function(b,c){if(b._node===a._node)return n.splice(c,1),!0}),this._removed=!0}}]),g}(),p={stickies:n,Sticky:o,forceSticky:function(){i=!1,g(),this.refreshAll()},addOne:function(a){if(!(a instanceof HTMLElement)){if(!a.length||!a[0])return;a=a[0]}for(var b=0;b<n.length;b++)if(n[b]._node===a)return n[b];return new o(a)},add:function(a){if(a instanceof HTMLElement&&(a=[a]),a.length){for(var b=[],c=function(c){var d=a[c];return d instanceof HTMLElement?n.some(function(a){if(a._node===d)return b.push(a),!0})?"continue":void b.push(new o(d)):(b.push(void 0),"continue")},d=0;d<a.length;d++){c(d)}return b}},refreshAll:function(){n.forEach(function(a){return a.refresh()})},removeOne:function(a){if(!(a instanceof HTMLElement)){if(!a.length||!a[0])return;a=a[0]}n.some(function(b){if(b._node===a)return b.remove(),!0})},remove:function(a){if(a instanceof HTMLElement&&(a=[a]),a.length)for(var b=function(b){var c=a[b];n.some(function(a){if(a._node===c)return a.remove(),!0})},c=0;c<a.length;c++)b(c)},removeAll:function(){for(;n.length;)n[0].remove()}};i||g(),"undefined"!=typeof module&&module.exports?module.exports=p:j&&(a.Stickyfill=p)}(window,document);
\ No newline at end of file

From 2ea424c7f59c06c3dd52d9ea757c4bdb61002181 Mon Sep 17 00:00:00 2001
From: Ayumi Hamasaki <46076483+ayumihamasaki2@users.noreply.github.com>
Date: Mon, 23 Sep 2019 11:37:13 +0100
Subject: [PATCH 6/8] Little tidy up

---
 modules/backend/assets/less/controls/scrollbar.less | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/modules/backend/assets/less/controls/scrollbar.less b/modules/backend/assets/less/controls/scrollbar.less
index 1be4cfaac8..db6dd95245 100644
--- a/modules/backend/assets/less/controls/scrollbar.less
+++ b/modules/backend/assets/less/controls/scrollbar.less
@@ -31,7 +31,8 @@
                 .border-radius(5px);
                 cursor: pointer;
                 overflow: hidden;
-                position: sticky; /* important use sticky - see github issue: https://github.com/octobercms/october/issues/4621 */
+                /* Important use position: sticky - see github issue: https://github.com/octobercms/october/issues/4621 */
+                position: sticky;
             }
         }
 

From e72d40db817a225e9d374d618ec188e63c8c12a3 Mon Sep 17 00:00:00 2001
From: Ayumi Hamasaki <46076483+ayumihamasaki2@users.noreply.github.com>
Date: Tue, 24 Sep 2019 13:39:24 +0100
Subject: [PATCH 7/8] Updated Internet Explorer fix

---
 modules/backend/assets/css/october.css        |  1 +
 modules/backend/assets/js/october-min.js      |  2 +-
 modules/backend/assets/js/october.js          |  1 -
 .../assets/js/october.sticky-polyfill.js      |  7 -------
 .../assets/less/controls/scrollbar.less       | 20 +++++++++++++++++++
 5 files changed, 22 insertions(+), 9 deletions(-)
 delete mode 100644 modules/backend/assets/js/october.sticky-polyfill.js

diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css
index f168deb902..cc50625691 100644
--- a/modules/backend/assets/css/october.css
+++ b/modules/backend/assets/css/october.css
@@ -115,6 +115,7 @@
 .control-simplelist.is-selectable-box li a:hover .image >i {color:rgba(0,0,0,0.45)}
 .list-preview .control-simplelist.is-selectable ul {margin-bottom:0}
 .drag-noselect {-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
+@media all and (-ms-high-contrast:none) {::-ms-backdrop,.control-scrollbar > .scrollbar-scrollbar .scrollbar-track .scrollbar-thumb{position:absolute !important }}
 .control-scrollbar {position:relative;overflow:hidden;height:100%;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}
 .control-scrollbar >div {-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}
 .control-scrollbar >.scrollbar-scrollbar {position:absolute;z-index:100}
diff --git a/modules/backend/assets/js/october-min.js b/modules/backend/assets/js/october-min.js
index 490248bde7..e053435ccc 100644
--- a/modules/backend/assets/js/october-min.js
+++ b/modules/backend/assets/js/october-min.js
@@ -1262,7 +1262,7 @@ return result?result:items}
 $.fn.dateTimeConverter.Constructor=DateTimeConverter
 $.fn.dateTimeConverter.noConflict=function(){$.fn.dateTimeConverter=old
 return this}
-$(document).render(function(){$('time[data-datetime-control]').dateTimeConverter()})}(window.jQuery);!function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function d(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c])}function e(a){return parseFloat(a)||0}function f(a){for(var b=0;a;)b+=a.offsetTop,a=a.offsetParent;return b}function g(){function c(){a.pageXOffset!=m.left?(m.top=a.pageYOffset,m.left=a.pageXOffset,p.refreshAll()):a.pageYOffset!=m.top&&(m.top=a.pageYOffset,m.left=a.pageXOffset,n.forEach(function(a){return a._recalcPosition()}))}function d(){f=setInterval(function(){n.forEach(function(a){return a._fastCheck()})},500)}function e(){clearInterval(f)}if(!k){k=!0,c(),a.addEventListener("scroll",c),a.addEventListener("resize",p.refreshAll),a.addEventListener("orientationchange",p.refreshAll);var f=void 0,g=void 0,h=void 0;"hidden"in b?(g="hidden",h="visibilitychange"):"webkitHidden"in b&&(g="webkitHidden",h="webkitvisibilitychange"),h?(b[g]||d(),b.addEventListener(h,function(){b[g]?e():d()})):d()}}var h=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),i=!1,j="undefined"!=typeof a;j&&a.getComputedStyle?!function(){var a=b.createElement("div");["","-webkit-","-moz-","-ms-"].some(function(b){try{a.style.position=b+"sticky"}catch(a){}return""!=a.style.position})&&(i=!0)}():i=!0;var k=!1,l="undefined"!=typeof ShadowRoot,m={top:null,left:null},n=[],o=function(){function g(a){if(c(this,g),!(a instanceof HTMLElement))throw new Error("First argument must be HTMLElement");if(n.some(function(b){return b._node===a}))throw new Error("Stickyfill is already applied to this node");this._node=a,this._stickyMode=null,this._active=!1,n.push(this),this.refresh()}return h(g,[{key:"refresh",value:function(){if(!i&&!this._removed){this._active&&this._deactivate();var c=this._node,g=getComputedStyle(c),h={position:g.position,top:g.top,display:g.display,marginTop:g.marginTop,marginBottom:g.marginBottom,marginLeft:g.marginLeft,marginRight:g.marginRight,cssFloat:g.cssFloat};if(!isNaN(parseFloat(h.top))&&"table-cell"!=h.display&&"none"!=h.display){this._active=!0;var j=c.style.position;"sticky"!=g.position&&"-webkit-sticky"!=g.position||(c.style.position="static");var k=c.parentNode,m=l&&k instanceof ShadowRoot?k.host:k,n=c.getBoundingClientRect(),o=m.getBoundingClientRect(),p=getComputedStyle(m);this._parent={node:m,styles:{position:m.style.position},offsetHeight:m.offsetHeight},this._offsetToWindow={left:n.left,right:b.documentElement.clientWidth-n.right},this._offsetToParent={top:n.top-o.top-e(p.borderTopWidth),left:n.left-o.left-e(p.borderLeftWidth),right:-n.right+o.right-e(p.borderRightWidth)},this._styles={position:j,top:c.style.top,bottom:c.style.bottom,left:c.style.left,right:c.style.right,width:c.style.width,marginTop:c.style.marginTop,marginLeft:c.style.marginLeft,marginRight:c.style.marginRight};var q=e(h.top);this._limits={start:n.top+a.pageYOffset-q,end:o.top+a.pageYOffset+m.offsetHeight-e(p.borderBottomWidth)-c.offsetHeight-q-e(h.marginBottom)};var r=p.position;"absolute"!=r&&"relative"!=r&&(m.style.position="relative"),this._recalcPosition();var s=this._clone={};s.node=b.createElement("div"),d(s.node.style,{width:n.right-n.left+"px",height:n.bottom-n.top+"px",marginTop:h.marginTop,marginBottom:h.marginBottom,marginLeft:h.marginLeft,marginRight:h.marginRight,cssFloat:h.cssFloat,padding:0,border:0,borderSpacing:0,fontSize:"1em",position:"static"}),k.insertBefore(s.node,c),s.docOffsetTop=f(s.node)}}}},{key:"_recalcPosition",value:function(){if(this._active&&!this._removed){var a=m.top<=this._limits.start?"start":m.top>=this._limits.end?"end":"middle";if(this._stickyMode!=a){switch(a){case"start":d(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:this._offsetToParent.top+"px",bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"middle":d(this._node.style,{position:"fixed",left:this._offsetToWindow.left+"px",right:this._offsetToWindow.right+"px",top:this._styles.top,bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"end":d(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:"auto",bottom:0,width:"auto",marginLeft:0,marginRight:0})}this._stickyMode=a}}}},{key:"_fastCheck",value:function(){this._active&&!this._removed&&(Math.abs(f(this._clone.node)-this._clone.docOffsetTop)>1||Math.abs(this._parent.node.offsetHeight-this._parent.offsetHeight)>1)&&this.refresh()}},{key:"_deactivate",value:function(){var a=this;this._active&&!this._removed&&(this._clone.node.parentNode.removeChild(this._clone.node),delete this._clone,d(this._node.style,this._styles),delete this._styles,n.some(function(b){return b!==a&&b._parent&&b._parent.node===a._parent.node})||d(this._parent.node.style,this._parent.styles),delete this._parent,this._stickyMode=null,this._active=!1,delete this._offsetToWindow,delete this._offsetToParent,delete this._limits)}},{key:"remove",value:function(){var a=this;this._deactivate(),n.some(function(b,c){if(b._node===a._node)return n.splice(c,1),!0}),this._removed=!0}}]),g}(),p={stickies:n,Sticky:o,forceSticky:function(){i=!1,g(),this.refreshAll()},addOne:function(a){if(!(a instanceof HTMLElement)){if(!a.length||!a[0])return;a=a[0]}for(var b=0;b<n.length;b++)if(n[b]._node===a)return n[b];return new o(a)},add:function(a){if(a instanceof HTMLElement&&(a=[a]),a.length){for(var b=[],c=function(c){var d=a[c];return d instanceof HTMLElement?n.some(function(a){if(a._node===d)return b.push(a),!0})?"continue":void b.push(new o(d)):(b.push(void 0),"continue")},d=0;d<a.length;d++){c(d)}return b}},refreshAll:function(){n.forEach(function(a){return a.refresh()})},removeOne:function(a){if(!(a instanceof HTMLElement)){if(!a.length||!a[0])return;a=a[0]}n.some(function(b){if(b._node===a)return b.remove(),!0})},remove:function(a){if(a instanceof HTMLElement&&(a=[a]),a.length)for(var b=function(b){var c=a[b];n.some(function(a){if(a._node===c)return a.remove(),!0})},c=0;c<a.length;c++)b(c)},removeAll:function(){for(;n.length;)n[0].remove()}};i||g(),"undefined"!=typeof module&&module.exports?module.exports=p:j&&(a.Stickyfill=p)}(window,document);$.ajaxPrefilter(function(options){var token=$('meta[name="csrf-token"]').attr('content')
+$(document).render(function(){$('time[data-datetime-control]').dateTimeConverter()})}(window.jQuery);$.ajaxPrefilter(function(options){var token=$('meta[name="csrf-token"]').attr('content')
 if(token){if(!options.headers)options.headers={}
 options.headers['X-CSRF-TOKEN']=token}})
 if($.oc===undefined)
diff --git a/modules/backend/assets/js/october.js b/modules/backend/assets/js/october.js
index 4d0350b105..17fd9d38de 100644
--- a/modules/backend/assets/js/october.js
+++ b/modules/backend/assets/js/october.js
@@ -31,7 +31,6 @@
 =require october.treelist.js
 =require october.sidenav-tree.js
 =require october.datetime.js
-=require october.sticky-polyfill.js
 
 =require backend.js
 */
diff --git a/modules/backend/assets/js/october.sticky-polyfill.js b/modules/backend/assets/js/october.sticky-polyfill.js
deleted file mode 100644
index c988946fd8..0000000000
--- a/modules/backend/assets/js/october.sticky-polyfill.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/*!
-  * Stickyfill – `position: sticky` polyfill
-  * v. 2.1.0 | https://github.com/wilddeer/stickyfill
-  * This is the ES5 version and allows support for IE9 - IE11
-  * MIT License
-  */
-!function(a,b){"use strict";function c(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function d(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c])}function e(a){return parseFloat(a)||0}function f(a){for(var b=0;a;)b+=a.offsetTop,a=a.offsetParent;return b}function g(){function c(){a.pageXOffset!=m.left?(m.top=a.pageYOffset,m.left=a.pageXOffset,p.refreshAll()):a.pageYOffset!=m.top&&(m.top=a.pageYOffset,m.left=a.pageXOffset,n.forEach(function(a){return a._recalcPosition()}))}function d(){f=setInterval(function(){n.forEach(function(a){return a._fastCheck()})},500)}function e(){clearInterval(f)}if(!k){k=!0,c(),a.addEventListener("scroll",c),a.addEventListener("resize",p.refreshAll),a.addEventListener("orientationchange",p.refreshAll);var f=void 0,g=void 0,h=void 0;"hidden"in b?(g="hidden",h="visibilitychange"):"webkitHidden"in b&&(g="webkitHidden",h="webkitvisibilitychange"),h?(b[g]||d(),b.addEventListener(h,function(){b[g]?e():d()})):d()}}var h=function(){function a(a,b){for(var c=0;c<b.length;c++){var d=b[c];d.enumerable=d.enumerable||!1,d.configurable=!0,"value"in d&&(d.writable=!0),Object.defineProperty(a,d.key,d)}}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),i=!1,j="undefined"!=typeof a;j&&a.getComputedStyle?!function(){var a=b.createElement("div");["","-webkit-","-moz-","-ms-"].some(function(b){try{a.style.position=b+"sticky"}catch(a){}return""!=a.style.position})&&(i=!0)}():i=!0;var k=!1,l="undefined"!=typeof ShadowRoot,m={top:null,left:null},n=[],o=function(){function g(a){if(c(this,g),!(a instanceof HTMLElement))throw new Error("First argument must be HTMLElement");if(n.some(function(b){return b._node===a}))throw new Error("Stickyfill is already applied to this node");this._node=a,this._stickyMode=null,this._active=!1,n.push(this),this.refresh()}return h(g,[{key:"refresh",value:function(){if(!i&&!this._removed){this._active&&this._deactivate();var c=this._node,g=getComputedStyle(c),h={position:g.position,top:g.top,display:g.display,marginTop:g.marginTop,marginBottom:g.marginBottom,marginLeft:g.marginLeft,marginRight:g.marginRight,cssFloat:g.cssFloat};if(!isNaN(parseFloat(h.top))&&"table-cell"!=h.display&&"none"!=h.display){this._active=!0;var j=c.style.position;"sticky"!=g.position&&"-webkit-sticky"!=g.position||(c.style.position="static");var k=c.parentNode,m=l&&k instanceof ShadowRoot?k.host:k,n=c.getBoundingClientRect(),o=m.getBoundingClientRect(),p=getComputedStyle(m);this._parent={node:m,styles:{position:m.style.position},offsetHeight:m.offsetHeight},this._offsetToWindow={left:n.left,right:b.documentElement.clientWidth-n.right},this._offsetToParent={top:n.top-o.top-e(p.borderTopWidth),left:n.left-o.left-e(p.borderLeftWidth),right:-n.right+o.right-e(p.borderRightWidth)},this._styles={position:j,top:c.style.top,bottom:c.style.bottom,left:c.style.left,right:c.style.right,width:c.style.width,marginTop:c.style.marginTop,marginLeft:c.style.marginLeft,marginRight:c.style.marginRight};var q=e(h.top);this._limits={start:n.top+a.pageYOffset-q,end:o.top+a.pageYOffset+m.offsetHeight-e(p.borderBottomWidth)-c.offsetHeight-q-e(h.marginBottom)};var r=p.position;"absolute"!=r&&"relative"!=r&&(m.style.position="relative"),this._recalcPosition();var s=this._clone={};s.node=b.createElement("div"),d(s.node.style,{width:n.right-n.left+"px",height:n.bottom-n.top+"px",marginTop:h.marginTop,marginBottom:h.marginBottom,marginLeft:h.marginLeft,marginRight:h.marginRight,cssFloat:h.cssFloat,padding:0,border:0,borderSpacing:0,fontSize:"1em",position:"static"}),k.insertBefore(s.node,c),s.docOffsetTop=f(s.node)}}}},{key:"_recalcPosition",value:function(){if(this._active&&!this._removed){var a=m.top<=this._limits.start?"start":m.top>=this._limits.end?"end":"middle";if(this._stickyMode!=a){switch(a){case"start":d(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:this._offsetToParent.top+"px",bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"middle":d(this._node.style,{position:"fixed",left:this._offsetToWindow.left+"px",right:this._offsetToWindow.right+"px",top:this._styles.top,bottom:"auto",width:"auto",marginLeft:0,marginRight:0,marginTop:0});break;case"end":d(this._node.style,{position:"absolute",left:this._offsetToParent.left+"px",right:this._offsetToParent.right+"px",top:"auto",bottom:0,width:"auto",marginLeft:0,marginRight:0})}this._stickyMode=a}}}},{key:"_fastCheck",value:function(){this._active&&!this._removed&&(Math.abs(f(this._clone.node)-this._clone.docOffsetTop)>1||Math.abs(this._parent.node.offsetHeight-this._parent.offsetHeight)>1)&&this.refresh()}},{key:"_deactivate",value:function(){var a=this;this._active&&!this._removed&&(this._clone.node.parentNode.removeChild(this._clone.node),delete this._clone,d(this._node.style,this._styles),delete this._styles,n.some(function(b){return b!==a&&b._parent&&b._parent.node===a._parent.node})||d(this._parent.node.style,this._parent.styles),delete this._parent,this._stickyMode=null,this._active=!1,delete this._offsetToWindow,delete this._offsetToParent,delete this._limits)}},{key:"remove",value:function(){var a=this;this._deactivate(),n.some(function(b,c){if(b._node===a._node)return n.splice(c,1),!0}),this._removed=!0}}]),g}(),p={stickies:n,Sticky:o,forceSticky:function(){i=!1,g(),this.refreshAll()},addOne:function(a){if(!(a instanceof HTMLElement)){if(!a.length||!a[0])return;a=a[0]}for(var b=0;b<n.length;b++)if(n[b]._node===a)return n[b];return new o(a)},add:function(a){if(a instanceof HTMLElement&&(a=[a]),a.length){for(var b=[],c=function(c){var d=a[c];return d instanceof HTMLElement?n.some(function(a){if(a._node===d)return b.push(a),!0})?"continue":void b.push(new o(d)):(b.push(void 0),"continue")},d=0;d<a.length;d++){c(d)}return b}},refreshAll:function(){n.forEach(function(a){return a.refresh()})},removeOne:function(a){if(!(a instanceof HTMLElement)){if(!a.length||!a[0])return;a=a[0]}n.some(function(b){if(b._node===a)return b.remove(),!0})},remove:function(a){if(a instanceof HTMLElement&&(a=[a]),a.length)for(var b=function(b){var c=a[b];n.some(function(a){if(a._node===c)return a.remove(),!0})},c=0;c<a.length;c++)b(c)},removeAll:function(){for(;n.length;)n[0].remove()}};i||g(),"undefined"!=typeof module&&module.exports?module.exports=p:j&&(a.Stickyfill=p)}(window,document);
\ No newline at end of file
diff --git a/modules/backend/assets/less/controls/scrollbar.less b/modules/backend/assets/less/controls/scrollbar.less
index db6dd95245..77d87aae52 100644
--- a/modules/backend/assets/less/controls/scrollbar.less
+++ b/modules/backend/assets/less/controls/scrollbar.less
@@ -8,6 +8,26 @@
 
 @scrollbar-thumb-size: 6px;
 
+//
+// IE11 Hack to bypass position:sticky on line 37
+//
+@media all and (-ms-high-contrast:none) {
+    * {
+        &::-ms-backdrop {
+            position: absolute !important;
+        }
+    }
+    .control-scrollbar {
+        >.scrollbar-scrollbar {
+            .scrollbar-track {
+                .scrollbar-thumb {
+                    position: absolute !important;
+                }
+            }
+        }
+    }
+}
+
 .control-scrollbar {
     position: relative;
     overflow: hidden;

From f689771dad94dcfc65d68e669ac5402dd6b93efc Mon Sep 17 00:00:00 2001
From: Ayumi Hamasaki <46076483+ayumihamasaki2@users.noreply.github.com>
Date: Tue, 24 Sep 2019 13:40:46 +0100
Subject: [PATCH 8/8] typo

---
 modules/backend/assets/less/controls/scrollbar.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/backend/assets/less/controls/scrollbar.less b/modules/backend/assets/less/controls/scrollbar.less
index 77d87aae52..9be9518901 100644
--- a/modules/backend/assets/less/controls/scrollbar.less
+++ b/modules/backend/assets/less/controls/scrollbar.less
@@ -9,7 +9,7 @@
 @scrollbar-thumb-size: 6px;
 
 //
-// IE11 Hack to bypass position:sticky on line 37
+// IE11 Hack to bypass position:sticky on line 55
 //
 @media all and (-ms-high-contrast:none) {
     * {