feat: right panel container style is now a styled component

stylesheets/_session_conversation.scss

@@ -18,28 +18,6 @@
   }
 }
 
-// TODO move this into the right panel as Styled container component
-.conversation-item__options-pane {
-  position: absolute;
-  height: var(--right-panel-height);
-  right: 0vw;
-
-  transition: transform 0.3s ease-in-out;
-  transform: translateX(100%);
-  will-change: transform;
-  width: var(--right-panel-width);
-  z-index: 5;
-
-  background-color: var(--background-primary-color);
-  border-left: 1px solid var(--border-color);
-
-  &.show {
-    transform: none;
-    transition: transform 0.3s ease-in-out;
-    z-index: 3;
-  }
-}
-
 .conversation-header {
   .message-selection-overlay {
     position: absolute;

ts/components/conversation/SessionConversation.tsx

@@ -57,7 +57,7 @@ import { isAudio } from '../../types/MIME';
 import { HTMLDirection } from '../../util/i18n';
 import { NoticeBanner } from '../NoticeBanner';
 import { SessionSpinner } from '../basic/SessionSpinner';
-import { RightPanel } from './right-panel/RightPanel';
+import { RightPanel, StyledRightPanelContainer } from './right-panel/RightPanel';
 
 const DEFAULT_JPEG_QUALITY = 0.85;
 
@@ -311,14 +311,9 @@ export class SessionConversation extends React.Component<Props, State> {
                 htmlDirection={this.props.htmlDirection}
               />
             </div>
-            <div
-              className={classNames(
-                'conversation-item__options-pane',
-                isRightPanelShowing && 'show'
-              )}
-            >
+            <StyledRightPanelContainer className={classNames(isRightPanelShowing && 'show')}>
               <RightPanel />
-            </div>
+            </StyledRightPanelContainer>
           </>
         )}
       </SessionTheme>

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

@@ -378,8 +378,8 @@ export const MessageContextMenu = (props: Props) => {
             <Item onClick={onReply}>{window.i18n('replyToMessage')}</Item>
           )}
           <Item
-            onClick={async () => {
-              await showMessageInfoOverlay({ messageId, dispatch });
+            onClick={() => {
+              void showMessageInfoOverlay({ messageId, dispatch });
             }}
           >
             {window.i18n('moreInformation')}

ts/components/conversation/right-panel/RightPanel.tsx

@@ -7,6 +7,27 @@ import { OverlayRightPanelSettings } from './overlay/OverlayRightPanelSettings';
 import { OverlayDisappearingMessages } from './overlay/disappearing-messages/OverlayDisappearingMessages';
 import { OverlayMessageInfo } from './overlay/message-info/OverlayMessageInfo';
 
+export const StyledRightPanelContainer = styled.div`
+  position: absolute;
+  height: var(--right-panel-height);
+  right: 0vw;
+
+  transition: transform 0.3s ease-in-out;
+  transform: translateX(100%);
+  will-change: transform;
+  width: var(--right-panel-width);
+  z-index: 5;
+
+  background-color: var(--background-primary-color);
+  border-left: 1px solid var(--border-color);
+
+  &.show {
+    transform: none;
+    transition: transform 0.3s ease-in-out;
+    z-index: 3;
+  }
+`;
+
 const StyledRightPanel = styled(Flex)`
   h2 {
     word-break: break-word;

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

@@ -10,6 +10,7 @@ const StyledFromContainer = styled.div`
   align-items: center;
   padding: var(--margins-xs) var(--margins-xs) var(--margins-xs) 0;
 `;
+
 const StyledAuthorNamesContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -18,6 +19,7 @@ const StyledAuthorNamesContainer = styled.div`
 const Name = styled.span`
   font-weight: bold;
 `;
+
 const Pubkey = styled.span`
   font-family: var(--font-mono);
   font-size: var(--font-size-md);