fix: improved content alignment in message info

increased attachment preview size to alignment with other content

ts/components/conversation/header/ConversationHeaderSubtitle.tsx

@@ -50,7 +50,7 @@ export const SubtitleDotMenu = ({
   optionsCount: number;
   style: CSSProperties;
 }) => (
-  <Flex id={id} container={true} alignItems={'center'} style={style}>
+  <StyledSubtitleDotMenu id={id} container={true} alignItems={'center'} style={style}>
     {Array(optionsCount)
       .fill(0)
       .map((_, index) => {
@@ -61,7 +61,7 @@ export const SubtitleDotMenu = ({
           />
         );
       })}
-  </Flex>
+  </StyledSubtitleDotMenu>
 );
 
 type ConversationHeaderSubtitleProps = {

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

@@ -79,7 +79,7 @@ const StyledMessageDetail = styled.div`
   max-width: 650px;
   margin-inline-start: auto;
   margin-inline-end: auto;
-  padding: var(--margins-sm) var(--margins-lg) var(--margins-lg);
+  padding: var(--margins-sm) var(--margins-2xl) var(--margins-lg);
 `;
 
 export const OverlayMessageInfo = () => {

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

@@ -48,10 +48,11 @@ const ImageContainer = styled.div`
 
   ${StyledSubtitleDotMenu} {
     position: absolute;
-    bottom: 12px;
+    bottom: 8px;
     left: 0;
     right: 0;
     margin: 0 auto;
+    z-index: 2;
   }
 
   ${StyledFullscreenButton} {
@@ -116,12 +117,6 @@ export const AttachmentCarousel = (props: Props) => {
           optionsCount={attachments.length}
           style={{
             display: attachments.length < 2 ? 'none' : 'undefined',
-            position: 'absolute',
-            bottom: '8px',
-            left: '0',
-            right: '0',
-            zIndex: 2,
-            margin: '0 auto',
             padding: '6px',
             backgroundColor: 'var(--modal-background-color)',
             borderRadius: '50px',

ts/themes/globals.tsx

@@ -23,6 +23,7 @@ export type ThemeGlobals = {
   '--margins-md': string;
   '--margins-lg': string;
   '--margins-xl': string;
+  '--margins-2xl': string;
 
   /* Padding */
   '--padding-message-content': string;
@@ -112,6 +113,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--margins-md': '15px',
   '--margins-lg': '20px',
   '--margins-xl': '25px',
+  '--margins-2xl': '30px',
 
   '--padding-message-content': '7px 13px',
   '--padding-link-preview': '-7px -13px 7px -13px', // bottom has positive value because a link preview has always a body below
@@ -159,10 +161,10 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`,
 
   '--right-panel-width': '420px',
-  // TODO confirm what is better min-width: 350px; // because the disappear messages don't render well with less than this, and 25vw can be less than that
   '--right-panel-height': '100%',
-  '--right-panel-attachment-width': '350px',
+  '--right-panel-attachment-width': 'calc(var(--right-panel-width) - 2 * var(--margins-2xl) - 7px)',
-  '--right-panel-attachment-height': '350px',
+  '--right-panel-attachment-height':
+    'calc(var(--right-panel-height) - 2 * var(--margins-2xl) -7px)',
 };
 
 // These should only be needed for the global style (at root).