Album: Fix layout on small screen resolution (#5232)

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;

src/components/middle/message/Message.tsx

@@ -889,9 +889,9 @@ const Message: FC<OwnProps & StateProps> = ({
 
   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;
 

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;
   }
 }
 

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;