From 86ae06beb67802536b91ba278fb129244a0c07f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=A5=D0=B0=D0=BB=D0=B8=D0=BC=D0=BE=D0=B2=20=D0=A0=D1=83?=
 =?UTF-8?q?=D1=81=D1=82=D0=B0=D0=BC?= <rhalimov@elveesneotek.com>
Date: Thu, 16 Apr 2026 23:48:36 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9E=D1=82=D1=81=D1=82=D1=83=D0=BF=D1=8B=20?=
 =?UTF-8?q?=D0=B2=20=D0=B1=D0=B0=D0=B1=D0=BB=D0=B0=D1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../chats/presentation/components/MessageBubble.tsx    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/client-web/src/modules/chats/presentation/components/MessageBubble.tsx b/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
index 242ff5f..e47c14f 100644
--- a/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
+++ b/client-web/src/modules/chats/presentation/components/MessageBubble.tsx
@@ -613,7 +613,7 @@ function MessageBubble({
 
               return (
               <div className={`
-                ${needsFrame ? `-mx-[14px] ${message.forwardedFrom || message.replyTo || message.storyId ? 'mt-2' : '-mt-[8px]'} ${message.content ? 'mb-2' : hasReactions ? 'mb-1' : '-mb-[8px]'}` : ''}
+                ${needsFrame ? `-mx-[14px] ${message.forwardedFrom || message.replyTo || message.storyId ? 'mt-2' : '-mt-[8px]'} ${message.content || hasVoice || hasAudio || hasFile || message.type === 'poll' ? 'mb-3' : hasReactions ? 'mb-1' : '-mb-[8px]'}` : ''}
                 ${isSingleGif ? 'max-w-[260px]' : ''}
                 overflow-hidden relative rounded-[1.25rem]
               `}>
@@ -709,7 +709,7 @@ function MessageBubble({
 
             {/* Голосовое - Optimized Kinetic Layout */}
             {hasVoice && (
-              <div className="flex items-center gap-3 min-w-[200px] py-0.5">
+              <div className={`flex items-center gap-3 min-w-[200px] py-0.5 ${hasImage || hasVideo || message.forwardedFrom || message.replyTo || message.storyId ? 'mt-3' : ''}`}>
                 <audio
                   ref={audioRef}
                   src={media.find((m) => m.type === 'voice')?.url}
@@ -778,7 +778,7 @@ function MessageBubble({
               };
               
               return (
-                <div className="min-w-[220px]">
+                <div className={`min-w-[220px] ${hasImage || hasVideo || hasVoice || message.forwardedFrom || message.replyTo || message.storyId ? 'mt-3' : ''}`}>
                   {audioMedia?.filename && (
                     <div className="flex items-center gap-2 mb-2 min-w-0">
                       <Volume2 size={14} className={isMine ? 'text-[#0a0a0a]/60' : 'text-zinc-400'} />
@@ -875,7 +875,7 @@ function MessageBubble({
                       target="_blank"
                       rel="noopener noreferrer"
                       className={`flex items-center gap-3 p-3 rounded-2xl ${isMine ? 'bg-[#0a0a0a]/5 hover:bg-[#0a0a0a]/10' : 'bg-zinc-900/50 hover:bg-zinc-800/80 border border-white/5'
-                        } transition-all mb-1 group/file`}
+                        } transition-all mb-1 group/file ${hasImage || hasVideo || hasVoice || hasAudio || message.forwardedFrom || message.replyTo || message.storyId ? 'mt-3' : ''}`}
                     >
                       <div className={`w-11 h-11 rounded-xl flex items-center justify-center ${isMine ? 'bg-[#0a0a0a]/10' : 'bg-primary/20'
                         } group-hover/file:scale-110 transition-transform`}>
@@ -1034,7 +1034,7 @@ function MessageBubble({
               const onlyEmojiRegex = /^[\p{Extended_Pictographic}\s]+$/u;
               const isOnlyEmojis = onlyEmojiRegex.test(message.content) && message.content.length <= 15;
               return (
-              <div className="flex items-end gap-2 text-sm w-full">
+              <div className={`flex items-end gap-2 text-sm w-full ${hasImage || hasVideo || hasVoice || hasAudio || hasFile || message.forwardedFrom || message.replyTo || message.storyId ? 'mt-3' : ''}`}>
                 <div className="flex-1 min-w-0 w-full">
                   <p className={`whitespace-pre-wrap break-words leading-relaxed w-full ${isOnlyEmojis ? 'text-5xl my-1' : ''} ${isMine ? 'text-[#0a0a0a] font-normal' : 'text-zinc-200'}`}>
                     {renderFormattedText(message.content)}