small tweaks

res/css/views/rooms/_AppsDrawer.scss

@@ -24,11 +24,11 @@ $MiniAppTileHeight: 114px;
     flex-direction: column;
     overflow: hidden;
 
-    .mx_RoomSublist_resizerHandles {
+    .mx_AppsContainer_resizerHandles {
         flex: 0 0 4px;
     }
 
-    .mx_RoomSublist_resizerHandle {
+    .mx_AppsContainer_resizerHandle {
         cursor: ns-resize;
         border-radius: 3px;
 
@@ -47,7 +47,7 @@ $MiniAppTileHeight: 114px;
     }
 
     &:hover {
-        .mx_RoomSublist_resizerHandle {
+        .mx_AppsContainer_resizerHandle {
             opacity: 0.8;
             background: $primary-fg-color;
         }
@@ -427,7 +427,7 @@ form.mx_Custom_Widget_Form div {
     margin-right: auto;
 }
 
-.mx_AppsDrawer_minimised .mx_RoomSublist_resizerHandle {
+.mx_AppsDrawer_minimised .mx_AppsContainer_resizerHandle {
     display: none;
 }
 

src/components/views/rooms/AppsDrawer.js

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
@@ -218,8 +218,8 @@ export default createReactClass({
                     id={"apps-drawer_" + this.props.room.roomId}
                     minHeight={100}
                     maxHeight={this.props.maxHeight - 50}
-                    handleWrapperClass="mx_RoomSublist_resizerHandles"
-                    handleClass="mx_RoomSublist_resizerHandle"
+                    handleWrapperClass="mx_AppsContainer_resizerHandles"
+                    handleClass="mx_AppsContainer_resizerHandle"
                     className="mx_AppsContainer"
                 >
                     { apps }
@@ -233,17 +233,24 @@ export default createReactClass({
 
 const PersistentVResizer = ({id, minHeight, maxHeight, className, handleWrapperClass, handleClass, children}) => {
     const [height, setHeight] = useLocalStorageState("pvr_" + id, 100);
+    const [resizing, setResizing] = useState(false);
 
     return <Resizable
         size={{height: Math.min(height, maxHeight)}}
         minHeight={minHeight}
         maxHeight={maxHeight}
+        onResizeStart={() => {
+            setResizing(true);
+        }}
         onResizeStop={(e, dir, ref, d) => {
             setHeight(height + d.height);
+            setResizing(false);
         }}
         handleWrapperClass={handleWrapperClass}
         handleClasses={{bottom: handleClass}}
-        className={className}
+        className={classNames(className, {
+            mx_AppsDrawer_resizing: resizing,
+        })}
         enable={{bottom: true}}
     >
         { children }