Fix text alignment inside message-body. (#287)

* Fix text alignment inside message-body. * Fix text alignment inside message-body.
RocketChat · Oct 25, 2023 · 6c22307 · 6c22307
1 parent 5518655
commit 6c22307
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/packages/react/src/components/Markdown/Markdown.css b/packages/react/src/components/Markdown/Markdown.css
@@ -0,0 +1,11 @@
+/*
+* Temporary fix for Issue #273 until "Markdown.styles.js" works correctly
+*/
+
+.joypixels {
+    height: 1.5rem;
+    width: 1.5rem;
+    image-rendering: pixelated;
+    font-size: inherit;
+    vertical-align: middle;
+}
diff --git a/packages/react/src/components/Markdown/Markdown.js b/packages/react/src/components/Markdown/Markdown.js
@@ -4,6 +4,7 @@ import { css } from '@emotion/react'; // Import Emotion's css function
 import { Markup } from '../Markup/index';
 import { Box } from '../Box';
 import MessageEmoji from '../MessageEmoji/MessageEmoji';
+import {} from './Markdown.css'
 
 const Markdown = ({ body, isReaction = false }) => {
   if (isReaction) {

diff --git a/packages/react/src/components/Markdown/Markdown.styles.js b/packages/react/src/components/Markdown/Markdown.styles.js
@@ -20,6 +20,7 @@ export const markdownStyles = {
     width: 1.5rem;
     image-rendering: pixelated;
     font-size: inherit; // Use 'inherit' to match text size
+    vertical-align: middle; // Hotfix in "Markdown.css"
   `,
   joypixels_BigEmoji: css`
     height: 2.75rem;