diff --git a/src/components/common/helpers/mediaDimensions.ts b/src/components/common/helpers/mediaDimensions.ts index 69a7c6ff1..d254db179 100644 --- a/src/components/common/helpers/mediaDimensions.ts +++ b/src/components/common/helpers/mediaDimensions.ts @@ -60,12 +60,11 @@ function getMaxMessageWidthRem(fromOwnMessage?: boolean, noAvatars?: boolean, is export function getAvailableWidth( fromOwnMessage?: boolean, - asForwarded?: boolean, isWebPageMedia?: boolean, noAvatars?: boolean, isMobile?: boolean, ) { - const extraPaddingRem = asForwarded && isWebPageMedia ? 2.25 : (asForwarded || isWebPageMedia ? 1.625 : 0); + const extraPaddingRem = isWebPageMedia ? 1.625 : 0; const availableWidthRem = getMaxMessageWidthRem(fromOwnMessage, noAvatars, isMobile) - extraPaddingRem; return availableWidthRem * REM; @@ -86,7 +85,6 @@ export function calculateDimensionsForMessageMedia({ width, height, fromOwnMessage, - asForwarded, isWebPageMedia, isGif, noAvatars, @@ -102,7 +100,7 @@ export function calculateDimensionsForMessageMedia({ isMobile?: boolean; }): ApiDimensions { const aspectRatio = height / width; - const availableWidth = getAvailableWidth(fromOwnMessage, asForwarded, isWebPageMedia, noAvatars, isMobile); + const availableWidth = getAvailableWidth(fromOwnMessage, isWebPageMedia, noAvatars, isMobile); const availableHeight = getAvailableHeight(isGif, aspectRatio); const mediaWidth = isGif ? Math.max(GIF_MIN_WIDTH, width) : width; const mediaHeight = isGif ? height * (mediaWidth / width) : height; diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx index 3ab206410..0aee5d3e7 100644 --- a/src/components/middle/message/Message.tsx +++ b/src/components/middle/message/Message.tsx @@ -889,9 +889,9 @@ const Message: FC = ({ const albumLayout = useMemo(() => { return isAlbum - ? calculateAlbumLayout(isOwn, Boolean(asForwarded), Boolean(noAvatars), album!, isMobile) + ? calculateAlbumLayout(isOwn, Boolean(noAvatars), album!, isMobile) : undefined; - }, [isAlbum, isOwn, asForwarded, noAvatars, album, isMobile]); + }, [isAlbum, isOwn, noAvatars, album, isMobile]); const extraPadding = asForwarded && !isCustomShape ? 28 : 0; diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss index 3a1cd80d4..25b0bbd43 100644 --- a/src/components/middle/message/_message-content.scss +++ b/src/components/middle/message/_message-content.scss @@ -570,6 +570,10 @@ .no-media-corners { --border-top-left-radius: 0; --border-top-right-radius: 0; + + .Album { + margin-inline: auto !important; + } } &.custom-shape.is-via-bot { @@ -958,34 +962,9 @@ } .forwarded-message { - .message-content.contact &, - .message-content.poll &, - .message-content.giveaway & { - // MessageOutgoingStatus's icon needs more space - margin-bottom: 0.5rem; - } - .message-content:not(.custom-shape) & { position: relative; margin-top: 0.25rem; - - .Album, - .media-inner:not(.file-preview) { - margin-left: -0.5rem; - margin-right: -0.5rem; - - body.is-ios .Message.own & { - margin-left: -0.625rem; - } - - :not(.has-footer) & { - margin-bottom: -0.375rem; - - body.is-ios .Message.own & { - margin-bottom: -0.4375rem; - } - } - } } --border-top-left-radius: 0; @@ -997,17 +976,7 @@ } .Album { - margin-bottom: 0.125rem; - - .message-content.media.text & { - margin-top: 0.25rem; - --border-bottom-left-radius: inherit; - --border-bottom-right-radius: inherit; - - + .message-paid-media-status { - margin-right: 0; - } - } + margin-top: 0 !important; } } diff --git a/src/components/middle/message/helpers/calculateAlbumLayout.ts b/src/components/middle/message/helpers/calculateAlbumLayout.ts index cd823784a..ea3d8549e 100644 --- a/src/components/middle/message/helpers/calculateAlbumLayout.ts +++ b/src/components/middle/message/helpers/calculateAlbumLayout.ts @@ -8,7 +8,7 @@ import type { IAlbum } from '../../../../types'; import { getMessageContent } from '../../../../global/helpers'; import { clamp } from '../../../../util/math'; -import { getAvailableWidth, REM } from '../../../common/helpers/mediaDimensions'; +import { getAvailableWidth } from '../../../common/helpers/mediaDimensions'; import { calculateMediaDimensions } from './mediaDimensions'; export const AlbumRectPart = { @@ -107,7 +107,6 @@ function calculateContainerSize(layout: IMediaLayout[]) { export function calculateAlbumLayout( isOwn: boolean, - asForwarded: boolean, noAvatars: boolean, album: IAlbum, isMobile?: boolean, @@ -118,7 +117,7 @@ export function calculateAlbumLayout( const averageRatio = getAverageRatio(ratios); const albumCount = ratios.length; const forceCalc = ratios.some((ratio) => ratio > 2); - const maxWidth = getAvailableWidth(isOwn, asForwarded, false, noAvatars, isMobile) - (asForwarded ? 2.5 : 0) * REM; + const maxWidth = getAvailableWidth(isOwn, false, noAvatars, isMobile); const maxHeight = maxWidth; let layout;