diff --git a/src/components/middle/message/MessageMeta.scss b/src/components/middle/message/MessageMeta.scss index 6413c065a..6d500e1b4 100644 --- a/src/components/middle/message/MessageMeta.scss +++ b/src/components/middle/message/MessageMeta.scss @@ -111,10 +111,6 @@ right: 0.8125rem; } - .emoji-only & { - right: 0; - } - .Message.own .has-solid-background & { color: var(--color-message-meta-own); } @@ -153,16 +149,4 @@ left: 13.25rem; bottom: 0.25rem; } - - .emoji-only-1 .reply-message + .MessageMeta { - left: 2.5rem; - } - - .emoji-only-2 .reply-message + .MessageMeta { - left: 5.5rem; - } - - .emoji-only-3 .reply-message + .MessageMeta { - left: 6.5rem; - } } diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss index c755f649c..febb1325f 100644 --- a/src/components/middle/message/_message-content.scss +++ b/src/components/middle/message/_message-content.scss @@ -457,18 +457,29 @@ &.custom-shape.is-via-bot { font-size: inherit !important; - .content-inner > .message-title { - display: inline-flex; - position: relative; - top: 0.125rem; - max-width: calc(100% - 3rem); - margin-left: calc(100% - 3rem); - padding: 0 0.5rem; - background-color: var(--background-color); - border-radius: var(--border-radius-messages); + .content-inner { + display: flex; + align-items: flex-start; + flex-direction: row-reverse; + direction: ltr; + gap: 0.5rem; + + & > .message-title { + display: inline-flex; + position: relative; + top: 0.125rem; + max-width: calc(100% - 3rem); + padding: 0 0.5rem; + background-color: var(--background-color); + border-radius: var(--border-radius-messages); + + .Message.own & { + margin-left: -3rem; + } + } .Message.own & { - margin-left: -3rem; + flex-direction: row; } } @@ -729,17 +740,6 @@ $size: 6 - ($i * 0.625) + rem; --emoji-only-size: #{$size}; - - @if $i <= 3 { - .text-content { - text-shadow: 1px 1px 0 white, -1px -1px 0 white, -1px 1px 0 white, 1px -1px 0 white; - margin-bottom: 0.25rem; - - img.emoji { - filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px -1px 0 white); - } - } - } } } diff --git a/src/components/middle/message/helpers/buildContentClassName.ts b/src/components/middle/message/helpers/buildContentClassName.ts index ef739c4fa..a7dd6a648 100644 --- a/src/components/middle/message/helpers/buildContentClassName.ts +++ b/src/components/middle/message/helpers/buildContentClassName.ts @@ -41,7 +41,7 @@ export function buildContentClassName( const isMediaWithNoText = isMedia && !hasText; const isViaBot = Boolean(message.viaBotId); - if (message.emojiOnlyCount) { + if (!isMedia && message.emojiOnlyCount) { classNames.push('emoji-only'); if (message.emojiOnlyCount <= EMOJI_SIZES) { classNames.push(`emoji-only-${message.emojiOnlyCount}`); @@ -122,7 +122,7 @@ export function buildContentClassName( classNames.push('has-background'); } - if (hasReply || asForwarded || !isMediaWithNoText || isViaBot || forceSenderName) { + if (hasReply || asForwarded || !isMediaWithNoText || forceSenderName) { classNames.push('has-solid-background'); }