From 510085148193995d6aa0429270381f5888c93a1b Mon Sep 17 00:00:00 2001
From: lizerk <lizerk-dev@gmail.com>
Date: Fri, 3 Apr 2026 12:25:01 +0300
Subject: [PATCH] Polish mobile chat composer layout

---
 frontend/src/app/messages/[chatId]/page.tsx          | 2 +-
 frontend/src/components/messages/MessageComposer.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/messages/[chatId]/page.tsx b/frontend/src/app/messages/[chatId]/page.tsx
index a797b86b..d25f8390 100644
--- a/frontend/src/app/messages/[chatId]/page.tsx
+++ b/frontend/src/app/messages/[chatId]/page.tsx
@@ -1536,7 +1536,7 @@ export default function MessageDialogPage() {
                   </div>
                 )}
 
-                <div className="shrink-0 border-t border-gray-100 bg-white pt-3">
+                <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">
                   {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/messages/MessageComposer.tsx b/frontend/src/components/messages/MessageComposer.tsx
index 274d11f3..05e50685 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 = 42;
+const MIN_COMPOSER_HEIGHT = 40;
 const MAX_COMPOSER_HEIGHT = 128;
 
 type ReplyTarget = {
@@ -145,7 +145,7 @@ export default function MessageComposer({
             onChange={onFilesChange}
           />
           <div
-            className={`relative min-w-0 flex-1 overflow-hidden border border-gray-200 bg-gray-50 transition focus-within:border-sky-500 focus-within:bg-white focus-within:ring-2 focus-within:ring-sky-100 ${
+            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"
             }`}
             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 transition hover:bg-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-100 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:text-gray-400 disabled:opacity-100"
+            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"
             title={editingMessageId ? "Сохранить" : "Отправить"}
             aria-label={editingMessageId ? "Сохранить сообщение" : "Отправить сообщение"}
           >