Add CSS variable to make the UI gaps consistent and fix the resize handle position (#7234)

Co-authored-by: J. Ryan Stinnett <jryans@gmail.com>

res/css/_common.scss

@@ -33,6 +33,7 @@ $slider-dot-size: 1em;
 $slider-selection-dot-size: 2.4em;
 
 $container-border-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 {

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;

res/css/structures/_MatrixChat.scss

@@ -76,14 +76,28 @@ 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 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(-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 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;
 
     &::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;

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 {

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;

res/css/views/rooms/_AppsDrawer.scss

@@ -18,19 +18,22 @@ limitations under the License.
 $MiniAppTileHeight: 200px;
 
 .mx_AppsDrawer {
-    margin: 5px;
+    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.
-    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 +47,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 +56,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 +91,7 @@ $MiniAppTileHeight: 200px;
 }
 
 .mx_AppsContainer_resizer {
-    margin-bottom: 8px;
+    margin-bottom: $container-gap-width;
 }
 
 .mx_AppsContainer {

res/css/views/voip/_CallView.scss

@@ -26,7 +26,9 @@ limitations under the License.
 
 .mx_CallView_large {
     padding-bottom: 10px;
-    margin: 5px 5px 5px 13px;
+    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;
     flex: 1;

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;