fix: right panel settings media should not have a scroll bar

combined containers for messageInfoOverlay

ts/components/conversation/media-gallery/MediaGallery.tsx

@@ -1,9 +1,9 @@
-import React, { useCallback, useState } from 'react';
 import classNames from 'classnames';
+import React, { useCallback, useState } from 'react';
 
+import { MediaItemType } from '../../lightbox/LightboxGallery';
 import { AttachmentSection } from './AttachmentSection';
 import { EmptyState } from './EmptyState';
-import { MediaItemType } from '../../lightbox/LightboxGallery';
 
 type Props = {
   documents: Array<MediaItemType>;

ts/components/conversation/right-panel/overlay/OverlayRightPanelSettings.tsx

@@ -42,11 +42,11 @@ import { AttachmentTypeWithPath } from '../../../../types/Attachment';
 import { getAbsoluteAttachmentPath } from '../../../../types/MessageAttachment';
 import { Avatar, AvatarSize } from '../../../avatar/Avatar';
 import { Flex } from '../../../basic/Flex';
-import { SpacerMD } from '../../../basic/Text';
+import { SpacerLG, SpacerMD, SpacerXL } from '../../../basic/Text';
 import { PanelButtonGroup, PanelIconButton } from '../../../buttons';
 import { MediaItemType } from '../../../lightbox/LightboxGallery';
 import { MediaGallery } from '../../media-gallery/MediaGallery';
-import { Header } from './components';
+import { Header, StyledScrollContainer } from './components';
 
 async function getMediaGalleryProps(
   conversationId: string
@@ -278,77 +278,81 @@ export const OverlayRightPanelSettings = () => {
   };
 
   return (
-    <>
-      <HeaderItem />
-      <PanelButtonGroup style={{ margin: '0 var(--margins-lg)' }}>
-        {showUpdateGroupNameButton && (
-          <PanelIconButton
-            iconType={'group'}
-            text={isPublic ? window.i18n('editGroup') : window.i18n('editGroupName')}
-            onClick={() => {
-              void showUpdateGroupNameByConvoId(selectedConvoKey);
-            }}
-            dataTestId="edit-group-name"
-          />
-        )}
-
-        {showAddRemoveModeratorsButton && (
-          <>
+    <StyledScrollContainer>
+      <Flex container={true} flexDirection={'column'} alignItems={'center'}>
+        <HeaderItem />
+        <PanelButtonGroup style={{ margin: '0 var(--margins-lg)' }}>
+          {showUpdateGroupNameButton && (
             <PanelIconButton
-              iconType={'addModerator'}
-              text={window.i18n('addModerators')}
+              iconType={'group'}
+              text={isPublic ? window.i18n('editGroup') : window.i18n('editGroupName')}
               onClick={() => {
-                showAddModeratorsByConvoId(selectedConvoKey);
+                void showUpdateGroupNameByConvoId(selectedConvoKey);
               }}
-              dataTestId="add-moderators"
+              dataTestId="edit-group-name"
             />
-
+          )}
+
+          {showAddRemoveModeratorsButton && (
+            <>
+              <PanelIconButton
+                iconType={'addModerator'}
+                text={window.i18n('addModerators')}
+                onClick={() => {
+                  showAddModeratorsByConvoId(selectedConvoKey);
+                }}
+                dataTestId="add-moderators"
+              />
+
+              <PanelIconButton
+                iconType={'deleteModerator'}
+                text={window.i18n('removeModerators')}
+                onClick={() => {
+                  showRemoveModeratorsByConvoId(selectedConvoKey);
+                }}
+                dataTestId="remove-moderators"
+              />
+            </>
+          )}
+
+          {showUpdateGroupMembersButton && (
             <PanelIconButton
-              iconType={'deleteModerator'}
-              text={window.i18n('removeModerators')}
+              iconType={'group'}
+              text={window.i18n('groupMembers')}
               onClick={() => {
-                showRemoveModeratorsByConvoId(selectedConvoKey);
+                void showUpdateGroupMembersByConvoId(selectedConvoKey);
               }}
-              dataTestId="remove-moderators"
+              dataTestId="group-members"
             />
-          </>
-        )}
+          )}
 
-        {showUpdateGroupMembersButton && (
-          <PanelIconButton
-            iconType={'group'}
-            text={window.i18n('groupMembers')}
-            onClick={() => {
-              void showUpdateGroupMembersByConvoId(selectedConvoKey);
-            }}
-            dataTestId="group-members"
-          />
-        )}
-
-        {hasDisappearingMessages && (
-          <PanelIconButton
-            iconType={'timer50'}
-            text={window.i18n('disappearingMessages')}
-            subtitle={disappearingMessagesSubtitle}
-            dataTestId="disappearing-messages"
-            onClick={() => {
-              dispatch(setRightOverlayMode({ type: 'disappearing_messages', params: null }));
-            }}
-          />
-        )}
+          {hasDisappearingMessages && (
+            <PanelIconButton
+              iconType={'timer50'}
+              text={window.i18n('disappearingMessages')}
+              subtitle={disappearingMessagesSubtitle}
+              dataTestId="disappearing-messages"
+              onClick={() => {
+                dispatch(setRightOverlayMode({ type: 'disappearing_messages', params: null }));
+              }}
+            />
+          )}
 
-        <MediaGallery documents={documents} media={media} />
-        {isGroup && (
-          <PanelIconButton
-            text={leaveGroupString}
-            dataTestId="leave-group-button"
-            disabled={isKickedFromGroup || left}
-            onClick={() => void deleteConvoAction()}
-            color={'var(--danger-color)'}
-            iconType={'delete'}
-          />
-        )}
-      </PanelButtonGroup>
-    </>
+          <MediaGallery documents={documents} media={media} />
+          {isGroup && (
+            <PanelIconButton
+              text={leaveGroupString}
+              dataTestId="leave-group-button"
+              disabled={isKickedFromGroup || left}
+              onClick={() => void deleteConvoAction()}
+              color={'var(--danger-color)'}
+              iconType={'delete'}
+            />
+          )}
+        </PanelButtonGroup>
+        <SpacerLG />
+        <SpacerXL />
+      </Flex>
+    </StyledScrollContainer>
   );
 };

ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx

@@ -77,15 +77,13 @@ const MessageBody = ({
   );
 };
 
-const StyledMessageDetailContainer = styled.div`
+const StyledMessageInfoContainer = styled.div`
   height: calc(100% - 48px);
   width: 100%;
-  overflow-y: auto;
+  max-width: 650px;
+  overflow: hidden auto;
   z-index: 2;
-`;
 
-const StyledMessageDetail = styled.div`
-  max-width: 650px;
   margin-inline-start: auto;
   margin-inline-end: auto;
   padding: var(--margins-sm) var(--margins-2xl) var(--margins-lg);
@@ -254,96 +252,94 @@ export const OverlayMessageInfo = () => {
         <Header hideBackButton={true} closeButtonOnClick={closePanel}>
           <HeaderTitle>{window.i18n('messageInfo')}</HeaderTitle>
         </Header>
-        <StyledMessageDetailContainer>
-          <StyledMessageDetail>
-            <MessageBody
-              messageId={messageId}
-              supportsAttachmentCarousel={supportsAttachmentCarousel}
+        <StyledMessageInfoContainer>
+          <MessageBody
+            messageId={messageId}
+            supportsAttachmentCarousel={supportsAttachmentCarousel}
+          />
+          {hasAttachments && (
+            <>
+              {supportsAttachmentCarousel && (
+                <>
+                  <AttachmentCarousel
+                    messageId={messageId}
+                    attachments={attachments}
+                    visibleIndex={visibleAttachmentIndex}
+                    nextAction={() => {
+                      handleChangeAttachment(1);
+                    }}
+                    previousAction={() => {
+                      handleChangeAttachment(-1);
+                    }}
+                  />
+                  <SpacerXL />
+                </>
+              )}
+              <AttachmentInfo attachment={attachments[visibleAttachmentIndex]} />
+              <SpacerMD />
+            </>
+          )}
+          <MessageInfo messageId={messageId} errors={messageInfo.errors} />
+          <SpacerLG />
+          <PanelButtonGroup style={{ margin: '0' }}>
+            <PanelIconButton
+              text={window.i18n('replyToMessage')}
+              iconType="reply"
+              onClick={() => {
+                // eslint-disable-next-line more/no-then
+                void replyToMessage(messageId).then(foundIt => {
+                  if (foundIt) {
+                    dispatch(closeRightPanel());
+                    dispatch(resetRightOverlayMode());
+                  }
+                });
+              }}
+              dataTestId="reply-to-msg-from-details"
             />
+            {hasErrors && direction === 'outgoing' && (
+              <PanelIconButton
+                text={window.i18n('resend')}
+                iconType="resend"
+                onClick={() => {
+                  void resendMessage(messageId);
+                  dispatch(closeRightPanel());
+                  dispatch(resetRightOverlayMode());
+                }}
+                dataTestId="resend-msg-from-details"
+              />
+            )}
             {hasAttachments && (
-              <>
-                {supportsAttachmentCarousel && (
-                  <>
-                    <AttachmentCarousel
-                      messageId={messageId}
-                      attachments={attachments}
-                      visibleIndex={visibleAttachmentIndex}
-                      nextAction={() => {
-                        handleChangeAttachment(1);
-                      }}
-                      previousAction={() => {
-                        handleChangeAttachment(-1);
-                      }}
-                    />
-                    <SpacerXL />
-                  </>
-                )}
-                <AttachmentInfo attachment={attachments[visibleAttachmentIndex]} />
-                <SpacerMD />
-              </>
+              <PanelIconButton
+                text={window.i18n('save')}
+                iconType="saveToDisk"
+                dataTestId="save-attachment-from-details"
+                onClick={() => {
+                  if (hasAttachments) {
+                    void saveAttachmentToDisk({
+                      conversationId: convoId,
+                      messageSender: sender,
+                      messageTimestamp: serverTimestamp || timestamp || Date.now(),
+                      attachment: attachments[visibleAttachmentIndex],
+                      index: visibleAttachmentIndex,
+                    });
+                  }
+                }}
+              />
             )}
-            <MessageInfo messageId={messageId} errors={messageInfo.errors} />
-            <SpacerLG />
-            <PanelButtonGroup style={{ margin: '0' }}>
+            {isDeletable && (
               <PanelIconButton
-                text={window.i18n('replyToMessage')}
-                iconType="reply"
+                text={window.i18n('delete')}
+                iconType="delete"
+                color={'var(--danger-color)'}
+                dataTestId="delete-from-details"
                 onClick={() => {
-                  // eslint-disable-next-line more/no-then
-                  void replyToMessage(messageId).then(foundIt => {
-                    if (foundIt) {
-                      dispatch(closeRightPanel());
-                      dispatch(resetRightOverlayMode());
-                    }
-                  });
+                  void deleteMessagesById([messageId], convoId);
                 }}
-                dataTestId="reply-to-msg-from-details"
               />
-              {hasErrors && direction === 'outgoing' && (
-                <PanelIconButton
-                  text={window.i18n('resend')}
-                  iconType="resend"
-                  onClick={() => {
-                    void resendMessage(messageId);
-                    dispatch(closeRightPanel());
-                    dispatch(resetRightOverlayMode());
-                  }}
-                  dataTestId="resend-msg-from-details"
-                />
-              )}
-              {hasAttachments && (
-                <PanelIconButton
-                  text={window.i18n('save')}
-                  iconType="saveToDisk"
-                  dataTestId="save-attachment-from-details"
-                  onClick={() => {
-                    if (hasAttachments) {
-                      void saveAttachmentToDisk({
-                        conversationId: convoId,
-                        messageSender: sender,
-                        messageTimestamp: serverTimestamp || timestamp || Date.now(),
-                        attachment: attachments[visibleAttachmentIndex],
-                        index: visibleAttachmentIndex,
-                      });
-                    }
-                  }}
-                />
-              )}
-              {isDeletable && (
-                <PanelIconButton
-                  text={window.i18n('delete')}
-                  iconType="delete"
-                  color={'var(--danger-color)'}
-                  dataTestId="delete-from-details"
-                  onClick={() => {
-                    void deleteMessagesById([messageId], convoId);
-                  }}
-                />
-              )}
-            </PanelButtonGroup>
-            <SpacerXL />
-          </StyledMessageDetail>
-        </StyledMessageDetailContainer>
+            )}
+          </PanelButtonGroup>
+          <SpacerXL />
+        </StyledMessageInfoContainer>
       </Flex>
     </StyledScrollContainer>
   );