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

Polish mobile chat layout spacing

Browse Source
This commit is contained in:
lizerk 2026-04-03 12:42:41 +03:00
parent 5100851481
commit deca5a84ff
5 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/next-env.d.ts vendored
View File

@ -1,6 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
import "./.next/dev/types/routes.d.ts";
import "./.next/types/routes.d.ts";
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

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

@ -1446,7 +1446,7 @@ export default function MessageDialogPage() {
</div>
) : (
<div className="min-h-0 h-full lg:sticky lg:top-22 lg:h-[calc(100dvh-7.5rem)]">
<section className="flex h-full min-h-0 flex-col overflow-hidden lg:bg-white lg:rounded-2xl lg:p-5 lg:shadow-sm lg:ring-1 lg:ring-gray-100">
<section className="flex h-full min-h-0 flex-col overflow-hidden lg:bg-white lg:rounded-xl lg:p-4 lg:ring-1 lg:ring-gray-100">
{chat ? (
<>
<ChatDialogHeader
@ -1536,7 +1536,7 @@ export default function MessageDialogPage() {
</div>
)}
<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">
<div className="shrink-0 border-t border-gray-100 bg-white px-4 pt-3 pb-[calc(env(safe-area-inset-bottom)+0.25rem)] 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">

2
frontend/src/components/AppShell.tsx
View File

@ -425,7 +425,7 @@ export function AppShell({ children }: AppShellProps) {
return (
<div className={`${isMessageDialogPage ? 'h-[100dvh] overflow-hidden' : 'min-h-screen'} bg-gradient-to-b from-sky-50 via-white to-white text-gray-900 flex flex-col`}>
<Header onOpenLeftNav={() => setIsMobileLeftNavOpen(true)} onOpenCalendar={() => setIsMobileCalendarOpen(true)} />
<div className="mx-auto flex w-full flex-1 min-h-0 max-w-6xl gap-6 px-4 py-4 sm:px-8 lg:py-8">
<div className={`mx-auto flex w-full flex-1 min-h-0 max-w-6xl ${isMessageDialogPage ? 'gap-0 px-0 py-0 lg:gap-6 lg:px-8 lg:py-8' : 'gap-6 px-4 py-4 sm:px-8 lg:py-8'}`}>
<LeftNav />
<main className={`flex-1 min-w-0 min-h-0 space-y-6 ${isMessageDialogPage ? 'overflow-visible' : ''}`}>{children}</main>
<CalendarSidebar

2
frontend/src/components/messages/ChatDialogHeader.tsx
View File

@ -50,7 +50,7 @@ export default function ChatDialogHeader({
const title = getChatTitle(chat, currentUserId);
return (
<header className="flex shrink-0 items-center justify-between gap-3 border-b border-gray-100 pb-3">
<header className="flex shrink-0 items-center justify-between gap-3 border-b border-gray-100 px-4 pt-3 pb-3 lg:px-0 lg:pt-0">
<div className="flex items-center gap-3">
<div className="flex h-11 w-11 items-center justify-center overflow-hidden rounded-full bg-sky-400 text-sm font-semibold text-white">
{avatar ? (

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 = 40;
const MIN_COMPOSER_HEIGHT = 38;
const MAX_COMPOSER_HEIGHT = 128;
type ReplyTarget = {
@ -146,7 +146,7 @@ export default function MessageComposer({
/>
<div
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"
isExpanded ? "rounded-[1.5rem]" : "h-10 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 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"
className="inline-flex h-10 w-10 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 ? "Сохранить сообщение" : "Отправить сообщение"}
>