Fix left panel resizer

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

res/css/structures/_MainSplit.scss

@@ -22,22 +22,30 @@ limitations under the License.
 }
 
 .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
-    padding: 0 5px 5px 5px;
-    // margin left to not allow the handle to not encroach on the space for the scrollbar
-    margin-left: 8px;
+    padding: 0 5px 5px 0px;
     height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel
     
+    .mx_RightPanel_ResizeHandle {
+        width: 9px;
+    }
+
     &:hover .mx_RightPanel_ResizeHandle {
-        // Need to use important to override element style attributes
-        // set by re-resizable
-        top: 50% !important;
+        &::before {
+            position: absolute;
+            left: 6px;
+            top: 50%;
             transform: translate(0, -50%);
 
-        height: 64px !important; // to match width of the ones on roomlist
-        width: 4px !important;
-        border-radius: 4px !important;
+            height: 64px;
+            width: 4px;
+            border-radius: 4px;
+
+            content: ' ';
 
             background-color: $primary-fg-color;
             opacity: 0.8;
+
+            margin-left: -10px;
+        }
     }
 }

res/css/structures/_RoomView.scss

@@ -25,9 +25,6 @@ limitations under the License.
     width: 100%;
     height: 100%;
 
-    // This is an ugly fix for centering this element
-    margin-left: 6.25px;
-
     font-size: $font-18px;
     text-align: center;
 
@@ -120,16 +117,23 @@ limitations under the License.
     height: 50px;
 }
 
-.mx_RoomView_body {
+.mx_RoomView_container {
     position: relative; //for .mx_RoomView_auxPanel_fullHeight
     display: flex;
     flex-direction: column;
+}
+
+.mx_RoomView_body {
+    display: flex;
+    flex-direction: column;
     flex: 1;
     min-width: 0;
 
     .mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner {
         order: 2;
     }
+
+    margin-right: 10px;
 }
 
 .mx_RoomView_body .mx_RoomView_timeline {

src/components/structures/RoomView.tsx

@@ -2003,8 +2003,9 @@ export default class RoomView extends React.Component<IProps, IState> {
                             appsShown={this.state.showApps}
                         />
                         <MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
-                            <div className="mx_RoomView_body">
+                            <div className={"mx_RoomView_container"}>
                                 {auxPanel}
+                                <div className="mx_RoomView_body">
                                     <div className={timelineClasses}>
                                         {topUnreadMessagesBar}
                                         {jumpToBottom}
@@ -2020,6 +2021,7 @@ export default class RoomView extends React.Component<IProps, IState> {
                                     {previewBar}
                                     {messageComposer}
                                 </div>
+                            </div>
                         </MainSplit>
                     </ErrorBoundary>
                 </main>