From ab62285989f030d537a8c7399ecc72908c979566 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Tue, 23 Jan 2024 16:14:21 +1100
Subject: [PATCH] fix: improved content alignment in message info

increased attachment preview size to alignment with other content
---
 .../conversation/header/ConversationHeaderSubtitle.tsx   | 4 ++--
 .../overlay/message-info/OverlayMessageInfo.tsx          | 2 +-
 .../message-info/components/AttachmentCarousel.tsx       | 9 ++-------
 ts/themes/globals.tsx                                    | 8 +++++---
 4 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/ts/components/conversation/header/ConversationHeaderSubtitle.tsx b/ts/components/conversation/header/ConversationHeaderSubtitle.tsx
index 90d632be7..b12e13bd6 100644
--- a/ts/components/conversation/header/ConversationHeaderSubtitle.tsx
+++ b/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 = {
diff --git a/ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx b/ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx
index 00b3a0d08..3668f650c 100644
--- a/ts/components/conversation/right-panel/overlay/message-info/OverlayMessageInfo.tsx
+++ b/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 = () => {
diff --git a/ts/components/conversation/right-panel/overlay/message-info/components/AttachmentCarousel.tsx b/ts/components/conversation/right-panel/overlay/message-info/components/AttachmentCarousel.tsx
index 064111368..3470c3b5f 100644
--- a/ts/components/conversation/right-panel/overlay/message-info/components/AttachmentCarousel.tsx
+++ b/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',
diff --git a/ts/themes/globals.tsx b/ts/themes/globals.tsx
index e3c886dce..fbd4d4948 100644
--- a/ts/themes/globals.tsx
+++ b/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-height': '350px',
+  '--right-panel-attachment-width': 'calc(var(--right-panel-width) - 2 * var(--margins-2xl) - 7px)',
+  '--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).