From b5ea37d57aebc5145148e72df9129d558d2f7e7c Mon Sep 17 00:00:00 2001
From: heaven <vojochatdev@gmail.com>
Date: Wed, 29 Apr 2026 22:30:39 +0300
Subject: [PATCH] feat(direct): use compact native phone layout for new chat to
 keep form fitted under the on-screen keyboard

---
 src/app/pages/client/direct/DirectCreate.tsx | 37 +++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/app/pages/client/direct/DirectCreate.tsx b/src/app/pages/client/direct/DirectCreate.tsx
index 440d6945..1d367bfe 100644
--- a/src/app/pages/client/direct/DirectCreate.tsx
+++ b/src/app/pages/client/direct/DirectCreate.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { Box, Icon, IconButton, Icons, Scroll } from 'folds';
+import { Box, Icon, IconButton, Icons, Scroll, Text, config } from 'folds';
 import { useTranslation } from 'react-i18next';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { getDirectCreateSearchParams } from '../../pathSearchParam';
@@ -18,11 +18,13 @@ import {
 } from '../../../components/page';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
 import { CreateChat } from '../../../features/create-chat';
+import { isNativePlatform } from '../../../utils/capacitor';
 
 export function DirectCreate() {
   const { t } = useTranslation();
   const mx = useMatrixClient();
   const screenSize = useScreenSizeContext();
+  const native = isNativePlatform();
 
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
@@ -39,6 +41,39 @@ export function DirectCreate() {
     }
   }, [mx, navigate, directs, userId]);
 
+  // Native phone (Capacitor + Mobile screen): compact layout — title goes into
+  // the back-arrow header, form sits directly below with light padding, no
+  // oversized hero whitespace. The on-screen keyboard otherwise pushed the
+  // centered hero layout into a visibly long scrollable area. Native tablets,
+  // desktop, and web (any size) keep the original hero-section layout.
+  if (native && screenSize === ScreenSize.Mobile) {
+    return (
+      <Page>
+        <PageHeader balance outlined={false}>
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <BackRouteHandler>
+              {(onBack) => (
+                <IconButton onClick={onBack}>
+                  <Icon src={Icons.ArrowLeft} />
+                </IconButton>
+              )}
+            </BackRouteHandler>
+            <Text size="H4" truncate>
+              {t('Direct.create_chat')}
+            </Text>
+          </Box>
+        </PageHeader>
+        <Box grow="Yes">
+          <Scroll size="0" hideTrack visibility="Hover">
+            <Box style={{ padding: config.space.S400 }}>
+              <CreateChat defaultUserId={userId} />
+            </Box>
+          </Scroll>
+        </Box>
+      </Page>
+    );
+  }
+
   return (
     <Page>
       {screenSize === ScreenSize.Mobile && (