benya/Messenger
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web(mobile): fix composer layout overflow on narrow screens
All checks were successful
CI / test (push) Successful in 34s
Details

Browse Source
This commit is contained in:
Alex
2026-03-08 19:08:55 +03:00
parent d069ff1121
commit f91a6493ff
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/components/MessageComposer.tsx
View File

@@ -1129,10 +1129,10 @@ export function MessageComposer() {
</div> </div>
) : null} ) : 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"> <div className="relative">
<button <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} disabled={isUploading || recordingState !== "idle" || !canSendInActiveChat}
onClick={() => setShowAttachMenu((v) => !v)} onClick={() => setShowAttachMenu((v) => !v)}
type="button" type="button"
@@ -1189,7 +1189,7 @@ export function MessageComposer() {
</div> </div>
<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} disabled={!canSendInActiveChat}
onClick={() => { onClick={() => {
setShowGifMenu(false); setShowGifMenu(false);
@@ -1202,7 +1202,7 @@ export function MessageComposer() {
</button> </button>
<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} disabled={!canSendInActiveChat}
onClick={() => { onClick={() => {
setShowStickerMenu(false); setShowStickerMenu(false);
@@ -1215,7 +1215,7 @@ export function MessageComposer() {
</button> </button>
<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)} onClick={() => setShowFormatMenu((v) => !v)}
type="button" type="button"
title="Text formatting" title="Text formatting"
@@ -1226,7 +1226,7 @@ export function MessageComposer() {
<textarea <textarea
ref={textareaRef} 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"} placeholder={canSendInActiveChat ? "Write a message..." : "Read-only channel"}
rows={1} rows={1}
value={text} value={text}
@@ -1245,7 +1245,7 @@ export function MessageComposer() {
{hasTextToSend ? ( {hasTextToSend ? (
<button <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} disabled={recordingState !== "idle" || !activeChatId || !canSendInActiveChat}
onClick={handleSend} onClick={handleSend}
type="button" type="button"
@@ -1255,7 +1255,7 @@ export function MessageComposer() {
</button> </button>
) : ( ) : (
<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" recordingState === "idle" ? "bg-emerald-500 text-slate-950 hover:bg-emerald-400" : "bg-slate-700 text-slate-300"
}`} }`}
disabled={isUploading || !activeChatId || !canSendInActiveChat} disabled={isUploading || !activeChatId || !canSendInActiveChat}