From ee28a7b1dbcb827bc147556cc291ebf0c27ed776 Mon Sep 17 00:00:00 2001
From: lendry <lendry@lendry1.ru>
Date: Sat, 27 Jun 2026 00:41:03 +0300
Subject: [PATCH] mobile adaptation

---
 .../components/family/family-group-view.tsx   | 108 +++++++++++-------
 .../components/family/mini-family-chat.tsx    |   5 +
 apps/frontend/components/id/shell.tsx         |  24 ++--
 3 files changed, 86 insertions(+), 51 deletions(-)

diff --git a/apps/frontend/components/family/family-group-view.tsx b/apps/frontend/components/family/family-group-view.tsx
index 809d047..4e7ab5b 100644
--- a/apps/frontend/components/family/family-group-view.tsx
+++ b/apps/frontend/components/family/family-group-view.tsx
@@ -58,6 +58,8 @@ import { InlineEditableTitle } from '@/components/chat/inline-editable-title';
 import { RepliedMessagePreview, scrollToChatMessage } from '@/components/chat/replied-message-preview';
 import { TypingIndicator } from '@/components/chat/typing-indicator';
 import { VoiceMessagePlayer } from '@/components/chat/voice-message-player';
+import { NotificationBell } from '@/components/notifications/notification-bell';
+import { UserMenu } from '@/components/id/user-menu';
 import { UserAvatar } from '@/components/id/user-avatar';
 import { useAuth } from '@/components/id/auth-provider';
 import { useToast } from '@/components/id/toast-provider';
