From c492fcd448b7e0fceb8902f3446fdb68868c0497 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 31 Jan 2023 11:00:13 +0100
Subject: [PATCH] Always show debug info
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>
---
 src/video-grid/VideoTile.module.css | 7 +++++--
 src/video-grid/VideoTile.tsx        | 8 +++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/video-grid/VideoTile.module.css b/src/video-grid/VideoTile.module.css
index 7f94a88..cda0057 100644
--- a/src/video-grid/VideoTile.module.css
+++ b/src/video-grid/VideoTile.module.css
@@ -96,7 +96,7 @@ limitations under the License.
 
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
 
   overflow: hidden;
   z-index: 1;
@@ -181,5 +181,8 @@ limitations under the License.
 }
 
 .debugInfo {
-  margin-left: 16px;
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  background-color: rgba(0, 0, 0, 0.5);
 }
diff --git a/src/video-grid/VideoTile.tsx b/src/video-grid/VideoTile.tsx
index df868b0..c15dd82 100644
--- a/src/video-grid/VideoTile.tsx
+++ b/src/video-grid/VideoTile.tsx
@@ -130,11 +130,13 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
         ref={ref}
         {...rest}
       >
+        {showCallFeedDebugInfo && (
+          <div className={classNames(styles.debugInfo)}>
+            {JSON.stringify(debugInfo)}
+          </div>
+        )}
         {toolbarButtons.length > 0 && !maximised && (
           <div className={classNames(styles.toolbar)}>
-            <div className={classNames(styles.debugInfo)}>
-              {showCallFeedDebugInfo && JSON.stringify(debugInfo)}
-            </div>
             <div>{toolbarButtons}</div>
           </div>
         )}