From deca5a84ff4858489293ee75644e397c095052b1 Mon Sep 17 00:00:00 2001
From: lizerk <lizerk-dev@gmail.com>
Date: Fri, 3 Apr 2026 12:42:41 +0300
Subject: [PATCH] Polish mobile chat layout spacing

---
 frontend/next-env.d.ts                                | 2 +-
 frontend/src/app/messages/[chatId]/page.tsx           | 4 ++--
 frontend/src/components/AppShell.tsx                  | 2 +-
 frontend/src/components/messages/ChatDialogHeader.tsx | 2 +-
 frontend/src/components/messages/MessageComposer.tsx  | 6 +++---
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/next-env.d.ts b/frontend/next-env.d.ts
index c4b7818f..9edff1c7 100644
--- a/frontend/next-env.d.ts
+++ b/frontend/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/frontend/src/app/messages/[chatId]/page.tsx b/frontend/src/app/messages/[chatId]/page.tsx
index d25f8390..cdb61302 100644
--- a/frontend/src/app/messages/[chatId]/page.tsx
+++ b/frontend/src/app/messages/[chatId]/page.tsx
@@ -1446,7 +1446,7 @@ export default function MessageDialogPage() {
         </div>
       ) : (
         <div className="min-h-0 h-full lg:sticky lg:top-22 lg:h-[calc(100dvh-7.5rem)]">
-        <section className="flex h-full min-h-0 flex-col overflow-hidden lg:bg-white lg:rounded-2xl lg:p-5 lg:shadow-sm lg:ring-1 lg:ring-gray-100">
+        <section className="flex h-full min-h-0 flex-col overflow-hidden lg:bg-white lg:rounded-xl lg:p-4 lg:ring-1 lg:ring-gray-100">
           {chat ? (
             <>
               <ChatDialogHeader
@@ -1536,7 +1536,7 @@ export default function MessageDialogPage() {
                   </div>
                 )}
 
-                <div className="shrink-0 -mx-4 border-t border-gray-100 bg-white px-4 pt-3 pb-[calc(env(safe-area-inset-bottom)+0.25rem)] sm:-mx-8 sm:px-8 lg:mx-0 lg:px-0 lg:pb-0">
+                <div className="shrink-0 border-t border-gray-100 bg-white px-4 pt-3 pb-[calc(env(safe-area-inset-bottom)+0.25rem)] lg:px-0 lg:pb-0">
                   {isTyping && (
                     <div className="mb-2 flex items-center gap-2 text-xs text-gray-500 italic">
                       <div className="flex gap-1">
diff --git a/frontend/src/components/AppShell.tsx b/frontend/src/components/AppShell.tsx
index fd8530b8..3856ba19 100644
--- a/frontend/src/components/AppShell.tsx
+++ b/frontend/src/components/AppShell.tsx
@@ -425,7 +425,7 @@ export function AppShell({ children }: AppShellProps) {
   return (
     <div className={`${isMessageDialogPage ? 'h-[100dvh] overflow-hidden' : 'min-h-screen'} bg-gradient-to-b from-sky-50 via-white to-white text-gray-900 flex flex-col`}>
         <Header onOpenLeftNav={() => setIsMobileLeftNavOpen(true)} onOpenCalendar={() => setIsMobileCalendarOpen(true)} />
-        <div className="mx-auto flex w-full flex-1 min-h-0 max-w-6xl gap-6 px-4 py-4 sm:px-8 lg:py-8">
+        <div className={`mx-auto flex w-full flex-1 min-h-0 max-w-6xl ${isMessageDialogPage ? 'gap-0 px-0 py-0 lg:gap-6 lg:px-8 lg:py-8' : 'gap-6 px-4 py-4 sm:px-8 lg:py-8'}`}>
           <LeftNav />
           <main className={`flex-1 min-w-0 min-h-0 space-y-6 ${isMessageDialogPage ? 'overflow-visible' : ''}`}>{children}</main>
           <CalendarSidebar
diff --git a/frontend/src/components/messages/ChatDialogHeader.tsx b/frontend/src/components/messages/ChatDialogHeader.tsx
index 380f0d7c..d2cf2a37 100644
--- a/frontend/src/components/messages/ChatDialogHeader.tsx
+++ b/frontend/src/components/messages/ChatDialogHeader.tsx
@@ -50,7 +50,7 @@ export default function ChatDialogHeader({
   const title = getChatTitle(chat, currentUserId);
 
   return (
-    <header className="flex shrink-0 items-center justify-between gap-3 border-b border-gray-100 pb-3">
+    <header className="flex shrink-0 items-center justify-between gap-3 border-b border-gray-100 px-4 pt-3 pb-3 lg:px-0 lg:pt-0">
       <div className="flex items-center gap-3">
         <div className="flex h-11 w-11 items-center justify-center overflow-hidden rounded-full bg-sky-400 text-sm font-semibold text-white">
           {avatar ? (
diff --git a/frontend/src/components/messages/MessageComposer.tsx b/frontend/src/components/messages/MessageComposer.tsx
index 05e50685..0b52ef17 100644
--- a/frontend/src/components/messages/MessageComposer.tsx
+++ b/frontend/src/components/messages/MessageComposer.tsx
@@ -4,7 +4,7 @@ import { useLayoutEffect, useState } from "react";
 import type React from "react";
 import { Paperclip, Send, Smile, X } from "lucide-react";
 
-const MIN_COMPOSER_HEIGHT = 40;
+const MIN_COMPOSER_HEIGHT = 38;
 const MAX_COMPOSER_HEIGHT = 128;
 
 type ReplyTarget = {
@@ -146,7 +146,7 @@ export default function MessageComposer({
           />
           <div
             className={`relative min-w-0 flex-1 overflow-hidden border border-gray-200 bg-gray-50 shadow-[inset_0_1px_0_rgba(255,255,255,0.7)] transition focus-within:border-sky-500 focus-within:bg-white focus-within:ring-2 focus-within:ring-sky-100 ${
-              isExpanded ? "rounded-[1.5rem]" : "rounded-full"
+              isExpanded ? "rounded-[1.5rem]" : "h-10 rounded-full"
             }`}
             data-composer-emoji="true"
           >
@@ -220,7 +220,7 @@ export default function MessageComposer({
             type="button"
             onClick={onSend}
             disabled={sending || !canSend}
-            className="inline-flex h-[42px] w-[42px] shrink-0 items-center justify-center rounded-full bg-sky-500 text-white leading-none shadow-sm shadow-sky-200/70 transition hover:bg-sky-600 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-sky-100 disabled:cursor-not-allowed disabled:border disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-400 disabled:shadow-none disabled:opacity-100"
+            className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-sky-500 text-white leading-none shadow-sm shadow-sky-200/70 transition hover:bg-sky-600 active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-sky-100 disabled:cursor-not-allowed disabled:border disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-400 disabled:shadow-none disabled:opacity-100"
             title={editingMessageId ? "Сохранить" : "Отправить"}
             aria-label={editingMessageId ? "Сохранить сообщение" : "Отправить сообщение"}
           >