@@ -1472,29 +1474,44 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
   }
 
   if (!isReady || loading) {
-    return <div className="py-20 text-center text-[#667085]">Загрузка семьи...</div>;
+    return (
+      <div className="flex h-[calc(100dvh-4.5rem-env(safe-area-inset-bottom))] items-center justify-center text-[#667085] lg:h-auto lg:py-20">
+        Загрузка семьи...
+      </div>
+    );
   }
 
   return (
     <div
       className={cn(
-        'flex overflow-hidden bg-[#eef2f8]',
-        'h-[calc(100dvh-3.5rem-env(safe-area-inset-bottom)-4.5rem)] min-h-0 lg:h-[calc(100vh-120px)] lg:min-h-[640px]',
+        'flex w-full min-w-0 max-w-full overflow-hidden bg-[#eef2f8]',
+        'h-[calc(100dvh-4.5rem-env(safe-area-inset-bottom))] min-h-0 lg:h-[calc(100vh-120px)] lg:min-h-[640px]',
+        'pt-[env(safe-area-inset-top)] lg:pt-0',
         'rounded-none border-0 lg:rounded-[28px] lg:border lg:border-[#eceef4]'
       )}
     >
       <aside
         className={cn(
-          'flex shrink-0 flex-col border-r border-[#e4e8ef] bg-white',
-          'w-full lg:w-[300px]',
+          'flex min-w-0 max-w-full flex-col overflow-hidden border-r border-[#e4e8ef] bg-white',
+          'w-full lg:w-[300px] lg:shrink-0',
           mobileChatOpen ? 'hidden lg:flex' : 'flex'
         )}
       >
-        <div className="border-b border-[#eceef4] p-4">
-          <button type="button" className="mb-3 flex items-center gap-2 text-sm text-[#667085]" onClick={() => router.push('/family')}>
-            <ArrowLeft className="h-4 w-4" />
-            Все семьи
-          </button>
+        <div className="shrink-0 border-b border-[#eceef4] p-3 sm:p-4">
+          <div className="mb-3 flex items-center justify-between gap-2">
+            <button
+              type="button"
+              className="flex min-w-0 items-center gap-2 text-sm text-[#667085]"
+              onClick={() => router.push('/family')}
+            >
+              <ArrowLeft className="h-4 w-4 shrink-0" />
+              <span className="truncate">Все семьи</span>
+            </button>
+            <div className="flex shrink-0 items-center gap-1 lg:hidden">
+              <NotificationBell />
+              <UserMenu className="border-0 bg-transparent p-0 pr-0 shadow-none" />
+            </div>
+          </div>
           <div className="flex items-center gap-3">
             <FamilySidebarAvatar
               groupId={groupId}
@@ -1513,15 +1530,15 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
             </div>
           </div>
           <div className="mt-3 flex gap-2">
-            <Button size="sm" variant="secondary" className="flex-1 rounded-xl" onClick={() => setInviteOpen(true)}>
-              <UserPlus className="mr-1 h-4 w-4" />
+            <Button size="sm" variant="secondary" className="h-10 flex-1 rounded-xl text-sm" onClick={() => setInviteOpen(true)}>
+              <UserPlus className="mr-1 h-4 w-4 shrink-0" />
               Пригласить
             </Button>
           </div>
           <button
             type="button"
             onClick={() => setFamilyMembersOpen(true)}
-            className="mt-3 flex w-full items-center gap-3 rounded-2xl bg-[#f4f5f8] px-3 py-3 text-left transition hover:bg-[#eceef4]"
+            className="mt-3 flex w-full min-w-0 items-center gap-3 rounded-2xl bg-[#f4f5f8] px-3 py-2.5 text-left transition hover:bg-[#eceef4] sm:py-3"
           >
             <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#3390ec]/10 text-[#3390ec]">
               <Users className="h-5 w-5" />
@@ -1535,45 +1552,53 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
             </div>
           </button>
         </div>
-        <div className="flex items-center justify-between px-4 py-3">
+        <div className="flex shrink-0 items-center justify-between px-3 py-2.5 sm:px-4 sm:py-3">
           <p className="text-sm font-semibold text-[#667085]">Чаты</p>
-          <Button size="sm" variant="ghost" className="h-8 w-8 rounded-xl p-0" onClick={() => setCreateRoomOpen(true)}>
+          <Button size="sm" variant="ghost" className="h-8 w-8 shrink-0 rounded-xl p-0" onClick={() => setCreateRoomOpen(true)}>
             <Plus className="h-4 w-4" />
           </Button>
         </div>
-        <div className="flex-1 overflow-y-auto">
-          {rooms.map((room) => (
+        <div className="min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain">
+          {rooms.map((room) => {
+            const roomLabel = user ? roomDisplayLabel(room, user.id) : room.name;
+            const preview =
+              getChatListPreviewText(room.lastMessage) || (room.type === 'GENERAL' ? 'Общий чат семьи' : 'Нет сообщений');
+            return (
             <div
               key={room.id}
               className={cn(
-                'group flex items-stretch transition hover:bg-[#f7f9fc]',
+                'group relative min-w-0 overflow-hidden transition hover:bg-[#f7f9fc]',
                 activeRoomId === room.id && 'bg-[#3390ec]/10'
               )}
             >
               <button
                 type="button"
                 onClick={() => setActiveRoomId(room.id)}
-                className="flex min-w-0 flex-1 items-start gap-3 px-4 py-3 text-left"
+                className="flex w-full min-w-0 items-start gap-3 py-3 pl-3 pr-11 text-left sm:pl-4 sm:pr-12"
               >
-                <ChatRoomAvatarDisplay room={room} viewerUserId={user?.id ?? ''} token={token} />
-                <div className="min-w-0 flex-1">
-                  <div className="flex items-center justify-between gap-2">
-                    <p className="flex min-w-0 items-center gap-1 truncate font-medium">
-                      <span className="truncate">{user ? roomDisplayLabel(room, user.id) : room.name}</span>
-                      {room.peerLeftFamily ? (
-                        <span className="shrink-0 rounded-md bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-700">
-                          не в семье
-                        </span>
-                      ) : null}
-                      {room.isPinned ? <Pin className="h-3.5 w-3.5 shrink-0 fill-[#8a8f9e] text-[#8a8f9e]" /> : null}
-                    </p>
+                <div className="shrink-0">
+                  <ChatRoomAvatarDisplay room={room} viewerUserId={user?.id ?? ''} token={token} size="sm" />
+                </div>
+                <div className="min-w-0 flex-1 overflow-hidden">
+                  <div className="flex items-center gap-2">
+                    <span className="min-w-0 flex-1 truncate text-[15px] font-medium leading-tight">{roomLabel}</span>
                     {room.lastMessage ? (
-                      <span className="shrink-0 text-[11px] text-[#a8adbc]">{formatMessageTime(room.lastMessage.createdAt)}</span>
+                      <span className="shrink-0 tabular-nums text-[11px] leading-none text-[#a8adbc]">
+                        {formatMessageTime(room.lastMessage.createdAt)}
+                      </span>
                     ) : null}
                   </div>
-                  <p className="truncate text-sm text-[#667085]">
-                    {getChatListPreviewText(room.lastMessage) || (room.type === 'GENERAL' ? 'Общий чат семьи' : 'Нет сообщений')}
-                  </p>
+                  <div className="mt-1 flex min-w-0 items-center gap-1.5">
+                    {room.peerLeftFamily ? (
+                      <span className="shrink-0 rounded bg-amber-50 px-1 py-0.5 text-[10px] font-medium leading-none text-amber-700">
+                        не в семье
+                      </span>
+                    ) : null}
+                    {room.isPinned ? (
+                      <Pin className="h-3 w-3 shrink-0 fill-[#8a8f9e] text-[#8a8f9e] lg:hidden" />
+                    ) : null}
+                    <p className="min-w-0 flex-1 truncate text-sm leading-snug text-[#667085]">{preview}</p>
+                  </div>
                 </div>
               </button>
               <button
@@ -1581,7 +1606,7 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
                 aria-label={room.isPinned ? 'Открепить чат' : 'Закрепить чат'}
                 disabled={pinningRoomId === room.id}
                 className={cn(
-                  'flex h-8 w-8 shrink-0 self-center items-center justify-center rounded-lg text-[#8a8f9e] transition hover:bg-[#eceef4] hover:text-[#667085]',
+                  'absolute right-1 top-1/2 hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg text-[#8a8f9e] transition hover:bg-[#eceef4] hover:text-[#667085] sm:right-2 lg:flex',
                   room.isPinned ? 'opacity-100' : 'opacity-0 group-hover:opacity-100',
                   pinningRoomId === room.id && 'opacity-100'
                 )}
@@ -1594,13 +1619,14 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
                 )}
               </button>
             </div>
-          ))}
+          );
+          })}
         </div>
       </aside>
 
       <section
         className={cn(
-          'min-w-0 flex-1 flex-col bg-[#e6ebf2]',
+          'min-w-0 max-w-full flex-1 flex-col overflow-hidden bg-[#e6ebf2]',
           mobileChatOpen ? 'flex' : 'hidden lg:flex'
         )}
       >
