From c989585b9b14e658148498470f5f358c257ea3a2 Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Tue, 30 Nov 2021 15:50:21 +0100
Subject: [PATCH 01/12] add $container-gap-width to fix ui gap consistency

---
 res/css/_common.scss                     |  1 +
 res/css/structures/_LeftPanel.scss       |  1 +
 res/css/structures/_MainSplit.scss       |  8 ++++----
 res/css/structures/_MatrixChat.scss      |  4 ++--
 res/css/structures/_RoomView.scss        |  1 +
 res/css/views/rooms/_AppsDrawer.scss     | 15 ++++++++-------
 res/css/views/voip/_CallView.scss        |  3 ++-
 res/css/views/voip/_CallViewForRoom.scss |  3 ---
 8 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/res/css/_common.scss b/res/css/_common.scss
index bb5c74d5b90..c6a7269a655 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -31,6 +31,7 @@ $slider-dot-size: 1em;
 $slider-selection-dot-size: 2.4em;
 
 $container-border-width: 8px;
+$container-gap-width: 8px;
 
 $timeline-image-border-radius: 8px;
 :root {
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 0bfa0c993af..46c52d49845 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -27,6 +27,7 @@ $roomListCollapsedWidth: 68px;
     display: flex;
     max-width: 50%;
     position: relative;
+    margin-right: calc($container-gap-width / 2);
 
     // Contain the amount of layers rendered by constraining what actually needs re-layering via css
     contain: layout paint;
diff --git a/res/css/structures/_MainSplit.scss b/res/css/structures/_MainSplit.scss
index 215e87940c1..c144bc81cf2 100644
--- a/res/css/structures/_MainSplit.scss
+++ b/res/css/structures/_MainSplit.scss
@@ -23,15 +23,15 @@ limitations under the License.
 }
 
 .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
