From f32b190d739cc4518f971aebcd67c46d6e49bf06 Mon Sep 17 00:00:00 2001 From: martincupela Date: Thu, 9 Apr 2026 11:39:33 +0200 Subject: [PATCH] fix: adjust padding for messages containing only padding --- .../Attachment/styling/Attachment.scss | 87 ++----------------- src/components/Attachment/styling/Audio.scss | 1 + .../Attachment/styling/VoiceRecording.scss | 74 ++++++++++++++++ src/components/Attachment/styling/index.scss | 1 + src/components/Message/MessageUI.tsx | 6 +- src/components/Message/utils.tsx | 3 + 6 files changed, 91 insertions(+), 81 deletions(-) create mode 100644 src/components/Attachment/styling/VoiceRecording.scss diff --git a/src/components/Attachment/styling/Attachment.scss b/src/components/Attachment/styling/Attachment.scss index 3edbb7c9b9..2699c037fb 100644 --- a/src/components/Attachment/styling/Attachment.scss +++ b/src/components/Attachment/styling/Attachment.scss @@ -143,37 +143,6 @@ /* Box shadow applied to file attachments */ --str-chat__file-attachment-box-shadow: none; - /* Border radius applied to audio recording widget */ - --str-chat__voice-recording-attachment-widget-border-radius: calc( - var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) - ); - - /* Text color used in audio recording widget */ - --str-chat__voice-recording-attachment-widget-color: var(--str-chat__text-color); - - /* Border radius applied to audio recording widget */ - --str-chat__voice-recording-attachment-widget-secondary-color: var( - --str-chat__text-low-emphasis-color - ); - - /* The text/icon color for low emphasis texts (for example file size) in audio recording widget */ - --str-chat__voice-recording-attachment-widget-background-color: transparent; - - /* Top border of audio recording widget */ - --str-chat__voice-recording-attachment-widget-border-block-start: none; - - /* Bottom border of audio recording widget */ - --str-chat__voice-recording-attachment-widget-border-block-end: none; - - /* Left (right in RTL layout) border of audio recording widget */ - --str-chat__voice-recording-attachment-widget-border-inline-start: none; - - /* Right (left in RTL layout) border of audio recording widget */ - --str-chat__voice-recording-attachment-widget-border-inline-end: none; - - /* Box shadow applied to audio recording widget */ - --str-chat__voice-recording-attachment-widget-box-shadow: none; - /* Border radius applied to the play / pause button of audio widget */ --str-chat__audio-attachment-controls-button-border-radius: var( --str-chat__border-radius-circle @@ -382,49 +351,6 @@ @include utils.component-layer-overrides('file-attachment'); } - .str-chat__message-attachment__voice-recording-widget { - @include utils.component-layer-overrides('voice-recording-attachment-widget'); - display: flex; - align-items: center; - justify-content: center; - padding-block: var(--spacing-xs); - padding-inline-start: var(--spacing-xs); - padding-inline-end: var(--spacing-sm); - min-height: 60px; - - .str-chat__message-attachment__voice-recording-widget__play-button-container { - padding: var(--spacing-xxs); - } - - .str-chat__message-attachment__voice-recording-widget__metadata { - flex: 1; - min-width: 180px; - padding-inline: var(--spacing-xs); - - a { - cursor: pointer; - text-decoration: none; - color: var(--str-chat__voice-recording-attachment-widget-color); - } - - .str-chat__message-attachment-download-icon { - svg { - width: calc(var(--str-chat__spacing-px) * 24); - height: calc(var(--str-chat__spacing-px) * 16); - } - } - } - - .str-chat__message-attachment__voice-recording-widget__right-section { - } - - .str-chat__message-attachment__voice-recording-widget__timer { - min-width: calc(var(--str-chat__spacing-px) * 40); - width: calc(var(--str-chat__spacing-px) * 40); - font: var(--str-chat__metadata-emphasis-text); - } - } - .str-chat__message-attachment-with-actions.str-chat__message-attachment--giphy { } @@ -433,6 +359,14 @@ } } +.str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text:not( + .str-chat__message--has-quoted-message + ) { + .str-chat__message-bubble { + padding: 0; + } +} + .str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text { .str-chat__message-bubble { border: 1px solid var(--chat-border-incoming); @@ -441,11 +375,6 @@ .str-chat__message-attachment { background-color: var(--chat-bg-incoming); - - .str-chat__message-attachment__voice-recording-widget { - padding: unset; - padding-inline-end: var(--spacing-xxs); - } } } diff --git a/src/components/Attachment/styling/Audio.scss b/src/components/Attachment/styling/Audio.scss index 66a886773b..db29a739d1 100644 --- a/src/components/Attachment/styling/Audio.scss +++ b/src/components/Attachment/styling/Audio.scss @@ -89,6 +89,7 @@ .str-chat__message-attachment-file--item-size { line-height: calc(var(--str-chat__spacing-px) * 14); + font: var(--str-chat__font-metadata-default); } } } diff --git a/src/components/Attachment/styling/VoiceRecording.scss b/src/components/Attachment/styling/VoiceRecording.scss new file mode 100644 index 0000000000..c981caf267 --- /dev/null +++ b/src/components/Attachment/styling/VoiceRecording.scss @@ -0,0 +1,74 @@ +@use '../../../styling/utils'; + +.str-chat { + /* Border radius applied to audio recording widget */ + --str-chat__voice-recording-attachment-widget-border-radius: calc( + var(--str-chat__message-bubble-border-radius) - var(--str-chat__attachment-margin) + ); + + /* Text color used in audio recording widget */ + --str-chat__voice-recording-attachment-widget-color: var(--str-chat__text-color); + + /* Border radius applied to audio recording widget */ + --str-chat__voice-recording-attachment-widget-secondary-color: var( + --str-chat__text-low-emphasis-color + ); + + /* The text/icon color for low emphasis texts (for example file size) in audio recording widget */ + --str-chat__voice-recording-attachment-widget-background-color: transparent; + + /* Top border of audio recording widget */ + --str-chat__voice-recording-attachment-widget-border-block-start: none; + + /* Bottom border of audio recording widget */ + --str-chat__voice-recording-attachment-widget-border-block-end: none; + + /* Left (right in RTL layout) border of audio recording widget */ + --str-chat__voice-recording-attachment-widget-border-inline-start: none; + + /* Right (left in RTL layout) border of audio recording widget */ + --str-chat__voice-recording-attachment-widget-border-inline-end: none; + + /* Box shadow applied to audio recording widget */ + --str-chat__voice-recording-attachment-widget-box-shadow: none; +} + +.str-chat__message-attachment__voice-recording-widget { + @include utils.component-layer-overrides('voice-recording-attachment-widget'); + display: flex; + align-items: center; + justify-content: center; + min-height: 60px; + padding: var(--spacing-xs); + + .str-chat__message-attachment__voice-recording-widget__play-button-container { + padding: var(--spacing-xxs); + } + + .str-chat__message-attachment__voice-recording-widget__metadata { + flex: 1; + min-width: 180px; + + a { + cursor: pointer; + text-decoration: none; + color: var(--str-chat__voice-recording-attachment-widget-color); + } + + .str-chat__message-attachment-download-icon { + svg { + width: calc(var(--str-chat__spacing-px) * 24); + height: calc(var(--str-chat__spacing-px) * 16); + } + } + } + + .str-chat__message-attachment__voice-recording-widget__right-section { + } + + .str-chat__message-attachment__voice-recording-widget__timer { + min-width: calc(var(--str-chat__spacing-px) * 40); + width: calc(var(--str-chat__spacing-px) * 40); + font: var(--str-chat__metadata-emphasis-text); + } +} diff --git a/src/components/Attachment/styling/index.scss b/src/components/Attachment/styling/index.scss index f30dbc2376..13b803790b 100644 --- a/src/components/Attachment/styling/index.scss +++ b/src/components/Attachment/styling/index.scss @@ -7,3 +7,4 @@ @use 'LinkPreview'; @use 'ModalGallery'; @use 'UnsupportedAttachment'; +@use 'VoiceRecording'; diff --git a/src/components/Message/MessageUI.tsx b/src/components/Message/MessageUI.tsx index d1b9252d6f..e18b5351be 100644 --- a/src/components/Message/MessageUI.tsx +++ b/src/components/Message/MessageUI.tsx @@ -24,6 +24,7 @@ import { isMessageErrorRetryable, messageHasAttachments, messageHasGiphyAttachment, + messageHasQuotedMessage, messageHasReactions, messageHasSingleAttachment, messageTextHasEmojisOnly, @@ -125,6 +126,7 @@ const MessageUIWithContext = ({ const hasSingleAttachment = !isDeleted && messageHasSingleAttachment(message); const hasGiphyAttachment = !isDeleted && messageHasGiphyAttachment(message); const hasReactions = !isDeleted && messageHasReactions(message); + const hasQuotedMessage = !isDeleted && messageHasQuotedMessage(message); const textHasEmojisOnly = !isDeleted && messageTextHasEmojisOnly(message); const allowRetry = isMessageErrorRetryable(message); @@ -142,9 +144,9 @@ const MessageUIWithContext = ({ 'str-chat__message--has-attachment': hasAttachment, 'str-chat__message--has-giphy-attachment': hasGiphyAttachment, 'str-chat__message--has-no-text': !message.text, - 'str-chat__message--has-text': !!message.text, - // eslint-disable-next-line sort-keys + 'str-chat__message--has-quoted-message': hasQuotedMessage, 'str-chat__message--has-single-attachment': hasSingleAttachment, + 'str-chat__message--has-text': !!message.text, 'str-chat__message--highlighted': highlighted, 'str-chat__message--is-emoji-only': textHasEmojisOnly, [`str-chat__message--is-emoji-only-count-${countEmojis(message.text)}`]: diff --git a/src/components/Message/utils.tsx b/src/components/Message/utils.tsx index 371de7862a..7a16c493bb 100644 --- a/src/components/Message/utils.tsx +++ b/src/components/Message/utils.tsx @@ -277,6 +277,9 @@ export const areMessageUIPropsEqual = ( export const messageHasReactions = (message?: LocalMessage) => Object.values(message?.reaction_groups ?? {}).some(({ count }) => count > 0); +export const messageHasQuotedMessage = (message?: LocalMessage) => + !!message?.quoted_message; + export const messageHasAttachments = (message?: LocalMessage) => !!message?.attachments && !!message.attachments.length;