From 7ad62a8b1ad3f1ccd0ec83d62f83ae0f98118a1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Thu, 22 Jul 2021 09:06:20 +0200
Subject: [PATCH] Reorganize some CSS
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/views/voip/_CallViewSidebar.scss | 22 ++++++++++------------
 res/css/views/voip/_VideoFeed.scss       | 13 +++++++++++++
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/res/css/views/voip/_CallViewSidebar.scss b/res/css/views/voip/_CallViewSidebar.scss
index 8adfd2540f..816a6ef7bf 100644
--- a/res/css/views/voip/_CallViewSidebar.scss
+++ b/res/css/views/voip/_CallViewSidebar.scss
@@ -19,19 +19,20 @@ limitations under the License.
     right: 16px;
     bottom: 16px;
     z-index: 100; // To be above the primary feed
-    width: 20%;
-    min-width: 160px;
+
+    height: 100%;
+    width: 25%;
+
     display: flex;
     flex-direction: column-reverse;
+    justify-content: flex-start;
+    align-items: flex-end;
+    gap: 12px;
 
-    .mx_VideoFeed {
-        border-radius: 4px;
+    > .mx_VideoFeed {
         width: 100%;
-        margin-bottom: 12px;
 
         &.mx_VideoFeed_voice {
-            background-color: $inverted-bg-color;
-
             display: flex;
             align-items: center;
             justify-content: center;
@@ -39,16 +40,13 @@ limitations under the License.
             min-width: 160px;
             min-height: 90px;
         }
-
-        &.mx_VideoFeed_video {
-            background-color: transparent;
-        }
     }
 
     &.mx_CallViewSidebar_pipMode {
         top: 16px;
         bottom: unset;
-        min-width: unset;
+        justify-content: flex-end;
+        gap: 4px;
 
         .mx_VideoFeed_voice {
             min-width: 64px;
diff --git a/res/css/views/voip/_VideoFeed.scss b/res/css/views/voip/_VideoFeed.scss
index 3d048a6423..07a4a0e530 100644
--- a/res/css/views/voip/_VideoFeed.scss
+++ b/res/css/views/voip/_VideoFeed.scss
@@ -14,6 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_VideoFeed {
+    border-radius: 4px;
+
+
+    &.mx_VideoFeed_voice {
+        background-color: $inverted-bg-color;
+    }
+
+    &.mx_VideoFeed_video {
+        background-color: transparent;
+    }
+}
+
 .mx_VideoFeed_mirror {
     transform: scale(-1, 1);
 }