From 70e7c3737268012b0fb7bb2a98fa80687228a1ab Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Sun, 19 Jul 2026 23:19:02 +0300
Subject: [PATCH] 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
---
 packages/ui/src/components/chat/ChatMessage.tsx        | 4 ++--
 packages/ui/src/components/chat/SessionRecapSpacer.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/chat/ChatMessage.tsx b/packages/ui/src/components/chat/ChatMessage.tsx
index ae5bbc1f..476e7457 100644
--- a/packages/ui/src/components/chat/ChatMessage.tsx
+++ b/packages/ui/src/components/chat/ChatMessage.tsx
@@ -1026,8 +1026,8 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
             <div
                 className={cn(
                     'group w-full',
-                    isUser ? (isMobile ? 'pt-2' : 'pt-6') : assistantTopPaddingClass,
-                    isUser ? 'pb-0' : (isFollowedByAssistant || nextIsHiddenUserMessage) ? 'pb-0' : 'pb-8'
+                    isUser ? (isMobile ? 'pt-2' : 'pt-4') : assistantTopPaddingClass,
+                    isUser ? 'pb-0' : (isFollowedByAssistant || nextIsHiddenUserMessage) ? 'pb-0' : 'pb-2'
                 )}
                 id={`message-${message.info.id}`}
                 data-message-id={message.info.id}
diff --git a/packages/ui/src/components/chat/SessionRecapSpacer.tsx b/packages/ui/src/components/chat/SessionRecapSpacer.tsx
index 8cb990aa..dc97ac52 100644
--- a/packages/ui/src/components/chat/SessionRecapSpacer.tsx
+++ b/packages/ui/src/components/chat/SessionRecapSpacer.tsx
@@ -22,7 +22,7 @@ export const SessionRecapNote: React.FC<SessionRecapNoteProps> = React.memo(({ s
   return (
     <div className="chat-message-column">
       {/* 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="italic text-muted-foreground/50">{t('chat.recap.label')} </span>
           {visibleRecap}