feat: tighten spacing between completed turns and user messages
- Assistant turn bottom padding pb-8 -> pb-2, desktop user message top padding pt-6 -> pt-4 (footer-to-bubble gap 60px -> 28px) - Drop the recap note's -mt-6 that compensated the old large padding
This commit is contained in:
@@ -1026,8 +1026,8 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
|
|||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
'group w-full',
|
'group w-full',
|
||||||
isUser ? (isMobile ? 'pt-2' : 'pt-6') : assistantTopPaddingClass,
|
isUser ? (isMobile ? 'pt-2' : 'pt-4') : assistantTopPaddingClass,
|
||||||
isUser ? 'pb-0' : (isFollowedByAssistant || nextIsHiddenUserMessage) ? 'pb-0' : 'pb-8'
|
isUser ? 'pb-0' : (isFollowedByAssistant || nextIsHiddenUserMessage) ? 'pb-0' : 'pb-2'
|
||||||
)}
|
)}
|
||||||
id={`message-${message.info.id}`}
|
id={`message-${message.info.id}`}
|
||||||
data-message-id={message.info.id}
|
data-message-id={message.info.id}
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ export const SessionRecapNote: React.FC<SessionRecapNoteProps> = React.memo(({ s
|
|||||||
return (
|
return (
|
||||||
<div className="chat-message-column">
|
<div className="chat-message-column">
|
||||||
{/* The last assistant turn carries pb-8 — pull the recap up into that gap. */}
|
{/* The last assistant turn carries pb-8 — pull the recap up into that gap. */}
|
||||||
<div className="-mt-6" aria-label={t('chat.recap.aria')}>
|
<div aria-label={t('chat.recap.aria')}>
|
||||||
<span className={`typography-meta text-muted-foreground/70 ${isMobile ? 'line-clamp-4' : 'line-clamp-2'}`}>
|
<span className={`typography-meta text-muted-foreground/70 ${isMobile ? 'line-clamp-4' : 'line-clamp-2'}`}>
|
||||||
<span className="italic text-muted-foreground/50">{t('chat.recap.label')} </span>
|
<span className="italic text-muted-foreground/50">{t('chat.recap.label')} </span>
|
||||||
{visibleRecap}
|
{visibleRecap}
|
||||||
|
|||||||
Reference in New Issue
Block a user