fix: set a min height for attachments preview so they cover their box

even if they are smaller that them

and close the replyTo in composition box on Escape press

ts/components/conversation/Image.tsx

@@ -88,6 +88,8 @@ export const Image = (props: Props) => {
       style={{
         maxHeight: `${height}px`,
         maxWidth: `${width}px`,
+        minHeight: `${height}px`,
+        minWidth: `${width}px`,
       }}
       data-attachmentindex={attachmentIndex}
     >
@@ -116,6 +118,8 @@ export const Image = (props: Props) => {
           style={{
             maxHeight: `${height}px`,
             maxWidth: `${width}px`,
+            minHeight: `${height}px`,
+            minWidth: `${width}px`,
             width: forceSquare ? `${width}px` : '',
             height: forceSquare ? `${height}px` : '',
           }}

ts/components/conversation/SessionQuotedMessageComposition.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { SessionIcon, SessionIconButton } from '../icon';
 import styled from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
@@ -8,6 +8,8 @@ import { getAlt, isAudio } from '../../types/Attachment';
 import { AUDIO_MP3 } from '../../types/MIME';
 import { Flex } from '../basic/Flex';
 import { Image } from '../../../ts/components/conversation/Image';
+// tslint:disable-next-line: no-submodule-imports
+import useKey from 'react-use/lib/useKey';
 
 const QuotedMessageComposition = styled.div`
   width: 100%;
@@ -58,9 +60,11 @@ export const SessionQuotedMessageComposition = () => {
   const hasAudioAttachment =
     hasAttachments && attachments && attachments.length > 0 && isAudio(attachments);
 
-  const removeQuotedMessage = useCallback(() => {
+  const removeQuotedMessage = () => {
     dispatch(quoteMessage(undefined));
-  }, []);
+  };
+
+  useKey('Escape', removeQuotedMessage, undefined, []);
 
   if (!quotedMessageProps?.id) {
     return null;

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

@@ -219,7 +219,7 @@ export const MessageContent = (props: Props) => {
               {!isDeleted && (
                 <MessagePreview messageId={props.messageId} handleImageError={handleImageError} />
               )}
-              <Flex padding="7px" container={true} flexDirection="column">
+              <Flex padding="7px 13px" container={true} flexDirection="column">
                 <MessageText messageId={props.messageId} />
               </Flex>
             </>