From dcb30b72b0ed1adc6fb075ee9cc26ca0338177bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 17 Dec 2020 13:25:22 +0100
Subject: [PATCH] Fix left panel resizer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/structures/_MainSplit.scss     | 32 ++++++++++++++++----------
 res/css/structures/_RoomView.scss      | 12 ++++++----
 src/components/structures/RoomView.tsx | 28 +++++++++++-----------
 3 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/res/css/structures/_MainSplit.scss b/res/css/structures/_MainSplit.scss
index 3de68b000d..6875ef12e0 100644
--- a/res/css/structures/_MainSplit.scss
+++ b/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;
-        transform: translate(0, -50%);
+        &::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;
 
-        background-color: $primary-fg-color;
-        opacity: 0.8;
+            content: ' ';
+
+            background-color: $primary-fg-color;
+            opacity: 0.8;
+
+            margin-left: -10px;
+        }
     }
 }
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index dd63be3a11..0a12a86c33 100644
--- a/res/css/structures/_RoomView.scss
+++ b/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 {
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 0ee847fbc9..3d62c06e4b 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -2003,22 +2003,24 @@ 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={timelineClasses}>
-                                    {topUnreadMessagesBar}
-                                    {jumpToBottom}
-                                    {messagePanel}
-                                    {searchResultsPanel}
-                                </div>
-                                <div className={statusBarAreaClass}>
-                                    <div className="mx_RoomView_statusAreaBox">
-                                        <div className="mx_RoomView_statusAreaBox_line" />
-                                        {statusBar}
+                                <div className="mx_RoomView_body">
+                                    <div className={timelineClasses}>
+                                        {topUnreadMessagesBar}
+                                        {jumpToBottom}
+                                        {messagePanel}
+                                        {searchResultsPanel}
                                     </div>
+                                    <div className={statusBarAreaClass}>
+                                        <div className="mx_RoomView_statusAreaBox">
+                                            <div className="mx_RoomView_statusAreaBox_line" />
+                                            {statusBar}
+                                        </div>
+                                    </div>
+                                    {previewBar}
+                                    {messageComposer}
                                 </div>
-                                {previewBar}
-                                {messageComposer}
                             </div>
                         </MainSplit>
                     </ErrorBoundary>