Robotail/Corp
Robotail/Corp
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish mobile chat composer layout

Browse Source
This commit is contained in:
lizerk 2026-04-03 12:25:01 +03:00
parent 4fb637e153
commit 5100851481
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/messages/[chatId]/page.tsx
View File

@ -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">

6
frontend/src/components/messages/MessageComposer.tsx
View File

@ -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 ? "Сохранить сообщение" : "Отправить сообщение"}
>