From a1436ca27f1e4d46e03b9c57cfd72585b34ac639 Mon Sep 17 00:00:00 2001
From: benya <benya@daemonlord.ru>
Date: Sun, 8 Mar 2026 19:28:38 +0300
Subject: [PATCH] web(composer): center glyphs inside round action buttons

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

diff --git a/web/src/components/MessageComposer.tsx b/web/src/components/MessageComposer.tsx
index 2d249c5..c7baa0e 100644
--- a/web/src/components/MessageComposer.tsx
+++ b/web/src/components/MessageComposer.tsx
@@ -1132,13 +1132,13 @@ export function MessageComposer() {
       <div className="mb-2 flex items-end gap-1.5 sm:gap-2">
         <div className="relative">
           <button
-            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"
+            className="inline-flex h-10 w-10 items-center justify-center rounded-full bg-slate-700/85 text-sm font-semibold leading-none text-slate-200 hover:bg-slate-700 disabled:opacity-60 sm:h-[42px] sm:w-[42px]"
             disabled={isUploading || recordingState !== "idle" || !canSendInActiveChat}
             onClick={() => setShowAttachMenu((v) => !v)}
             type="button"
           >
-            <span className="hidden min-[390px]:inline">📎</span>
-            <span className="inline min-[390px]:hidden">＋</span>
+            <span className="hidden min-[520px]:inline">📎</span>
+            <span className="inline min-[520px]:hidden">＋</span>
           </button>
           {showAttachMenu ? (
             <div className="absolute bottom-12 left-0 z-20 w-44 rounded-xl border border-slate-700/80 bg-slate-900/95 p-1.5 shadow-2xl">
@@ -1157,7 +1157,7 @@ export function MessageComposer() {
                 File
               </button>
               <button
-                className="hidden w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800 max-[389px]:block"
+                className="hidden w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800 max-[519px]:block"
                 onClick={() => {
                   setShowAttachMenu(false);
                   setShowGifMenu(false);
@@ -1169,7 +1169,7 @@ export function MessageComposer() {
                 Stickers
               </button>
               <button
-                className="hidden w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800 max-[389px]:block"
+                className="hidden w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800 max-[519px]:block"
                 onClick={() => {
                   setShowAttachMenu(false);
                   setShowStickerMenu(false);
@@ -1181,7 +1181,7 @@ export function MessageComposer() {
                 GIF
               </button>
               <button
-                className="hidden w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800 max-[389px]:block"
+                className="hidden w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800 max-[519px]:block"
                 onClick={() => {
                   setShowAttachMenu(false);
                   setShowStickerMenu(false);
@@ -1226,7 +1226,7 @@ export function MessageComposer() {
         </div>
 
         <button
-          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 disabled:opacity-60 min-[390px]:inline-flex sm:h-[42px] sm:min-w-[42px]"
+          className="hidden h-10 w-10 items-center justify-center rounded-full bg-slate-700/85 text-xs font-semibold leading-none text-slate-200 hover:bg-slate-700 disabled:opacity-60 min-[440px]:inline-flex sm:h-[42px] sm:w-[42px]"
           disabled={!canSendInActiveChat}
           onClick={() => {
             setShowGifMenu(false);
@@ -1239,7 +1239,7 @@ export function MessageComposer() {
         </button>
 
         <button
-          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 disabled:opacity-60 min-[390px]:inline-flex sm:h-[42px] sm:min-w-[42px]"
+          className="hidden h-10 w-10 items-center justify-center rounded-full bg-slate-700/85 text-xs font-semibold leading-none text-slate-200 hover:bg-slate-700 disabled:opacity-60 min-[500px]:inline-flex sm:h-[42px] sm:w-[42px]"
           disabled={!canSendInActiveChat}
           onClick={() => {
             setShowStickerMenu(false);
@@ -1252,7 +1252,7 @@ export function MessageComposer() {
         </button>
 
         <button
-          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 min-[390px]:inline-flex sm:h-[42px] sm:min-w-[42px]"
+          className="hidden h-10 w-10 items-center justify-center rounded-full bg-slate-700/85 text-xs font-semibold leading-none text-slate-200 hover:bg-slate-700 min-[560px]:inline-flex sm:h-[42px] sm:w-[42px]"
           onClick={() => setShowFormatMenu((v) => !v)}
           type="button"
           title="Text formatting"
@@ -1263,7 +1263,7 @@ export function MessageComposer() {
 
         <textarea
           ref={textareaRef}
-          className="min-h-[42px] min-w-[120px] 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"
+          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}
@@ -1282,7 +1282,7 @@ export function MessageComposer() {
 
         {hasTextToSend ? (
           <button
-            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"
+            className="inline-flex h-10 w-11 shrink-0 items-center justify-center rounded-full bg-sky-500 text-sm font-semibold leading-none text-slate-950 hover:bg-sky-400 disabled:opacity-60 sm:h-[42px] sm:w-[56px]"
             disabled={recordingState !== "idle" || !activeChatId || !canSendInActiveChat}
             onClick={handleSend}
             type="button"
@@ -1292,7 +1292,7 @@ export function MessageComposer() {
           </button>
         ) : (
           <button
-            className={`h-10 w-11 shrink-0 rounded-full px-2 text-sm font-semibold sm:h-[42px] sm:w-[56px] sm:px-3 ${
+            className={`inline-flex h-10 w-11 shrink-0 items-center justify-center rounded-full text-sm font-semibold leading-none sm:h-[42px] sm:w-[56px] ${
               recordingState === "idle" ? "bg-emerald-500 text-slate-950 hover:bg-emerald-400" : "bg-slate-700 text-slate-300"
             }`}
             disabled={isUploading || !activeChatId || !canSendInActiveChat}