From 76c2aab00aa11bfafcb60862c5dce274b70c2e53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Jaussoin?= <edhelas@movim.eu>
Date: Fri, 5 Jun 2026 16:43:59 +0200
Subject: [PATCH] Fix the minimized Visio layout

---
 app/Widgets/Visio/visio.css | 50 ++++++++++++++++++++++---------------
 1 file changed, 30 insertions(+), 20 deletions(-)

diff --git a/app/Widgets/Visio/visio.css b/app/Widgets/Visio/visio.css
index bf6882a34..88e3398bf 100644
--- a/app/Widgets/Visio/visio.css
+++ b/app/Widgets/Visio/visio.css
@@ -1,27 +1,13 @@
 #visio {
     display: block;
     position: fixed;
-    bottom: 7rem;
-    right: 2rem;
-    width: 40rem;
-    height: 25rem;
-    background-color: #111;
-    border-radius: 1rem;
     transition: opacity 0.3s ease-in-out,
         bottom 0.3s ease-in-out,
         right 0.3s ease-in-out,
         width 0.3s ease-in-out,
         height 0.3s ease-in-out,
         transform 0.3s ease-in-out;
-    z-index: 3;
-}
-
-@media screen and (max-width: 800px) {
-    #visio {
-        right: 1rem;
-        width: 34rem;
-        height: 22rem;
-    }
+    background-color: #111;
 }
 
 #dialog:not(:empty)~#visio,
@@ -49,9 +35,6 @@
 body>#visio:not(:fullscreen) #main,
 body>#visio:not(:fullscreen) #toggle_dtmf,
 
-body>#visio:not(:fullscreen) .participant:before,
-body>#visio:not(:fullscreen) .participant:after,
-
 #chat_widget #visio #switch_chat,
 #visio:not([data-jid]),
 #visio:not([data-jid]) #toggle_audio,
@@ -166,6 +149,30 @@ body>#visio:not(:fullscreen) #toggle_mode,
     width: 40%;
 }
 
+/* Minimized */
+
+body>#visio:not(:fullscreen) {
+    bottom: 7rem;
+    right: 1rem;
+    width: 40rem;
+    height: 25rem;
+    border-radius: 1rem;
+    z-index: 3;
+}
+
+body>#visio:not(:fullscreen) #participants:has(.participant:nth-child(2)) .participant,
+body>#visio:not(:fullscreen) #participants:has(.participant:nth-child(5)) .participant,
+body>#visio:not(:fullscreen) #participants .participant.active {
+    height: 92%;
+    flex-basis: 100%;
+}
+
+body>#visio:not(:fullscreen) .participant span.pin,
+body>#visio:not(:fullscreen) #participants .participant:not(.active) {
+    display: none;
+}
+
+
 body>#visio:not(:fullscreen) video#local_video,
 body>#visio:not(:fullscreen) video#screen_sharing_video.sharing {
     width: 10rem;
@@ -179,11 +186,15 @@ body>#visio:not(:fullscreen) .participant img.avatar {
 }
 
 @media screen and (max-width: 800px) {
-
     #chat_widget #visio:not(:fullscreen) #visio_contact,
     body>#visio:not(:fullscreen) .participant img.avatar {
         transform: scale(0.7);
     }
+
+    body>#visio:not(:fullscreen) #visio {
+        width: 30rem;
+        height: 20rem;
+    }
 }
 
 #visio video#screen_sharing_video:not(.sharing),
@@ -365,7 +376,6 @@ body>#visio:not(:fullscreen) .participant img.avatar {
 
 #visio .participant video.screen {
     height: auto;
-    width: 100%;
 }
 
 #visio .participant.screen_off video.screen {