From 490aaba30a8b8a9accfcc656e90ed652008de237 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 28 Aug 2024 19:12:49 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20make=20row=20lay?=
 =?UTF-8?q?out=20extensible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rapidly, a 'more option' button should be added to the row. Thus,
participants will have access to few more actions (ex: remove from
the room, pin camera, etc…).

This flex layout should be definitive, except the code which is dirty,
but not creating much technical debt here.
---
 .../Participants/ParticipantListItem.tsx      | 52 +++++++++++--------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
index c1eae397..e6763e8c 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx
@@ -77,44 +77,50 @@ export const ParticipantListItem = ({
   return (
     <HStack
       role="listitem"
+      justify="space-between"
       key={participant.identity}
       id={participant.identity}
       className={css({
         padding: '0.25rem 0',
+        width: 'full',
       })}
     >
-      <Avatar name={name} bgColor={getParticipantColor(participant)} />
-      <Text
-        variant={'sm'}
-        className={css({
-          userSelect: 'none',
-          cursor: 'default',
-          display: 'flex',
-        })}
-      >
-        <span
+      <HStack>
+        <Avatar name={name} bgColor={getParticipantColor(participant)} />
+        <Text
+          variant={'sm'}
           className={css({
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            maxWidth: '120px',
-            display: 'block',
+            userSelect: 'none',
+            cursor: 'default',
+            display: 'flex',
           })}
         >
-          {name}
-        </span>
-        {isLocal(participant) && (
           <span
             className={css({
-              marginLeft: '.25rem',
               whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              maxWidth: '120px',
+              display: 'block',
             })}
           >
-            ({t('participants.you')})
+            {name}
           </span>
-        )}
-      </Text>
-      <MicIndicator participant={participant} />
+          {isLocal(participant) && (
+            <span
+              className={css({
+                marginLeft: '.25rem',
+                whiteSpace: 'nowrap',
+              })}
+            >
+              ({t('participants.you')})
+            </span>
+          )}
+        </Text>
+      </HStack>
+      <HStack>
+        <MicIndicator participant={participant} />
+      </HStack>
     </HStack>
   )
 }