use padding and negative margin for all resize handles

this way they only take 1px for layout but have a interaction
target of 11px wide

res/css/views/elements/_ResizeHandle.scss

@@ -19,14 +19,19 @@ limitations under the License.
     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;
 }

res/css/views/rooms/_RoomList.scss

@@ -62,7 +62,3 @@ limitations under the License.
     position: absolute;
     right: 60px;
 }
-
-.mx_RoomList .mx_ResizeHandle {
-    padding: 4px 0;
-}