-    // no padding on the left. The spacing is taken care of by the main split content.
-    padding: 5px 5px 5px 0px;
-    margin-left: 8px;
+    padding: $container-gap-width;
+    padding-left: calc($container-gap-width/2); // The resizer should be centered: only half of the gap-width is handled by the right panel. The other half by the RoomView.
     height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel
 
     &:hover .mx_ResizeHandle_horizontal::before {
         position: absolute;
         top: 50%;
-        transform: translate(0, -50%);
+        left: 50%;
+        transform: translate(-50%, -50%);
 
         height: 64px; // to match width of the ones on roomlist
         width: 4px;
diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index 80053154ab2..155bd5c208b 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -81,9 +81,9 @@ limitations under the License.
 
     &::before {
         position: absolute;
-        left: 6px;
         top: 50%;
-        transform: translate(0, -50%);
+        left: 50%;
+        transform: translate(-50%, -50%);
 
         height: 64px; // to match width of the ones on roomlist
         width: 4px;
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index a3beb2dd696..50e00c204d6 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -166,6 +166,7 @@ limitations under the License.
     flex: 1;
     display: flex;
     flex-direction: column;
+    margin-right: calc($container-gap-width/2);
 }
 
 .mx_RoomView_statusArea {
diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index 1ac50c0be93..d2a27012359 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -18,19 +18,21 @@ limitations under the License.
 $MiniAppTileHeight: 200px;
 
 .mx_AppsDrawer {
-    margin: 5px;
+    margin: $container-gap-width calc($container-gap-width/2);
     margin-bottom: 0; // No bottom margin for the correct gap to the CallView below.
-    margin-left: 13px; // 5+8px to compensate for the scroll bar padding on the right.
     position: relative;
     display: flex;
     flex-direction: column;
     overflow: hidden;
     flex-grow: 1;
 
+    &.mx_AppsDrawer_maximise {
+        margin-bottom: $container-gap-width;
+    }
+
     .mx_AppsContainer_resizerHandleContainer {
         width: 100%;
         height: 10px;
-        margin-top: -3px; // move it up so the interactions are slightly more comfortable
         display: block;
         position: relative;
     }
@@ -44,7 +46,7 @@ $MiniAppTileHeight: 200px;
 
         // This is positioned directly below frame
         position: absolute;
-        bottom: 0 !important; // override from library
+        bottom: 50% !important; // override from library
 
         // We then render the pill handle in an ::after to keep it in the handle's
         // area without being a massive line across the screen
@@ -53,8 +55,7 @@ $MiniAppTileHeight: 200px;
             position: absolute;
             border-radius: 3px;
 
-            // The combination of these two should make the pill 4px high
-            top: 6px;
+            height: 4px;
             bottom: 0;
 
             // Together, these make the bar 64px wide
@@ -89,7 +90,7 @@ $MiniAppTileHeight: 200px;
 }
 
 .mx_AppsContainer_resizer {
-    margin-bottom: 8px;
+    margin-bottom: $container-gap-width;
 }
 
 .mx_AppsContainer {
diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index 67527bb9e9c..ec36a736dbc 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -26,7 +26,8 @@ limitations under the License.
 
 .mx_CallView_large {
     padding-bottom: 10px;
-    margin: 5px 5px 5px 13px;
+    margin: $container-gap-width calc($container-gap-width / 2);
+    margin-bottom: 10px;
     display: flex;
     flex-direction: column;
     flex: 1;
diff --git a/res/css/views/voip/_CallViewForRoom.scss b/res/css/views/voip/_CallViewForRoom.scss
index d23fcc18bc8..58b4ddf700c 100644
--- a/res/css/views/voip/_CallViewForRoom.scss
+++ b/res/css/views/voip/_CallViewForRoom.scss
@@ -19,7 +19,6 @@ limitations under the License.
 
     .mx_CallViewForRoom_ResizeWrapper {
         display: flex;
-        margin-bottom: 8px;
 
         &:hover .mx_CallViewForRoom_ResizeHandle {
             // Need to use important to override element style attributes
@@ -31,8 +30,6 @@ limitations under the License.
 
             &::after {
                 content: '';
-                margin-top: 3px;
-
                 border-radius: 4px;
 
                 height: 4px;

From 7d88cda2552693d187c857daf9e7dabf14a5532b Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Wed, 1 Dec 2021 12:45:54 +0100
Subject: [PATCH 02/12] fix bleeding

---
 res/css/_common.scss                 |  2 +-
 res/css/structures/_LeftPanel.scss   |  1 -
 res/css/structures/_MatrixChat.scss  | 10 ++++++++++
 res/css/views/rooms/_AppsDrawer.scss |  3 ++-
 res/css/views/voip/_CallView.scss    |  3 ++-
 5 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/res/css/_common.scss b/res/css/_common.scss
index c6a7269a655..e3cac2cd4a4 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -31,7 +31,7 @@ $slider-dot-size: 1em;
 $slider-selection-dot-size: 2.4em;
 
 $container-border-width: 8px;
-$container-gap-width: 8px;
+$container-gap-width: 8px; // only even numbers should be used because otherwise we get 0.5px margin values.
 
 $timeline-image-border-radius: 8px;
 :root {
diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
index 46c52d49845..0bfa0c993af 100644
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@@ -27,7 +27,6 @@ $roomListCollapsedWidth: 68px;
     display: flex;
     max-width: 50%;
     position: relative;
-    margin-right: calc($container-gap-width / 2);
 
     // Contain the amount of layers rendered by constraining what actually needs re-layering via css
     contain: layout paint;
diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index 155bd5c208b..eeaab79e6cf 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -76,6 +76,16 @@ limitations under the License.
     height: 100%;
 }
 
+.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
+    margin: 0 calc(-6px - $container-gap-width / 2) 0 calc(-6px + $container-gap-width / 2); 
+    // This is required to make webpack not bleed the blurred bg of the leftPanel! 
+    // The condition to prevent bleeding is: (margin-left+maring-right < 11px) (IF there is NO margin on the leftPanel_wrapper)
+    // The resizeHandle does not change the gap between the left panel and the room view: the resizeHandle width is: 11px =  10px (padding) + 1px (width) and the total negative margin is -12px -> the handle requires no space
+    // right: -6px left: -6px positions the element exactly on the edge of leftPanel.
+    // left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap.
+    // We want the handle to be in the middle of the gap so it is shifted by ($container-gap-width / 2)
+}
+
 .mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
     position: relative;
 
diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index d2a27012359..047de3a6b87 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -18,7 +18,8 @@ limitations under the License.
 $MiniAppTileHeight: 200px;
 
 .mx_AppsDrawer {
-    margin: $container-gap-width calc($container-gap-width/2);
+    margin: $container-gap-width;
+    margin-right: calc($container-gap-width / 2); // The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser.
     margin-bottom: 0; // No bottom margin for the correct gap to the CallView below.
     position: relative;
     display: flex;
diff --git a/res/css/views/voip/_CallView.scss b/res/css/views/voip/_CallView.scss
index ec36a736dbc..46f9ed94dd0 100644
--- a/res/css/views/voip/_CallView.scss
+++ b/res/css/views/voip/_CallView.scss
@@ -26,7 +26,8 @@ limitations under the License.
 
 .mx_CallView_large {
     padding-bottom: 10px;
-    margin: $container-gap-width calc($container-gap-width / 2);
+    margin: $container-gap-width;
+    margin-right: calc($container-gap-width / 2); // The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser.
     margin-bottom: 10px;
     display: flex;
     flex-direction: column;

From daa906313ff5efe4721e6fbab0ed8b3f20984e4e Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Wed, 1 Dec 2021 12:48:31 +0100
Subject: [PATCH 03/12] fixes after merge

---
 res/css/structures/_MatrixChat.scss       | 4 ++++
 res/css/views/elements/_ResizeHandle.scss | 9 ---------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index eeaab79e6cf..7440f649705 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -76,6 +76,10 @@ limitations under the License.
     height: 100%;
 }
 
+// We'd like to remove this, but this makes matrixchat's resizehandle's
+// negative margin & greater than its positive padding. If it's the same
+// or less, Safari gets confused about overflows somehow and
+// https://github.com/vector-im/element-web/issues/19863 happens.
 .mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
     margin: 0 calc(-6px - $container-gap-width / 2) 0 calc(-6px + $container-gap-width / 2); 
     // This is required to make webpack not bleed the blurred bg of the leftPanel! 
diff --git a/res/css/views/elements/_ResizeHandle.scss b/res/css/views/elements/_ResizeHandle.scss
index 3c6ba254fa5..2af2880654e 100644
--- a/res/css/views/elements/_ResizeHandle.scss
+++ b/res/css/views/elements/_ResizeHandle.scss
@@ -20,15 +20,6 @@ limitations under the License.
     z-index: 100;
 }
 
-// We'd like to remove this, but this makes matrixchat's resizehandle's
-// negative margin & greater than its positive padding. If it's the same
-// or less, Safari gets confused about overflows somehow and
-// https://github.com/vector-im/element-web/issues/19863 happens.
-.mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
-    margin: 0 -10px 0 0;
-    padding: 0 8px 0 0;
-}
-
 .mx_ResizeHandle.mx_ResizeHandle_horizontal {
     margin: 0 -5px;
     padding: 0 5px;

From 2e9a7efa5dd8d0de2ffac7bef6d574cd112e4a00 Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Wed, 1 Dec 2021 12:52:19 +0100
Subject: [PATCH 04/12] linter...

---
 res/css/structures/_MatrixChat.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index 7440f649705..40927efd228 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -81,8 +81,8 @@ limitations under the License.
 // or less, Safari gets confused about overflows somehow and
 // https://github.com/vector-im/element-web/issues/19863 happens.
 .mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
-    margin: 0 calc(-6px - $container-gap-width / 2) 0 calc(-6px + $container-gap-width / 2); 
-    // This is required to make webpack not bleed the blurred bg of the leftPanel! 
+    margin: 0 calc(-6px - $container-gap-width / 2) 0 calc(-6px + $container-gap-width / 2);
+    // This is required to make webpack not bleed the blurred bg of the leftPanel!
     // The condition to prevent bleeding is: (margin-left+maring-right < 11px) (IF there is NO margin on the leftPanel_wrapper)
     // The resizeHandle does not change the gap between the left panel and the room view: the resizeHandle width is: 11px =  10px (padding) + 1px (width) and the total negative margin is -12px -> the handle requires no space
     // right: -6px left: -6px positions the element exactly on the edge of leftPanel.

From 349736903de801e1e110b4e318a9302366900d59 Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Wed, 1 Dec 2021 15:36:25 +0100
Subject: [PATCH 05/12] webpack webkit confusion

---
 res/css/structures/_MatrixChat.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index 40927efd228..f86fe4d5366 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -82,7 +82,7 @@ limitations under the License.
 // https://github.com/vector-im/element-web/issues/19863 happens.
 .mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
     margin: 0 calc(-6px - $container-gap-width / 2) 0 calc(-6px + $container-gap-width / 2);
-    // This is required to make webpack not bleed the blurred bg of the leftPanel!
+    // This is required to make WebKit not bleed the blurred bg of the leftPanel!
     // The condition to prevent bleeding is: (margin-left+maring-right < 11px) (IF there is NO margin on the leftPanel_wrapper)
     // The resizeHandle does not change the gap between the left panel and the room view: the resizeHandle width is: 11px =  10px (padding) + 1px (width) and the total negative margin is -12px -> the handle requires no space
     // right: -6px left: -6px positions the element exactly on the edge of leftPanel.

From 559b1e7af9fe9f10ba24e0d211ba408c13d2db9e Mon Sep 17 00:00:00 2001
From: Timo <16718859+toger5@users.noreply.github.com>
Date: Thu, 2 Dec 2021 16:47:37 +0100
Subject: [PATCH 06/12] Update res/css/structures/_MainSplit.scss

Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>
---
 res/css/structures/_MainSplit.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/structures/_MainSplit.scss b/res/css/structures/_MainSplit.scss
index c144bc81cf2..1a0ad60781b 100644
--- a/res/css/structures/_MainSplit.scss
+++ b/res/css/structures/_MainSplit.scss
@@ -24,7 +24,7 @@ limitations under the License.
 
 .mx_MainSplit > .mx_RightPanel_ResizeWrapper {
     padding: $container-gap-width;
-    padding-left: calc($container-gap-width/2); // The resizer should be centered: only half of the gap-width is handled by the right panel. The other half by the RoomView.
+    padding-left: calc($container-gap-width / 2); // The resizer should be centered: only half of the gap-width is handled by the right panel. The other half by the RoomView.
     height: calc(100vh - 51px); // height of .mx_RoomHeader.light-panel
 
     &:hover .mx_ResizeHandle_horizontal::before {

From b74c958582ebeec18b8c03e6baa4ba4022565503 Mon Sep 17 00:00:00 2001
From: Timo <16718859+toger5@users.noreply.github.com>
Date: Thu, 2 Dec 2021 16:47:45 +0100
Subject: [PATCH 07/12] Update res/css/structures/_MatrixChat.scss

Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>
---
 res/css/structures/_MatrixChat.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index f86fe4d5366..dd9c231b771 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -77,7 +77,7 @@ limitations under the License.
 }
 
 // We'd like to remove this, but this makes matrixchat's resizehandle's
-// negative margin & greater than its positive padding. If it's the same
+// negative margin greater than its positive padding. If it's the same
 // or less, Safari gets confused about overflows somehow and
 // https://github.com/vector-im/element-web/issues/19863 happens.
 .mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {

From b04cb54d9afabb8a9f66327c808a00786bd9a59e Mon Sep 17 00:00:00 2001
From: Timo <16718859+toger5@users.noreply.github.com>
Date: Thu, 2 Dec 2021 16:47:51 +0100
Subject: [PATCH 08/12] Update res/css/structures/_RoomView.scss

Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>
---
 res/css/structures/_RoomView.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index 50e00c204d6..d47c790a0c7 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -166,7 +166,7 @@ limitations under the License.
     flex: 1;
     display: flex;
     flex-direction: column;
-    margin-right: calc($container-gap-width/2);
+    margin-right: calc($container-gap-width / 2);
 }
 
 .mx_RoomView_statusArea {

From d35d2e645ee08e954762d934dacd6a8dcc1a1e41 Mon Sep 17 00:00:00 2001
From: Timo <16718859+toger5@users.noreply.github.com>
Date: Thu, 2 Dec 2021 16:48:04 +0100
Subject: [PATCH 09/12] Update res/css/structures/_MatrixChat.scss

Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>
---
 res/css/structures/_MatrixChat.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index dd9c231b771..2181733f3f5 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -82,7 +82,6 @@ limitations under the License.
 // https://github.com/vector-im/element-web/issues/19863 happens.
 .mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
     margin: 0 calc(-6px - $container-gap-width / 2) 0 calc(-6px + $container-gap-width / 2);
-    // This is required to make WebKit not bleed the blurred bg of the leftPanel!
     // The condition to prevent bleeding is: (margin-left+maring-right < 11px) (IF there is NO margin on the leftPanel_wrapper)
     // The resizeHandle does not change the gap between the left panel and the room view: the resizeHandle width is: 11px =  10px (padding) + 1px (width) and the total negative margin is -12px -> the handle requires no space
     // right: -6px left: -6px positions the element exactly on the edge of leftPanel.

From f46b69c92ce52c705703add28d8f64d86474dd01 Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Thu, 2 Dec 2021 17:02:57 +0100
Subject: [PATCH 10/12] fix offset vlaues and comment newLine

---
 res/css/structures/_MatrixChat.scss | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index 2181733f3f5..0d9dafc02f6 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -78,12 +78,13 @@ limitations under the License.
 
 // We'd like to remove this, but this makes matrixchat's resizehandle's
 // negative margin greater than its positive padding. If it's the same
-// or less, Safari gets confused about overflows somehow and
+// or less, Safari and other WebKit based browsers get confused about overflows somehow and
 // https://github.com/vector-im/element-web/issues/19863 happens.
 .mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
-    margin: 0 calc(-6px - $container-gap-width / 2) 0 calc(-6px + $container-gap-width / 2);
-    // The condition to prevent bleeding is: (margin-left+maring-right < 11px) (IF there is NO margin on the leftPanel_wrapper)
-    // The resizeHandle does not change the gap between the left panel and the room view: the resizeHandle width is: 11px =  10px (padding) + 1px (width) and the total negative margin is -12px -> the handle requires no space
+    margin: 0 calc(-5.5px - $container-gap-width / 2) 0 calc(-6.5px + $container-gap-width / 2);
+    // The condition to prevent bleeding is: (margin-left+maring-right < -11px) (IF there is NO margin on the leftPanel_wrapper)
+    // The resizeHandle does not change the gap between the left panel and the room view: 
+    //  the resizeHandle width is: 11px =  10px (padding) + 1px (width) and the total negative margin is -12px -> the handle requires no space
     // right: -6px left: -6px positions the element exactly on the edge of leftPanel.
     // left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap.
     // We want the handle to be in the middle of the gap so it is shifted by ($container-gap-width / 2)

From 80a70a95f5174b8a124953986b13dcfe4836b267 Mon Sep 17 00:00:00 2001
From: Timo <16718859+toger5@users.noreply.github.com>
Date: Mon, 6 Dec 2021 12:33:20 +0100
Subject: [PATCH 11/12] Update res/css/structures/_MatrixChat.scss

Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>
---
 res/css/structures/_MatrixChat.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index 0d9dafc02f6..6c291df911e 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -82,7 +82,7 @@ limitations under the License.
 // https://github.com/vector-im/element-web/issues/19863 happens.
 .mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
     margin: 0 calc(-5.5px - $container-gap-width / 2) 0 calc(-6.5px + $container-gap-width / 2);
-    // The condition to prevent bleeding is: (margin-left+maring-right < -11px) (IF there is NO margin on the leftPanel_wrapper)
+    // The condition to prevent bleeding is: (margin-left + margin-right < -11px) (IF there is NO margin on the leftPanel_wrapper)
     // The resizeHandle does not change the gap between the left panel and the room view: 
     //  the resizeHandle width is: 11px =  10px (padding) + 1px (width) and the total negative margin is -12px -> the handle requires no space
     // right: -6px left: -6px positions the element exactly on the edge of leftPanel.

From 270de984c969c2725192ab730c94394f6356b89a Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Mon, 6 Dec 2021 12:36:37 +0100
Subject: [PATCH 12/12] fix linter

---
 res/css/structures/_MatrixChat.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/structures/_MatrixChat.scss b/res/css/structures/_MatrixChat.scss
index 6c291df911e..a95bfa9eb9f 100644
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@@ -83,7 +83,7 @@ limitations under the License.
 .mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
     margin: 0 calc(-5.5px - $container-gap-width / 2) 0 calc(-6.5px + $container-gap-width / 2);
     // The condition to prevent bleeding is: (margin-left + margin-right < -11px) (IF there is NO margin on the leftPanel_wrapper)
-    // The resizeHandle does not change the gap between the left panel and the room view: 
+    // The resizeHandle does not change the gap between the left panel and the room view:
     //  the resizeHandle width is: 11px =  10px (padding) + 1px (width) and the total negative margin is -12px -> the handle requires no space
     // right: -6px left: -6px positions the element exactly on the edge of leftPanel.
     // left+=1 and right-=1 => resizeHandle moves 1px to the right closer to the center of the gap.