@@ -1644,9 +1670,9 @@ export function FamilyGroupView({ groupId }: { groupId: string }) {
                     <ChatRoomAvatarDisplay room={activeRoom} viewerUserId={user?.id ?? ''} token={token} />
                   </div>
                 )}
-                <button type="button" className="min-w-0 flex-1 text-left" onClick={() => setMembersOpen(true)}>
-                  <h2 className="font-semibold">{activeRoomTitle}</h2>
-                  <p className="text-xs text-[#667085]">
+                <button type="button" className="min-w-0 flex-1 overflow-hidden text-left" onClick={() => setMembersOpen(true)}>
+                  <h2 className="truncate text-base font-semibold sm:text-lg">{activeRoomTitle}</h2>
+                  <p className="truncate text-xs text-[#667085]">
                     {activeRoomIsBot ? (
                       <>🤖 Бот · {activeRoom.members.length} участников</>
                     ) : activeRoomIsE2E ? (
diff --git a/apps/frontend/components/family/mini-family-chat.tsx b/apps/frontend/components/family/mini-family-chat.tsx
index 00a79dc..d6b266f 100644
--- a/apps/frontend/components/family/mini-family-chat.tsx
+++ b/apps/frontend/components/family/mini-family-chat.tsx
@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import { ArrowLeft, BarChart3, CalendarDays, ImageIcon, Loader2, MessageCircle, Paperclip, Search, Send, Settings, Smile, Trash2, X } from 'lucide-react';
 import { AvatarWithPresence } from '@/components/family/avatar-with-presence';
 import { FamilyBotChat, BotMiniAppSheet } from '@/components/family/family-bot-chat';
@@ -704,7 +705,11 @@ export function MiniFamilyChat() {
     [group?.members, user?.id]
   );
 
+  const pathname = usePathname();
+  const onFamilyChatPage = Boolean(pathname && /^\/family\/[^/]+$/.test(pathname));
+
   if (!user || !token || isPinLocked) return null;
+  if (onFamilyChatPage) return null;
 
   return (
     <>
diff --git a/apps/frontend/components/id/shell.tsx b/apps/frontend/components/id/shell.tsx
index a7a5d37..624bef0 100644
--- a/apps/frontend/components/id/shell.tsx
+++ b/apps/frontend/components/id/shell.tsx
@@ -27,23 +27,27 @@ export function IdShell({
       <EmojiSpriteProvider />
       <div className="min-h-screen overflow-x-hidden bg-white">
         <Sidebar active={active} />
-        <div className="fixed left-0 right-0 top-0 z-40 flex items-center justify-between border-b border-[#eceef4] bg-white/95 px-4 py-3 backdrop-blur lg:hidden">
-          <Link href="/" className="shrink-0">
-            <BrandLogo size="sm" variant="dark" />
-          </Link>
-          <div className="flex items-center gap-2">
-            <NotificationBell />
-            <UserMenu />
+        {!fullBleed ? (
+          <div className="fixed left-0 right-0 top-0 z-40 flex items-center justify-between border-b border-[#eceef4] bg-white/95 px-4 py-3 backdrop-blur lg:hidden">
+            <Link href="/" className="shrink-0">
+              <BrandLogo size="sm" variant="dark" />
+            </Link>
+            <div className="flex items-center gap-2">
+              <NotificationBell />
+              <UserMenu />
+            </div>
           </div>
-        </div>
+        ) : null}
         <div className="fixed right-4 top-4 z-40 hidden items-center gap-2 lg:right-8 lg:top-6 lg:flex">
           <NotificationBell />
           <UserMenu />
         </div>
         <main
           className={cn(
-            'pb-[calc(4.5rem+env(safe-area-inset-bottom))] pt-14 lg:pb-8 lg:pt-8 lg:pl-[220px] lg:pr-8',
-            fullBleed && 'px-0 pb-[calc(4.5rem+env(safe-area-inset-bottom))] pt-14 lg:px-8'
+            'pb-[calc(4.5rem+env(safe-area-inset-bottom))] lg:pb-8 lg:pt-8 lg:pl-[220px] lg:pr-8',
+            fullBleed
+              ? 'px-0 pt-0 lg:px-8'
+              : 'px-0 pt-14 lg:px-0'
           )}
         >
           <div