fix: dont load container if there are no reactions

now message elements are the correct height from what we see visually

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

@@ -10,6 +10,7 @@ import { Flex } from '../../../basic/Flex';
 import { SessionIcon } from '../../../icon';
 import { Reaction, ReactionProps } from '../reactions/Reaction';
 import { StyledPopupContainer } from '../reactions/ReactionPopup';
+import { REACT_LIMIT } from '../../../../session/constants';
 
 export const popupXDefault = -81;
 export const popupYDefault = -90;
@@ -148,7 +149,7 @@ type Props = {
   noAvatar: boolean;
 };
 
-export const MessageReactions = (props: Props): ReactElement => {
+export const MessageReactions = (props: Props) => {
   const {
     messageId,
     hasReactLimit = true,
@@ -185,12 +186,14 @@ export const MessageReactions = (props: Props): ReactElement => {
   }, [msgProps?.sortedReacts, reactions]);
 
   if (!msgProps) {
-    return <></>;
+    return null;
   }
 
   const { sortedReacts } = msgProps;
 
-  const reactLimit = 6;
+  if (!sortedReacts || !sortedReacts.length) {
+    return null;
+  }
 
   const reactionsProps = {
     messageId,
@@ -220,7 +223,7 @@ export const MessageReactions = (props: Props): ReactElement => {
     >
       {sortedReacts &&
         sortedReacts?.length !== 0 &&
-        (!hasReactLimit || sortedReacts.length <= reactLimit ? (
+        (!hasReactLimit || sortedReacts.length <= REACT_LIMIT ? (
           <Reactions {...reactionsProps} />
         ) : (
           <ExtendedReactions handleExpand={handleExpand} {...reactionsProps} />

ts/session/constants.ts

@@ -71,6 +71,7 @@ export const UI = {
 };
 
 export const DEFAULT_RECENT_REACTS = ['😂', '🥰', '😢', '😡', '😮', '😈'];
+export const REACT_LIMIT = 6;
 
 export const MAX_USERNAME_BYTES = 64;
 

ts/themes/globals.tsx

@@ -25,6 +25,8 @@ export type ThemeGlobals = {
   '--margins-xl': string;
 
   /* Padding */
+  '--padding-message-content-x': string;
+  '--padding-message-content-y': string;
   '--padding-message-content': string;
   '--padding-link-preview': string;
 
@@ -106,7 +108,9 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--margins-lg': '20px',
   '--margins-xl': '25px',
 
-  '--padding-message-content': '7px 13px',
+  '--padding-message-content-x': '13px',
+  '--padding-message-content-y': '7px',
+  '--padding-message-content': 'var(--padding-message-content-y) var(--padding-message-content-x)',
   '--padding-link-preview': '-7px -13px 7px -13px', // bottom has positive value because a link preview has always a body below
 
   '--border-radius': '5px',