From 19b88a207837209f2a4c540f84122443c02d56d6 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 5 Mar 2025 22:08:48 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20handle=20overflow=20fo?=
 =?UTF-8?q?r=20usernames=20in=20waiting=20participant=20items?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implement text truncation for excessively long usernames in waiting
participant list items to prevent layout overflow and maintain consistent UI
appearance.
---
 .../WaitingParticipantListItem.tsx            | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/WaitingParticipantListItem.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/WaitingParticipantListItem.tsx
index 0acc38cb..3e32c3e0 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/WaitingParticipantListItem.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/WaitingParticipantListItem.tsx
@@ -4,6 +4,7 @@ import { css } from '@/styled-system/css'
 import { Avatar } from '@/components/Avatar'
 import { useTranslation } from 'react-i18next'
 import { WaitingParticipant } from '@/features/rooms/api/listWaitingParticipants'
+import { RiCloseLine } from '@remixicon/react'
 
 export const WaitingParticipantListItem = ({
   participant,
@@ -25,7 +26,12 @@ export const WaitingParticipantListItem = ({
         width: 'full',
       })}
     >
-      <HStack>
+      <HStack
+        className={css({
+          flex: '1',
+          minWidth: '0',
+        })}
+      >
         <Avatar name={participant.username} bgColor={participant.color} />
         <Text
           variant={'sm'}
@@ -33,6 +39,8 @@ export const WaitingParticipantListItem = ({
             userSelect: 'none',
             cursor: 'default',
             display: 'flex',
+            flex: '1',
+            minWidth: '0',
           })}
         >
           <span
@@ -40,7 +48,7 @@ export const WaitingParticipantListItem = ({
               whiteSpace: 'nowrap',
               overflow: 'hidden',
               textOverflow: 'ellipsis',
-              maxWidth: '120px',
+              width: '100%',
               display: 'block',
             })}
           >
@@ -48,15 +56,15 @@ export const WaitingParticipantListItem = ({
           </span>
         </Text>
       </HStack>
-      {/* FIXME - flex layout is broken when the participant name is long */}
       <HStack
+        gap="0.25rem"
         className={css({
-          marginRight: '0.5rem',
+          flexShrink: '0',
         })}
       >
         <Button
           size="sm"
-          variant="secondaryText"
+          variant="tertiary"
           onPress={() => onAction(participant, true)}
           aria-label={t('waiting.accept.label', { name: participant.username })}
           data-attr="participants-accept"
@@ -65,12 +73,14 @@ export const WaitingParticipantListItem = ({
         </Button>
         <Button
           size="sm"
+          square
+          tooltip={t('participants.waiting.deny.button')}
           variant="secondaryText"
           onPress={() => onAction(participant, false)}
           aria-label={t('waiting.deny.label', { name: participant.username })}
           data-attr="participants-deny"
         >
-          {t('participants.waiting.deny.button')}
+          <RiCloseLine />
         </Button>
       </HStack>
     </HStack>