From e7dfa8d24ceaf653c1c713cd9f34bfe5964683f6 Mon Sep 17 00:00:00 2001
From: "e.muhamethanov" <eldarmu.1m@gmail.com>
Date: Tue, 28 Jan 2025 12:35:11 +0300
Subject: [PATCH] fix(RichCell): revert fix with after overflow

---
 .../RichCell/RichCell.e2e-playground.tsx      | 35 ++++++++--
 .../components/RichCell/RichCell.module.css   | 37 +++++-----
 .../components/RichCell/RichCell.stories.tsx  | 41 ++++++++++--
 .../src/components/RichCell/RichCell.test.tsx | 43 +++++++-----
 .../vkui/src/components/RichCell/RichCell.tsx | 67 ++++++++++---------
 .../richcell-android-chromium-dark-1-snap.png |  4 +-
 ...richcell-android-chromium-light-1-snap.png |  4 +-
 .../richcell-ios-webkit-dark-1-snap.png       |  4 +-
 .../richcell-ios-webkit-light-1-snap.png      |  4 +-
 .../richcell-vkcom-chromium-dark-1-snap.png   |  4 +-
 .../richcell-vkcom-chromium-light-1-snap.png  |  4 +-
 .../richcell-vkcom-firefox-dark-1-snap.png    |  4 +-
 .../richcell-vkcom-firefox-light-1-snap.png   |  4 +-
 .../richcell-vkcom-webkit-dark-1-snap.png     |  4 +-
 .../richcell-vkcom-webkit-light-1-snap.png    |  4 +-
 15 files changed, 169 insertions(+), 94 deletions(-)

diff --git a/packages/vkui/src/components/RichCell/RichCell.e2e-playground.tsx b/packages/vkui/src/components/RichCell/RichCell.e2e-playground.tsx
index 71e11cd6b6..9f6370c6a1 100644
--- a/packages/vkui/src/components/RichCell/RichCell.e2e-playground.tsx
+++ b/packages/vkui/src/components/RichCell/RichCell.e2e-playground.tsx
@@ -4,13 +4,15 @@ import { withLabel } from '@vkui-e2e/utils';
 import { Avatar } from '../Avatar/Avatar';
 import { Button } from '../Button/Button';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup';
+import { Flex } from '../Flex/Flex';
+import { Text } from '../Typography/Text/Text';
 import { UsersStack } from '../UsersStack/UsersStack';
 import { RichCell, type RichCellProps } from './RichCell';
 
 const longOverTitle = withLabel('Subhead subhead subhead subhead', 'Long overTitle');
-const longChildren = withLabel('Subhead subhead subhead subhead', 'Long children');
-const longSubtitle = withLabel('Subhead subhead subhead subhead', 'Long subtitle');
-const longExtraSubtitle = withLabel('Subhead subhead subhead subhead', 'Long extraSubtitle');
+const longChildren = withLabel('Children children children children', 'Long children');
+const longSubtitle = withLabel('Subtitle subtitle subtitle subtitle', 'Long subtitle');
+const longExtraSubtitle = withLabel('Extra subtitle Extra subtitle', 'Long extraSubtitle');
 
 export const RichCellPlayground = (props: ComponentPlaygroundProps) => {
   return (
@@ -60,6 +62,14 @@ export const RichCellPlayground = (props: ComponentPlaygroundProps) => {
           ],
           multiline: [true],
         },
+        {
+          before: [<Avatar size={48} key="48" />],
+          children: [longChildren],
+          subtitle: [longSubtitle],
+          extraSubtitle: [longExtraSubtitle],
+          after: [<Button key="After">Подписаться</Button>],
+          afterAlign: ['start', 'center'],
+        },
         {
           before: [<Avatar size={48} key="48" />],
           children: ['Михаил Лихачев'],
@@ -73,10 +83,27 @@ export const RichCellPlayground = (props: ComponentPlaygroundProps) => {
         {
           before: [<Avatar size={24} key="24" />],
           children: ['Михаил'],
-          after: [withLabel('Very very very very very very very long after', 'Very long after')],
+          after: [
+            withLabel(
+              <div style={{ maxWidth: 150 }}>Very very very very very very very long after</div>,
+              'Very long after',
+            ),
+          ],
           beforeAlign: ['center', 'end'],
           contentAlign: ['center', 'end'],
         },
+        // Проверяем, что при отсутствии after контент в основной части рястягивается на всю доступную ширину
+        {
+          children: ['Children'],
+          overTitle: ['Over title'],
+          extraSubtitle: [
+            <Flex key="extraSubtitle" justify="space-between" align="center">
+              <Button>Кнопка 1</Button>
+              <Text>Проможуточный текст</Text>
+              <Button>Кнопка 2</Button>
+            </Flex>,
+          ],
+        },
       ]}
     >
       {(props: RichCellProps) => <RichCell {...props} />}
diff --git a/packages/vkui/src/components/RichCell/RichCell.module.css b/packages/vkui/src/components/RichCell/RichCell.module.css
index 77669ba679..c5c41864d2 100644
--- a/packages/vkui/src/components/RichCell/RichCell.module.css
+++ b/packages/vkui/src/components/RichCell/RichCell.module.css
@@ -23,13 +23,6 @@
   margin-inline-end: var(--vkui--spacing_size_xl);
 }
 
