Web:Client:Adding an ellipsis to a long name in the info panel, adding the width of the name block as a percentage.

packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js

@@ -225,6 +225,13 @@ const StyledToggleButton = styled(ToggleButton)`
   margin-top: -4px;
 `;
 
+const StyledText = styled(Text)`
+  flex-basis: 72%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
 export {
   StyledBlock,
   StyledHeading,
@@ -247,4 +254,5 @@ export {
   ScrollList,
   StyledAccessSelector,
   StyledToggleButton,
+  StyledText,
 };

packages/client/src/components/panels/InvitePanel/sub-components/Item.js

@@ -16,6 +16,7 @@ import {
   StyledCrossIcon,
   StyledHelpButton,
   StyledDeleteIcon,
+  StyledText,
 } from "../StyledInvitePanel";
 
 const Item = ({
@@ -110,9 +111,9 @@ const Item = ({
 
   const displayBody = (
     <>
-      <Text {...textProps} noSelect>
+      <StyledText {...textProps} noSelect>
         {inputValue}
-      </Text>
+      </StyledText>
       {hasError ? (
         <>
           <StyledHelpButton