Merge pull request #2992 from KeeJef/attachment-area-fix

Make whole attachment area clickable

stylesheets/_modules.scss

@@ -57,6 +57,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  cursor: pointer;
   padding: 10px;
   border-radius: var(--border-radius-message-box);
 
@@ -73,7 +74,6 @@
 
 .module-message__generic-attachment__icon-container {
   position: relative;
-  cursor: pointer;
 }
 .module-message__generic-attachment__spinner-container {
   padding-inline-start: 4px;

ts/components/conversation/message/message-content/MessageAttachment.tsx

@@ -96,7 +96,7 @@ export const MessageAttachment = (props: Props) => {
     (e: any) => {
       e.stopPropagation();
       e.preventDefault();
-      if (!attachmentProps?.attachments?.length) {
+      if (!attachmentProps?.attachments?.length || attachmentProps?.attachments[0]?.pending) {
         return;
       }
 
@@ -186,6 +186,7 @@ export const MessageAttachment = (props: Props) => {
       highlight={highlight}
       selected={selected}
       className={'module-message__generic-attachment'}
+      onClick={onClickOnGenericAttachment}
     >
       {pending ? (
         <div className="module-message__generic-attachment__spinner-container">
@@ -193,11 +194,7 @@ export const MessageAttachment = (props: Props) => {
         </div>
       ) : (
         <div className="module-message__generic-attachment__icon-container">
-          <div
-            role="button"
-            className="module-message__generic-attachment__icon"
-            onClick={onClickOnGenericAttachment}
-          >
+          <div role="button" className="module-message__generic-attachment__icon">
             {extension ? (
               <div className="module-message__generic-attachment__icon__extension">{extension}</div>
             ) : null}