fix(Header, SimpleCell): fix icons position with multiline (#8144)

* fix(Header, SimpleCell): fix icons position with multiline * test(SimpleCell, Header): add screenshots with long text
VKCOM · Jan 15, 2025 · 846add3 · 846add3
1 parent 7a22bfc
commit 846add3
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 10 deletions.
diff --git a/packages/vkui/src/components/Header/Header.e2e-playground.tsx b/packages/vkui/src/components/Header/Header.e2e-playground.tsx
@@ -66,7 +66,6 @@ export const HeaderPlayground = (props: ComponentPlaygroundProps) => {
           size: ['m'],
           children: ['Кто может оставлять записи на моей странице'],
           afterTitle: [<Icon16UnlockOutline key="afterTitle" />],
-          multiline: [undefined, true],
         },
         {
           size: ['m'],
@@ -79,7 +78,6 @@ export const HeaderPlayground = (props: ComponentPlaygroundProps) => {
           children: ['Кто может оставлять записи на моей странице'],
           subtitle: ['SOHN — Conrad'],
           afterSubtitle: [<Icon12Fire key="afterSubtitle" />],
-          multiline: [undefined, true],
         },
         {
           size: ['s', 'm', 'l', 'xl'],
@@ -90,7 +88,17 @@ export const HeaderPlayground = (props: ComponentPlaygroundProps) => {
           beforeSubtitle: [<Icon12Tag key="beforeSubtitle" />],
           afterSubtitle: [<Icon12Fire key="afterSubtitle" />],
           subtitle: ['SOHN — Conrad'],
-          multiline: [undefined, true],
+        },
+        {
+          children: [
+            'Very long children Very long children Very long children Very long children Very long children Very long children Very long children Very long children Very long children Very long children Very long children',
+          ],
+          subtitle: [
+            'Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle  Very long subtitle  Very long subtitle  Very long subtitle  Very long subtitle  Very long subtitle',
+          ],
+          afterSubtitle: [<Icon12Fire key="afterSubtitle" />],
+          afterTitle: [<Icon16UnlockOutline key="afterTitle" />],
+          multiline: [false, true],
         },
       ]}
     >

diff --git a/packages/vkui/src/components/Header/Header.module.css b/packages/vkui/src/components/Header/Header.module.css
@@ -67,7 +67,6 @@
 .contentMultiline {
   white-space: initial;
   word-break: break-word;
-  flex-grow: 1;
 }
 
 .subtitle {

diff --git a/packages/vkui/src/components/SimpleCell/SimpleCell.e2e-playground.tsx b/packages/vkui/src/components/SimpleCell/SimpleCell.e2e-playground.tsx
@@ -79,7 +79,19 @@ export const SimpleCellPlayground = (props: ComponentPlaygroundProps) => {
           ],
           badgeBeforeTitle: [<Icon20AddCircleFillBlue key="leftBadge" />],
           badgeAfterTitle: [<Icon12Verified key="rightBadge" />],
-          multiline: [true, false],
+        },
+        {
+          children: [
+            'Very long children Very long children Very long children Very long children Very long children Very long children Very long children Very long children Very long children Very long children Very long children Very long children',
+          ],
+          subtitle: [
+            'Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long children Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle Very long subtitle',
+          ],
+          badgeAfterTitle: [<Icon12Verified key="rightBadge" />],
+          badgeAfterSubtitle: [
+            <Icon12Fire key="iconFire" fill="var(--vkui--color_icon_negative)" />,
+          ],
+          multiline: [false, true],
         },
         {
           children: ['Title'],

diff --git a/packages/vkui/src/components/SimpleCell/SimpleCell.module.css b/packages/vkui/src/components/SimpleCell/SimpleCell.module.css
@@ -78,11 +78,7 @@
   display: flex;
   align-content: flex-start;
   align-items: center;
-  justify-content: space-between;
   max-inline-size: 100%;
-}
-
-.host:not(.mult) .content {
   justify-content: flex-start;
 }
 
@@ -95,7 +91,7 @@
 
 .mult .children,
 .mult .subtitle {
-  flex: 1 1 auto;
+  flex: 0 1 auto;
 }
 
 .badge {