From a8c3463673efea5ab8763c55a50de70c5c2089c8 Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Mon, 29 Aug 2022 15:59:20 +1000
Subject: [PATCH] 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                   |  4 ++++
 .../conversation/SessionQuotedMessageComposition.tsx   | 10 +++++++---
 .../message/message-content/MessageContent.tsx         |  2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/ts/components/conversation/Image.tsx b/ts/components/conversation/Image.tsx
index b1a81c417..15d409af0 100644
--- a/ts/components/conversation/Image.tsx
+++ b/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` : '',
           }}
diff --git a/ts/components/conversation/SessionQuotedMessageComposition.tsx b/ts/components/conversation/SessionQuotedMessageComposition.tsx
index 32606b300..41d8ded6d 100644
--- a/ts/components/conversation/SessionQuotedMessageComposition.tsx
+++ b/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;
diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/ts/components/conversation/message/message-content/MessageContent.tsx
index c38e67786..5159389ce 100644
--- a/ts/components/conversation/message/message-content/MessageContent.tsx
+++ b/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>
             </>