fix: message spacing after fixing audio message shadow

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

@@ -14,7 +14,11 @@ import { StyledPopupContainer } from '../reactions/ReactionPopup';
 export const popupXDefault = -81;
 export const popupYDefault = -90;
 
-const StyledMessageReactionsContainer = styled(Flex)<{ x: number; y: number; noAvatar: boolean }>`
+export const StyledMessageReactionsContainer = styled(Flex)<{
+  x: number;
+  y: number;
+  noAvatar: boolean;
+}>`
   ${StyledPopupContainer} {
     position: absolute;
     top: ${props => `${props.y}px;`};

ts/components/conversation/message/message-item/GenericReadableMessage.tsx

@@ -21,6 +21,7 @@ import { MessageContentWithStatuses } from '../message-content/MessageContentWit
 import { ReadableMessage } from './ReadableMessage';
 import styled, { keyframes } from 'styled-components';
 import { isOpenOrClosedGroup } from '../../../../models/conversationAttributes';
+import { StyledMessageReactionsContainer } from '../message-content/MessageReactions';
 
 export type GenericReadableMessageSelectorProps = Pick<
   MessageRenderingProps,
@@ -118,11 +119,16 @@ const StyledReadableMessage = styled(ReadableMessage)<{
   width: 100%;
   letter-spacing: 0.03rem;
   padding: var(--margins-xs) var(--margins-lg) 0;
+  margin: var(--margins-xxs) 0;
 
   &.message-highlighted {
     animation: ${highlightedMessageAnimation} 1s ease-in-out;
   }
 
+  ${StyledMessageReactionsContainer} {
+    margin-top: var(--margins-xs);
+  }
+
   ${props =>
     props.isRightClicked &&
     `

ts/themes/globals.tsx

@@ -17,6 +17,7 @@ export type ThemeGlobals = {
   '--font-size-h4': string;
 
   /* Margins */
+  '--margins-xxs': string;
   '--margins-xs': string;
   '--margins-sm': string;
   '--margins-md': string;
@@ -97,6 +98,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--font-size-h3': '20px',
   '--font-size-h4': '16px',
 
+  '--margins-xxs': '2.5px',
   '--margins-xs': '5px',
   '--margins-sm': '10px',
   '--margins-md': '15px',