-.inWrapper {
-  display: flex;
-  justify-content: space-between;
-  flex-grow: 1;
-  min-inline-size: 0;
-}
-
 .in {
   display: flex;
   flex-direction: column;
@@ -39,27 +32,35 @@
   min-inline-size: 0;
 }
 
+.host.withAfter:not(.alignAfterStart).contentAlignStart .in {
+  justify-content: flex-start;
+}
+
+.host.withAfter:not(.alignAfterStart).contentAlignEnd .in {
+  justify-content: flex-end;
+}
+
 .content {
   display: flex;
   word-break: break-word;
-  justify-content: space-between;
 }
 
 .contentBefore {
   display: flex;
   flex-direction: column;
+  flex-grow: 1;
   min-inline-size: 0;
 }
 
-.contentAlignStart {
+.alignAfterStart.contentAlignStart .contentBefore {
   justify-content: flex-start;
 }
 
-.contentAlignCenter {
+.alignAfterStart.contentAlignCenter .contentBefore {
   justify-content: center;
 }
 
-.contentAlignEnd {
+.alignAfterStart.contentAlignEnd .contentBefore {
   justify-content: flex-end;
 }
 
@@ -67,23 +68,23 @@
   display: flex;
   flex-direction: column;
   align-items: flex-end;
+  flex-shrink: 0;
   padding-inline-start: var(--vkui--spacing_size_xl);
   box-sizing: border-box;
-  flex-shrink: 0;
-  min-inline-size: 0;
-  flex-grow: 1;
-  flex-basis: 100px;
 }
 
-.alignSelfStart {
+.alignBeforeStart .before,
+.alignAfterStart .contentAfter {
   align-self: flex-start;
 }
 
-.alignSelfCenter {
+.alignBeforeCenter .before,
+.alignAfterCenter .contentAfter {
   align-self: center;
 }
 
-.alignSelfEnd {
+.alignBeforeEnd .before,
+.alignAfterEnd .contentAfter {
   align-self: flex-end;
 }
 
diff --git a/packages/vkui/src/components/RichCell/RichCell.stories.tsx b/packages/vkui/src/components/RichCell/RichCell.stories.tsx
index db66f2ba2c..dd415e702a 100644
--- a/packages/vkui/src/components/RichCell/RichCell.stories.tsx
+++ b/packages/vkui/src/components/RichCell/RichCell.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { withSinglePanel, withVKUILayout } from '../../storybook/VKUIDecorators';
-import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants';
+import { CanvasFullLayout, DisableCartesianParam, StringArg } from '../../storybook/constants';
 import { getAvatarUrl } from '../../testing/mock';
 import { createFieldWithPresets } from '../../testing/presets';
 import { Avatar } from '../Avatar/Avatar';
@@ -10,11 +10,27 @@ import { Group } from '../Group/Group';
 import { UsersStack } from '../UsersStack/UsersStack';
 import { RichCell, type RichCellProps } from './RichCell';
 
-const story: Meta<RichCellProps> = {
+const story: Meta<RichCellProps & { maxAfterWidth: number }> = {
   title: 'Blocks/RichCell',
   component: RichCell,
   parameters: { ...CanvasFullLayout, ...DisableCartesianParam },
   argTypes: {
+    overTitle: StringArg,
+    subtitle: StringArg,
+    extraSubtitle: StringArg,
+    children: StringArg,
+    maxAfterWidth: {
+      control: 'number',
+    },
+    after: createFieldWithPresets({
+      iconSizes: ['28'],
+      additionalPresets: {
+        Text: 'After',
+        LongText: 'Very long after'.repeat(5),
+        Button: <Button>Подписаться</Button>,
+      },
+    }),
+    afterCaption: StringArg,
     before: createFieldWithPresets({
       additionalPresets: {
         Avatar40: <Avatar size={40} src={getAvatarUrl()} />,
@@ -61,7 +77,7 @@ const story: Meta<RichCellProps> = {
 
 export default story;
 
-type Story = StoryObj<RichCellProps>;
+type Story = StoryObj<RichCellProps & { maxAfterWidth: number }>;
 
 export const Playground: Story = {
   args: {
@@ -69,7 +85,8 @@ export const Playground: Story = {
     overTitle: 'Over Title',
     subtitle: 'Subtitle',
     extraSubtitle: 'Extra Subtitle',
-    after: 'After',
+    after: 'Text',
+    maxAfterWidth: 100,
     afterCaption: 'After Caption',
     children: 'Example',
   },
@@ -82,4 +99,20 @@ export const Playground: Story = {
     withSinglePanel,
     withVKUILayout,
   ],
+  render: ({ maxAfterWidth, afterCaption: afterCaptionProp, after: afterProp, ...args }) => {
+    const after =
+      maxAfterWidth !== undefined ? (
+        <div style={{ maxWidth: maxAfterWidth }}>{afterProp}</div>
+      ) : (
+        afterProp
+      );
+
+    const afterCaption =
+      maxAfterWidth !== undefined ? (
+        <div style={{ maxWidth: maxAfterWidth }}>{afterCaptionProp}</div>
+      ) : (
+        afterCaptionProp
+      );
+    return <RichCell after={after} afterCaption={afterCaption} {...args} />;
+  },
 };
diff --git a/packages/vkui/src/components/RichCell/RichCell.test.tsx b/packages/vkui/src/components/RichCell/RichCell.test.tsx
index bca250773c..0cc2c170a6 100644
--- a/packages/vkui/src/components/RichCell/RichCell.test.tsx
+++ b/packages/vkui/src/components/RichCell/RichCell.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { baselineComponent } from '../../testing/utils';
 import { RichCell, type RichCellProps } from './RichCell';
 import styles from './RichCell.module.css';
@@ -7,14 +7,15 @@ describe('RichCell', () => {
   baselineComponent((props) => <RichCell {...props}>RichCell</RichCell>);
 
   it.each<[Exclude<RichCellProps['afterAlign'], undefined>, string, string]>([
-    ['start', styles.content, styles.alignSelfStart],
-    ['center', styles.inWrapper, styles.alignSelfCenter],
-    ['end', styles.inWrapper, styles.alignSelfEnd],
+    ['start', styles.content, styles.alignAfterStart],
+    ['center', styles.host, styles.alignAfterCenter],
+    ['end', styles.host, styles.alignAfterEnd],
   ])(
     'should have correct position of after element',
     (afterAlign, expectedContainerStyle, alignClassName) => {
       const { container } = render(
         <RichCell
+          data-testid="rich-cell"
           overTitle="Subhead"
           subtitle="Text"
           extraSubtitle="Caption"
@@ -25,11 +26,12 @@ describe('RichCell', () => {
           Children
         </RichCell>,
       );
+      expect(screen.getByTestId('rich-cell')).toHaveClass(alignClassName);
       const expectedContainer = container.getElementsByClassName(expectedContainerStyle)[0];
       const afterElement = Array.prototype.find.call(
         expectedContainer.children,
         (element: HTMLElement) => {
-          return element.classList.contains(alignClassName);
+          return element.classList.contains(styles.contentAfter);
         },
       );
       expect(afterElement).toBeTruthy();
@@ -41,28 +43,33 @@ describe('RichCell', () => {
     ['center', styles.contentAlignCenter],
     ['end', styles.contentAlignEnd],
   ])('should have correct content alignment', (contentAlign, expectedClassName) => {
-    const { container } = render(
-      <RichCell contentAlign={contentAlign} overTitle="Subhead" subtitle="Text">
+    render(
+      <RichCell
+        contentAlign={contentAlign}
+        data-testid="rich-cell"
+        overTitle="Subhead"
+        subtitle="Text"
+      >
         Children
       </RichCell>,
     );
-
-    const contentElement = container.getElementsByClassName(styles.contentBefore)[0];
-    expect(contentElement.classList.contains(expectedClassName)).toBeTruthy();
+    expect(screen.getByTestId('rich-cell')).toHaveClass(expectedClassName);
   });
 
   it.each<[Exclude<RichCellProps['beforeAlign'], undefined>, string]>([
-    ['start', styles.alignSelfStart],
-    ['center', styles.alignSelfCenter],
-    ['end', styles.alignSelfEnd],
+    ['start', styles.alignBeforeStart],
+    ['center', styles.alignBeforeCenter],
+    ['end', styles.alignBeforeEnd],
   ])('should have correct before element alignment', (beforeAlign, expectedClassName) => {
-    const { container } = render(
-      <RichCell beforeAlign={beforeAlign} before={<div data-testid="before" />}>
+    render(
+      <RichCell
+        beforeAlign={beforeAlign}
+        data-testid="rich-cell"
+        before={<div data-testid="before" />}
+      >
         Children
       </RichCell>,
     );
-
-    const beforeElement = container.getElementsByClassName(styles.before)[0];
-    expect(beforeElement.classList.contains(expectedClassName)).toBeTruthy();
+    expect(screen.getByTestId('rich-cell')).toHaveClass(expectedClassName);
   });
 });
diff --git a/packages/vkui/src/components/RichCell/RichCell.tsx b/packages/vkui/src/components/RichCell/RichCell.tsx
index 239f8cdfaa..7b69e5c26e 100644
--- a/packages/vkui/src/components/RichCell/RichCell.tsx
+++ b/packages/vkui/src/components/RichCell/RichCell.tsx
@@ -13,10 +13,16 @@ const sizeYClassNames = {
   compact: styles.sizeYCompact,
 };
 
-const alignSelfClassNames = {
-  start: styles.alignSelfStart,
-  center: styles.alignSelfCenter,
-  end: styles.alignSelfEnd,
+const alignAfterClassNames = {
+  start: styles.alignAfterStart,
+  center: styles.alignAfterCenter,
+  end: styles.alignAfterEnd,
+};
+
+const alignBeforeClassNames = {
+  start: styles.alignBeforeStart,
+  center: styles.alignBeforeCenter,
+  end: styles.alignBeforeEnd,
 };
 
 const alignContentClassNames = {
@@ -111,13 +117,14 @@ export const RichCell: React.FC<RichCellProps> & {
   ...restProps
 }: RichCellProps) => {
   const { sizeY = 'none' } = useAdaptivity();
+  const withAfter = after || afterCaption;
 
   const afterRender = () => {
-    if (!after && !afterCaption) {
+    if (!withAfter) {
       return;
     }
     return (
-      <div className={classNames(styles.contentAfter, alignSelfClassNames[afterAlign])}>
+      <div className={styles.contentAfter}>
         {after && <div className={styles.afterChildren}>{after}</div>}
         {afterCaption && <div className={styles.afterCaption}>{afterCaption}</div>}
       </div>
@@ -131,35 +138,35 @@ export const RichCell: React.FC<RichCellProps> & {
         styles.host,
         !multiline && styles.textEllipsis,
         sizeY !== 'regular' && sizeYClassNames[sizeY],
+        withAfter && styles.withAfter,
+        withAfter && alignAfterClassNames[afterAlign],
+        before && alignBeforeClassNames[beforeAlign],
+        alignContentClassNames[contentAlign],
       )}
     >
-      {before && (
-        <div className={classNames(styles.before, alignSelfClassNames[beforeAlign])}>{before}</div>
-      )}
-      <div className={styles.inWrapper}>
-        <div className={styles.in}>
-          <div className={styles.content}>
-            <div className={classNames(styles.contentBefore, alignContentClassNames[contentAlign])}>
-              {overTitle && (
-                <Subhead Component="div" className={styles.overTitle}>
-                  {overTitle}
-                </Subhead>
-              )}
-              <div className={styles.children}>{children}</div>
-              {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
-              {extraSubtitle && (
-                <Subhead Component="div" className={styles.extraSubtitle}>
-                  {extraSubtitle}
-                </Subhead>
-              )}
-            </div>
-            {afterAlign === 'start' && afterRender()}
+      {before && <div className={styles.before}>{before}</div>}
+      <div className={styles.in}>
+        <div className={styles.content}>
+          <div className={styles.contentBefore}>
+            {overTitle && (
+              <Subhead Component="div" className={styles.overTitle}>
+                {overTitle}
+              </Subhead>
+            )}
+            <div className={styles.children}>{children}</div>
+            {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
+            {extraSubtitle && (
+              <Subhead Component="div" className={styles.extraSubtitle}>
+                {extraSubtitle}
+              </Subhead>
+            )}
           </div>
-          {bottom && <div className={styles.bottom}>{bottom}</div>}
-          {actions && <div className={styles.actions}>{actions}</div>}
+          {afterAlign === 'start' && afterRender()}
         </div>
-        {afterAlign !== 'start' && afterRender()}
+        {bottom && <div className={styles.bottom}>{bottom}</div>}
+        {actions && <div className={styles.actions}>{actions}</div>}
       </div>
+      {afterAlign !== 'start' && afterRender()}
     </Tappable>
   );
 };
diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-android-chromium-dark-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-android-chromium-dark-1-snap.png
index 6e8a7d3a7d..c9c44ef4ab 100644
--- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6953a23d9542ef218a638195d93bd9e2378a7c53a2ec981225afa34343911961
-size 212640
+oid sha256:fad408fcb3800276fe0f38bc8f6f4b05351588b7d8abb531b450e55945532414
+size 245671
diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-android-chromium-light-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-android-chromium-light-1-snap.png
index c760b97e37..91fd539067 100644
--- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3580de4fcc612b46bef5350e5512213821fbaef415654b55ac0ddf93fda1499b
-size 200118
+oid sha256:b3d1c238d055dcc2bd6aac5db2feea8353122438730d2728e4f65f86321dbf7f
+size 231495
diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-ios-webkit-dark-1-snap.png
index 0499649dcc..c6b0679335 100644
--- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-ios-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-ios-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:91de0c695ede725e616aab9ef493539d48d6b7eb1762898f9a29e4bf72ca0409
-size 321888
+oid sha256:ab2f0ebd4ef86e32a5478ce49e5ab09985406f6e825c87f5012c7272124ee7bd
+size 378928
diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-ios-webkit-light-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-ios-webkit-light-1-snap.png
index a5e0d525c2..7c7400fc07 100644
--- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-ios-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-ios-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5e9ac78bb9b1e2fe77073eb9ddb0c18e11b7c616cb10771996a8acb1fa33f34f
-size 313927
+oid sha256:8528895c88d4e95e911d1804ae96b672fa560cc832a4c59cb37a24ac55135a04
+size 368300
diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-chromium-dark-1-snap.png
index 032edb7de6..536dc24839 100644
--- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:468aa0ecf67abfb175221ac7e17699066324ba7e08f456385c534411f8716417
-size 140380
+oid sha256:436ca23d66d9db6b407af45469771d0149abfb60a765d7837946d4de4428a546
+size 174771
diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-chromium-light-1-snap.png
index 852cac86d5..ce7c4f2879 100644
--- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f844a9e7b2fbb331c1176244368cd817ce2b69e4415dcfc4aa91ecaf1e362f4c
-size 135550
+oid sha256:fe57ac70ea3124566de0b867e453dfa75954596bab096da94345a28fe443ffe8
+size 168946
diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-firefox-dark-1-snap.png
index 8b0d4f028b..811a686433 100644
--- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-firefox-dark-1-snap.png
+++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-firefox-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9ae28f8d77b9e8e797691ae244a06ac8082786a839832dd781637f4ffd663878
-size 238302
+oid sha256:288296e53d3cccd7e3f105dfcf7339c2aad23182f7b1752610d1ed0080c8c0bb
+size 307399
diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-firefox-light-1-snap.png
index 8480ef9eb6..b31ae2844b 100644
--- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-firefox-light-1-snap.png
+++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-firefox-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b9f7b9278cdd8f3b64f0e67f0b69f3b4134f6b0a8e35693baf5fe3f4c41e146a
-size 237652
+oid sha256:40aebba5095e8b53327e6d111e19530a536db6510115643c912eeab2ea3c6fbe
+size 305965
diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-webkit-dark-1-snap.png
index ad008ce91f..205447bf55 100644
--- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f7a5da0c0e97486e0b33d5b7ff9338126ee2f150f493f4d977ddf694dfeab389
-size 232697
+oid sha256:cedb8b34fa51a286029f3ffd0a58a445bf21771c2ed3b64dc09a5e623e97e2aa
+size 301117
diff --git a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-webkit-light-1-snap.png
index aebb2918d2..6fd83c8011 100644
--- a/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/RichCell/__image_snapshots__/richcell-vkcom-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:005ad6c504e9a7e3fb68f0869e997736ea67810efd4ce1ff52713b143133a89f
-size 232590
+oid sha256:56cd9fd407db27559d6a23fe7d3b3323c6fc46efc062801fdddcc9df8077dce5
+size 300001