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

Author: EldarMuhamethanov

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],
         },
       ]}
     >

packages/vkui/src/components/Header/Header.module.css

@@ -67,7 +67,6 @@
 .contentMultiline {
   white-space: initial;
   word-break: break-word;
-  flex-grow: 1;
 }
 
 .subtitle {

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'],

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 {