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/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;