From f91a6493ff5b32c70f28614fcffb0cca63be6bae Mon Sep 17 00:00:00 2001
From: benya <benya@daemonlord.ru>
Date: Sun, 8 Mar 2026 19:08:55 +0300
Subject: [PATCH] web(mobile): fix composer layout overflow on narrow screens

---
 web/src/components/MessageComposer.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/src/components/MessageComposer.tsx b/web/src/components/MessageComposer.tsx
index 2573608..5024a66 100644
--- a/web/src/components/MessageComposer.tsx
+++ b/web/src/components/MessageComposer.tsx
@@ -1129,10 +1129,10 @@ export function MessageComposer() {
         </div>
       ) : null}
 
-      <div className="mb-2 flex items-end gap-2">
+      <div className="mb-2 flex items-end gap-1.5 sm:gap-2">
         <div className="relative">
           <button
-            className="h-[42px] min-w-[42px] rounded-full bg-slate-700/85 px-3 text-sm font-semibold text-slate-200 hover:bg-slate-700 disabled:opacity-60"
+            className="h-10 min-w-10 rounded-full bg-slate-700/85 px-2.5 text-sm font-semibold text-slate-200 hover:bg-slate-700 disabled:opacity-60 sm:h-[42px] sm:min-w-[42px] sm:px-3"
             disabled={isUploading || recordingState !== "idle" || !canSendInActiveChat}
             onClick={() => setShowAttachMenu((v) => !v)}
             type="button"
@@ -1189,7 +1189,7 @@ export function MessageComposer() {
         </div>
 
         <button
-          className="h-[42px] min-w-[42px] rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700 disabled:opacity-60"
+          className="h-10 min-w-10 rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700 disabled:opacity-60 sm:h-[42px] sm:min-w-[42px]"
           disabled={!canSendInActiveChat}
           onClick={() => {
             setShowGifMenu(false);
@@ -1202,7 +1202,7 @@ export function MessageComposer() {
         </button>
 
         <button
-          className="h-[42px] min-w-[42px] rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700 disabled:opacity-60"
+          className="h-10 min-w-10 rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700 disabled:opacity-60 sm:h-[42px] sm:min-w-[42px]"
           disabled={!canSendInActiveChat}
           onClick={() => {
             setShowStickerMenu(false);
@@ -1215,7 +1215,7 @@ export function MessageComposer() {
         </button>
 
         <button
-          className="h-[42px] min-w-[42px] rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700"
+          className="hidden h-10 min-w-10 rounded-full bg-slate-700/85 px-2 text-xs font-semibold text-slate-200 hover:bg-slate-700 sm:inline-flex sm:h-[42px] sm:min-w-[42px]"
           onClick={() => setShowFormatMenu((v) => !v)}
           type="button"
           title="Text formatting"
@@ -1226,7 +1226,7 @@ export function MessageComposer() {
 
         <textarea
           ref={textareaRef}
-          className="min-h-[42px] max-h-40 flex-1 resize-y rounded-2xl border border-slate-700/80 bg-slate-800/80 px-4 py-2.5 text-sm outline-none placeholder:text-slate-400 focus:border-sky-500"
+          className="min-h-[42px] min-w-0 max-h-40 flex-1 resize-y rounded-2xl border border-slate-700/80 bg-slate-800/80 px-3 py-2.5 text-sm outline-none placeholder:text-slate-400 focus:border-sky-500 sm:px-4"
           placeholder={canSendInActiveChat ? "Write a message..." : "Read-only channel"}
           rows={1}
           value={text}
@@ -1245,7 +1245,7 @@ export function MessageComposer() {
 
         {hasTextToSend ? (
           <button
-            className="h-[42px] w-[56px] rounded-full bg-sky-500 px-3 text-sm font-semibold text-slate-950 hover:bg-sky-400 disabled:opacity-60"
+            className="h-10 w-11 shrink-0 rounded-full bg-sky-500 px-2 text-sm font-semibold text-slate-950 hover:bg-sky-400 disabled:opacity-60 sm:h-[42px] sm:w-[56px] sm:px-3"
             disabled={recordingState !== "idle" || !activeChatId || !canSendInActiveChat}
             onClick={handleSend}
             type="button"
@@ -1255,7 +1255,7 @@ export function MessageComposer() {
           </button>
         ) : (
           <button
-            className={`h-[42px] w-[56px] rounded-full px-3 text-sm font-semibold ${
+            className={`h-10 w-11 shrink-0 rounded-full px-2 text-sm font-semibold sm:h-[42px] sm:w-[56px] sm:px-3 ${
               recordingState === "idle" ? "bg-emerald-500 text-slate-950 hover:bg-emerald-400" : "bg-slate-700 text-slate-300"
             }`}
             disabled={isUploading || !activeChatId || !canSendInActiveChat}