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,7 +278,8 @@ export const OverlayRightPanelSettings = () => {
   };
 
   return (
-    <>
+    <StyledScrollContainer>
+      <Flex container={true} flexDirection={'column'} alignItems={'center'}>
         <HeaderItem />
         <PanelButtonGroup style={{ margin: '0 var(--margins-lg)' }}>
           {showUpdateGroupNameButton && (
@@ -349,6 +350,9 @@ export const OverlayRightPanelSettings = () => {
             />
           )}
         </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,8 +252,7 @@ export const OverlayMessageInfo = () => {
         <Header hideBackButton={true} closeButtonOnClick={closePanel}>
           <HeaderTitle>{window.i18n('messageInfo')}</HeaderTitle>
         </Header>
-        <StyledMessageDetailContainer>
+        <StyledMessageInfoContainer>
-          <StyledMessageDetail>
           <MessageBody
             messageId={messageId}
             supportsAttachmentCarousel={supportsAttachmentCarousel}
@@ -342,8 +339,7 @@ export const OverlayMessageInfo = () => {
             )}
           </PanelButtonGroup>
           <SpacerXL />
-          </StyledMessageDetail>
+        </StyledMessageInfoContainer>
-        </StyledMessageDetailContainer>
       </Flex>
     </StyledScrollContainer>
   );