From 40d81d0c66294fc2c593401778e064db9704bc28 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Tue, 21 May 2024 14:58:29 +1000
Subject: [PATCH 1/2] fix: admins should also be able to clear reactions in
 communities

not just moderators
---
 ts/components/dialog/ReactListModal.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/ts/components/dialog/ReactListModal.tsx b/ts/components/dialog/ReactListModal.tsx
index fbf943c32a..370e59e356 100644
--- a/ts/components/dialog/ReactListModal.tsx
+++ b/ts/components/dialog/ReactListModal.tsx
@@ -14,6 +14,7 @@ import {
 } from '../../state/ducks/modalDialog';
 import {
   useSelectedIsPublic,
+  useSelectedWeAreAdmin,
   useSelectedWeAreModerator,
 } from '../../state/selectors/selectedConversation';
 import { SortedReactionList } from '../../types/Reaction';
@@ -231,6 +232,7 @@ export const ReactListModal = (props: Props) => {
 
   const msgProps = useMessageReactsPropsById(messageId);
   const isPublic = useSelectedIsPublic();
+  const weAreAdmin = useSelectedWeAreAdmin();
   const weAreModerator = useSelectedWeAreModerator();
   const me = UserUtils.getOurPubKeyStrFromCache();
 
@@ -362,7 +364,7 @@ export const ReactListModal = (props: Props) => {
                   </>
                 )}
               </p>
-              {isPublic && weAreModerator && (
+              {isPublic && (weAreAdmin || weAreModerator) && (
                 <SessionButton
                   text={window.i18n('clearAll')}
                   buttonColor={SessionButtonColor.Danger}

From 70a987453dac6e613034b0e3e55f93ad4094b371 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Tue, 21 May 2024 15:41:17 +1000
Subject: [PATCH 2/2] fix: sender name in react list modal is now truncated

---
 stylesheets/_modules.scss                     |  5 -----
 ts/components/conversation/ContactName.tsx    |  5 ++---
 .../message/message-content/Quote.tsx         |  3 +--
 .../message-content/quote/QuoteAuthor.tsx     |  1 -
 ts/components/dialog/ReactListModal.tsx       | 19 +++++++++++++------
 5 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 3a7e348faf..c37d708bda 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -20,11 +20,6 @@
 .module-contact-name__profile-number.italic {
   font-style: italic;
 }
-
-.module-contact-name.compact {
-  display: block;
-}
-
 // Module: Message
 
 .module-message__error-container {
diff --git a/ts/components/conversation/ContactName.tsx b/ts/components/conversation/ContactName.tsx
index 5216371f3d..d370980f26 100644
--- a/ts/components/conversation/ContactName.tsx
+++ b/ts/components/conversation/ContactName.tsx
@@ -13,12 +13,11 @@ type Props = {
   profileName?: string | null;
   module?: string;
   boldProfileName?: boolean;
-  compact?: boolean;
   shouldShowPubkey: boolean;
 };
 
 export const ContactName = (props: Props) => {
-  const { pubkey, name, profileName, module, boldProfileName, compact, shouldShowPubkey } = props;
+  const { pubkey, name, profileName, module, boldProfileName, shouldShowPubkey } = props;
   const prefix = module || 'module-contact-name';
 
   const convoName = useNicknameOrProfileNameOrShortenedPubkey(pubkey);
@@ -43,7 +42,7 @@ export const ContactName = (props: Props) => {
 
   return (
     <span
-      className={classNames(prefix, compact && 'compact')}
+      className={classNames(prefix)}
       dir="auto"
       data-testid={`${prefix}__profile-name`}
       style={{
diff --git a/ts/components/conversation/message/message-content/Quote.tsx b/ts/components/conversation/message/message-content/Quote.tsx
index e2a29d634b..5df515025c 100644
--- a/ts/components/conversation/message/message-content/Quote.tsx
+++ b/ts/components/conversation/message/message-content/Quote.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
-import React, { useState } from 'react';
 import { noop } from 'lodash';
+import React, { useState } from 'react';
 
 import * as MIME from '../../../../types/MIME';
 import * as GoogleChrome from '../../../../util/GoogleChrome';
@@ -291,7 +291,6 @@ const QuoteAuthor = (props: QuoteAuthorProps) => {
           pubkey={PubKey.shorten(author)}
           name={authorName}
           profileName={authorProfileName}
-          compact={true}
           shouldShowPubkey={Boolean(props.showPubkeyForAuthor)}
         />
       )}
diff --git a/ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx b/ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx
index 01763fa5a9..e2b92b3485 100644
--- a/ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx
+++ b/ts/components/conversation/message/message-content/quote/QuoteAuthor.tsx
@@ -41,7 +41,6 @@ export const QuoteAuthor = (props: QuoteAuthorProps) => {
       <ContactName
         pubkey={PubKey.shorten(author)}
         name={authorName}
-        compact={true}
         shouldShowPubkey={Boolean(authorName && !isMe && isPublic)}
       />
     </StyledQuoteAuthor>
diff --git a/ts/components/dialog/ReactListModal.tsx b/ts/components/dialog/ReactListModal.tsx
index 370e59e356..f4a1fafd96 100644
--- a/ts/components/dialog/ReactListModal.tsx
+++ b/ts/components/dialog/ReactListModal.tsx
@@ -51,6 +51,11 @@ const StyledSendersContainer = styled(Flex)`
   padding: 0 16px 16px;
 `;
 
+const StyledContactContainer = styled.span`
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
 const StyledReactionBar = styled(Flex)`
   width: 100%;
   margin: 12px 0 20px 4px;
@@ -133,7 +138,7 @@ const ReactionSenders = (props: ReactionSendersProps) => {
           justifyContent={'space-between'}
           alignItems={'center'}
         >
-          <Flex container={true} alignItems={'center'}>
+          <Flex container={true} alignItems={'center'} style={{ overflow: 'hidden' }}>
             <Avatar
               size={AvatarSize.XS}
               pubkey={sender}
@@ -144,11 +149,13 @@ const ReactionSenders = (props: ReactionSendersProps) => {
             {sender === me ? (
               window.i18n('you')
             ) : (
-              <ContactName
-                pubkey={sender}
-                module="module-conversation__user"
-                shouldShowPubkey={false}
-              />
+              <StyledContactContainer>
+                <ContactName
+                  pubkey={sender}
+                  module="module-conversation__user"
+                  shouldShowPubkey={false}
+                />
+              </StyledContactContainer>
             )}
           </Flex>
           {sender === me && (