Album: Fix shift on small screens (#6276)

src/components/middle/message/Message.tsx

@@ -139,7 +139,7 @@ import { getCustomEmojiSize } from '../composer/helpers/customEmoji';
 import { buildContentClassName } from './helpers/buildContentClassName';
 import { calculateAlbumLayout } from './helpers/calculateAlbumLayout';
 import getSingularPaidMedia from './helpers/getSingularPaidMedia';
-import { calculateMediaDimensions, getMinMediaWidth, MIN_MEDIA_WIDTH_WITH_TEXT } from './helpers/mediaDimensions';
+import { calculateMediaDimensions, getMinMediaWidth, getMinMediaWidthWithText } from './helpers/mediaDimensions';
 
 import useAppLayout from '../../../hooks/useAppLayout';
 import useContextMenuHandlers from '../../../hooks/useContextMenuHandlers';
@@ -341,7 +341,6 @@ type QuickReactionPosition =
   | 'in-meta';
 
 const NBSP = '\u00A0';
-const NO_MEDIA_CORNERS_THRESHOLD = 18;
 const QUICK_REACTION_SIZE = 1.75 * REM;
 const EXTRA_SPACE_FOR_REACTIONS = 2.25 * REM;
 const MAX_REASON_LENGTH = 200;
@@ -930,7 +929,6 @@ const Message: FC<OwnProps & StateProps> = ({
   const sizeCalculations = useMemo(() => {
     let calculatedWidth;
     let contentWidth: number | undefined;
-    let noMediaCorners = false;
     let style = '';
     let reactionsMaxWidth;
 
@@ -962,21 +960,14 @@ const Message: FC<OwnProps & StateProps> = ({
       }
 
       if (width) {
-        if (width < MIN_MEDIA_WIDTH_WITH_TEXT) {
+        if (width < getMinMediaWidthWithText(isMobile)) {
           contentWidth = width;
         }
-        calculatedWidth = Math.max(getMinMediaWidth(text?.text, isMediaWithCommentButton), width);
+        calculatedWidth = Math.max(getMinMediaWidth(text?.text, isMobile, isMediaWithCommentButton), width);
-        if (!asForwarded && invoice?.extendedMedia && calculatedWidth - width > NO_MEDIA_CORNERS_THRESHOLD) {
-          noMediaCorners = true;
-        }
       }
     } else if (albumLayout) {
-      calculatedWidth = Math.max(
+      const minWidth = getMinMediaWidth(text?.text, isMobile, isMediaWithCommentButton);
-        getMinMediaWidth(text?.text, isMediaWithCommentButton), albumLayout.containerStyle.width,
+      calculatedWidth = Math.max(minWidth, albumLayout.containerStyle.width);
-      );
-      if (calculatedWidth - albumLayout.containerStyle.width > NO_MEDIA_CORNERS_THRESHOLD) {
-        noMediaCorners = true;
-      }
     }
 
     if (calculatedWidth) {
@@ -989,7 +980,7 @@ const Message: FC<OwnProps & StateProps> = ({
     }
 
     return {
-      contentWidth, noMediaCorners, style, reactionsMaxWidth,
+      contentWidth, style, reactionsMaxWidth,
     };
   }, [
     albumLayout, asForwarded, extraPadding, hasSubheader, invoice?.extendedMedia, isAlbum, isMediaWithCommentButton,
@@ -997,7 +988,7 @@ const Message: FC<OwnProps & StateProps> = ({
   ]);
 
   const {
-    contentWidth, noMediaCorners, style, reactionsMaxWidth,
+    contentWidth, style, reactionsMaxWidth,
   } = sizeCalculations;
 
   function renderMessageText(isForAnimation?: boolean) {
@@ -1098,7 +1089,6 @@ const Message: FC<OwnProps & StateProps> = ({
       asForwarded && 'forwarded-message',
       hasForwardedCustomShape && 'forwarded-custom-shape',
       hasSubheader && 'with-subheader',
-      noMediaCorners && 'no-media-corners',
     );
     const hasCustomAppendix = isLastInGroup
       && (!hasText || (isInvertedMedia && !hasFactCheck && reactionsPosition !== 'inside')) && !withCommentButton;

src/components/middle/message/SponsoredMessage.tsx

@@ -23,7 +23,7 @@ import { IS_ANDROID } from '../../../util/browser/windowEnvironment';
 import buildClassName from '../../../util/buildClassName';
 import { renderTextWithEntities } from '../../common/helpers/renderTextWithEntities';
 import { preventMessageInputBlur } from '../helpers/preventMessageInputBlur';
-import { calculateMediaDimensions, getMinMediaWidth, MIN_MEDIA_WIDTH_WITH_TEXT } from './helpers/mediaDimensions';
+import { calculateMediaDimensions, getMinMediaWidth, getMinMediaWidthWithText } from './helpers/mediaDimensions';
 
 import useAppLayout from '../../../hooks/useAppLayout';
 import useContextMenuHandlers from '../../../hooks/useContextMenuHandlers';
@@ -116,9 +116,10 @@ const SponsoredMessage: FC<OwnProps & StateProps> = ({
     hideSponsored();
   });
 
+  const content = message && getMessageContent(message);
   const {
-    photo, video,
+    photo, video, text,
-  } = message ? getMessageContent(message) : { photo: undefined, video: undefined };
+  } = content || {};
 
   const isGif = video?.isGif;
   const hasMedia = Boolean(photo || video);
@@ -173,10 +174,10 @@ const SponsoredMessage: FC<OwnProps & StateProps> = ({
       }
 
       if (width) {
-        if (width < MIN_MEDIA_WIDTH_WITH_TEXT) {
+        if (width < getMinMediaWidthWithText(isMobile)) {
           contentWidth = width;
         }
-        calculatedWidth = Math.max(getMinMediaWidth(), width);
+        calculatedWidth = Math.max(getMinMediaWidth(text?.text, isMobile), width);
       }
     }
 
@@ -187,7 +188,7 @@ const SponsoredMessage: FC<OwnProps & StateProps> = ({
     return {
       contentWidth, noMediaCorners, style,
     };
-  }, [photo, video, isMobile]);
+  }, [photo, video, isMobile, text?.text]);
 
   const {
     contentWidth, style,

src/components/middle/message/_message-content.scss

@@ -595,15 +595,6 @@
     }
   }
 
-  .no-media-corners {
-    --border-top-left-radius: 0;
-    --border-top-right-radius: 0;
-
-    .Album {
-      margin-inline: auto !important;
-    }
-  }
-
   &.custom-shape.is-via-bot {
     font-size: inherit !important;
 

src/components/middle/message/helpers/calculateAlbumLayout.ts

@@ -46,7 +46,7 @@ export type IAlbumLayout = {
   containerStyle: ApiDimensions;
 };
 
-function getRatios(messages: ApiMessage[], isSingleMessage?: boolean, isMobile?: boolean) {
+function getRatios(messages: ApiMessage[], isSingleMessage: boolean, isMobile: boolean) {
   const isOutgoing = messages[0].isOutgoing;
   const allMedia = (isSingleMessage
     ? messages[0].content.paidMedia!.extendedMedia.map((media) => (
@@ -108,10 +108,10 @@ export function calculateAlbumLayout(
   isOwn: boolean,
   noAvatars: boolean,
   album: IAlbum,
-  isMobile?: boolean,
+  isMobile: boolean,
 ): IAlbumLayout {
   const spacing = 2;
-  const ratios = getRatios(album.messages, album.isPaidMedia, isMobile);
+  const ratios = getRatios(album.messages, Boolean(album.isPaidMedia), isMobile);
   const proportions = getProportions(ratios);
   const averageRatio = getAverageRatio(ratios);
   const albumCount = ratios.length;

src/components/middle/message/helpers/mediaDimensions.ts

@@ -9,13 +9,16 @@ import {
 
 const SMALL_IMAGE_THRESHOLD = 12;
 const MIN_MESSAGE_LENGTH_FOR_BLUR = 40;
-export const MIN_MEDIA_WIDTH_WITH_TEXT = 20 * REM;
 const MIN_MEDIA_WIDTH = SMALL_IMAGE_THRESHOLD * REM;
 export const MIN_MEDIA_HEIGHT = 5 * REM;
 
-export function getMinMediaWidth(text?: string, hasCommentButton?: boolean) {
+export function getMinMediaWidthWithText(isMobile: boolean) {
-  return (text?.length ?? 0) > MIN_MESSAGE_LENGTH_FOR_BLUR || hasCommentButton
+  return (isMobile ? 14 : 20) * REM;
-    ? MIN_MEDIA_WIDTH_WITH_TEXT
+}
+
+export function getMinMediaWidth(text: string = '', isMobile: boolean, hasCommentButton?: boolean) {
+  return text.length > MIN_MESSAGE_LENGTH_FOR_BLUR || hasCommentButton
+    ? getMinMediaWidthWithText(isMobile)
     : MIN_MEDIA_WIDTH;
 }
 
@@ -34,7 +37,7 @@ export function calculateMediaDimensions({
   isInWebPage?: boolean;
   asForwarded?: boolean;
   noAvatars?: boolean;
-  isMobile?: boolean;
+  isMobile: boolean;
 }) {
   const isPhoto = media.mediaType === 'photo';
   const isVideo = media.mediaType === 'video';
@@ -45,7 +48,7 @@ export function calculateMediaDimensions({
     : isVideo ? calculateVideoDimensions(media, isOwn, asForwarded, isWebPageVideo, noAvatars, isMobile)
       : calculateExtendedPreviewDimensions(media, isOwn, asForwarded, isInWebPage, noAvatars, isMobile);
 
-  const minMediaWidth = getMinMediaWidth(messageText);
+  const minMediaWidth = getMinMediaWidth(messageText, isMobile);
 
   let stretchFactor = 1;
   if (width < minMediaWidth && minMediaWidth - width < SMALL_IMAGE_THRESHOLD) {

src/hooks/useAppLayout.ts

@@ -16,10 +16,10 @@ type MediaQueryCacheKey = 'mobile' | 'tablet' | 'landscape' | 'touch';
 const mediaQueryCache = new Map<MediaQueryCacheKey, MediaQueryList>();
 const callbacks = createCallbackManager();
 
-let isMobile: boolean | undefined;
+let isMobile: boolean;
-let isTablet: boolean | undefined;
+let isTablet: boolean;
-let isLandscape: boolean | undefined;
+let isLandscape: boolean;
-let isTouchScreen: boolean | undefined;
+let isTouchScreen: boolean;
 
 export function getIsMobile() {
   return isMobile;