From 9a357f5d1990e6aa29eae5e3597abbafdd6a590a Mon Sep 17 00:00:00 2001
From: Alexander Skvortsov <sasha.skvortsov109@gmail.com>
Date: Sun, 5 Jul 2020 19:30:26 -0400
Subject: [PATCH] Add scrubber height change transition css, don't apply when
 dragging

---
 js/src/forum/components/PostStreamScrubber.js | 7 ++++++-
 less/forum/Scrubber.less                      | 8 ++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/js/src/forum/components/PostStreamScrubber.js b/js/src/forum/components/PostStreamScrubber.js
index e27a32cf6..1ab38d183 100644
--- a/js/src/forum/components/PostStreamScrubber.js
+++ b/js/src/forum/components/PostStreamScrubber.js
@@ -50,8 +50,13 @@ export default class PostStreamScrubber extends Component {
     const handleHeight = Math.min(100 - beforeHeight, percentPerPost.visible * visible);
     const afterHeight = 100 - beforeHeight - handleHeight;
 
+    const classNames = ['PostStreamScrubber', 'Dropdown'];
+    if (this.state.allVisible) classNames.push('disabled');
+    if (this.dragging) classNames.push('dragging');
+    if (this.props.className) classNames.push(this.props.className);
+
     return (
-      <div className={'PostStreamScrubber Dropdown ' + (this.state.allVisible() ? 'disabled ' : '') + (this.props.className || '')}>
+      <div className={classNames.join(' ')}>
         <button className="Button Dropdown-toggle" data-toggle="dropdown">
           {viewing} {icon('fas fa-sort')}
         </button>
diff --git a/less/forum/Scrubber.less b/less/forum/Scrubber.less
index b0cdf94c7..8044ecb04 100644
--- a/less/forum/Scrubber.less
+++ b/less/forum/Scrubber.less
@@ -21,6 +21,14 @@
 }
 .Scrubber-before, .Scrubber-after {
   border-left: 1px solid @control-bg;
+  transition: height 0.15s ease-out;
+}
+.Scrubber-before, .Scrubber-after {
+  border-left: 1px solid @control-bg;
+  transition: height 0.15s ease-out;
+}
+.dragging .Scrubber-before, .dragging .Scrubber-after {
+  transition: none;
 }
 .Scrubber-unread {
   position: absolute;