fix resize handles being too thick on edge (hopefully)

res/css/views/elements/_ResizeHandle.scss

@@ -17,21 +17,30 @@ limitations under the License.
 .mx_ResizeHandle {
     cursor: row-resize;
     flex: 0 0 auto;
-    background: $panel-divider-color;
-    background-clip: content-box;
     z-index: 100;
 }
 
 .mx_ResizeHandle.mx_ResizeHandle_horizontal {
-    width: 1px;
     margin: 0 -5px;
     padding: 0 5px;
     cursor: col-resize;
 }
 
 .mx_ResizeHandle.mx_ResizeHandle_vertical {
-    height: 1px;
     margin: -5px 0;
     padding: 5px 0;
     cursor: row-resize;
 }
+
+.mx_ResizeHandle > div {
+    background: $panel-divider-color;
+}
+
+.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
+    width: 1px;
+    height: 100%;
+}
+
+.mx_ResizeHandle.mx_ResizeHandle_vertical > div {
+    height: 1px;
+}

src/components/views/elements/ResizeHandle.js

@@ -14,7 +14,7 @@ const ResizeHandle = (props) => {
         classNames.push('mx_ResizeHandle_reverse');
     }
     return (
-        <div className={classNames.join(' ')} data-id={props.id} />
+        <div className={classNames.join(' ')} data-id={props.id}><div /></div>
     );
 };