fix(PullToRefresh): Stretch PullToRefresh horizontally

packages/vkui/src/components/PullToRefresh/PullToRefresh.e2e-playground.tsx

@@ -40,3 +40,27 @@ export const PullToRefreshPlayground = (
     </ComponentPlayground>
   );
 };
+
+export const PullToRefreshChildrenPositionPlayground = (props: ComponentPlaygroundProps) => {
+  return (
+    <ComponentPlayground {...props} platform="vkcom">
+      {({ ...props }: PullToRefreshProps) => (
+        <Div style={{ width: '300px', height: '500px', display: 'flex' }}>
+          <PullToRefresh {...props}>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                textAlign: 'center',
+                justifyContent: 'center',
+                flex: '1 0',
+              }}
+            >
+              Smaller content can be centered vertically
+            </div>
+          </PullToRefresh>
+        </Div>
+      )}
+    </ComponentPlayground>
+  );
+};

packages/vkui/src/components/PullToRefresh/PullToRefresh.e2e.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { test } from '@vkui-e2e/test';
-import { PullToRefreshPlayground } from './PullToRefresh.e2e-playground';
+import {
+  PullToRefreshChildrenPositionPlayground,
+  PullToRefreshPlayground,
+} from './PullToRefresh.e2e-playground';
 
 test.describe('PullToRefresh', () => {
   // we are interested in VKCOM only as we need to test here mostly
@@ -42,4 +45,18 @@ test.describe('PullToRefresh', () => {
 
     await expectScreenshotClippedToContent();
   });
+
+  test('takes whole parent height and allow smaller content to center vertically', async ({
+    page,
+    mount,
+    expectScreenshotClippedToContent,
+    componentPlaygroundProps,
+  }) => {
+    const result = await mount(
+      <PullToRefreshChildrenPositionPlayground {...componentPlaygroundProps} />,
+    );
+    await result.waitFor();
+    await page.evaluate(() => new Promise((resolve) => setTimeout(resolve, 500)));
+    await expectScreenshotClippedToContent();
+  });
 });

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

@@ -1,4 +1,6 @@
 .PullToRefresh {
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
 }
 
@@ -67,6 +69,9 @@
 }
 
 .PullToRefresh__content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
   overflow: hidden;
   transition: transform 400ms var(--vkui--animation_easing_platform);
 }