rust/forkmessager
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 3 Releases Wiki Activity

Отступы в баблах

Browse Source
This commit is contained in:
Халимов Рустам
2026-04-16 23:48:36 +03:00
parent 454f70f716
commit 86ae06beb6
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client-web/src/modules/chats/presentation/components/MessageBubble.tsx
+5 -5
View File
@@ -613,7 +613,7 @@ function MessageBubble({
return ( return (
<div className={` <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]' : ''} ${isSingleGif ? 'max-w-[260px]' : ''}
overflow-hidden relative rounded-[1.25rem] overflow-hidden relative rounded-[1.25rem]
`}> `}>
@@ -709,7 +709,7 @@ function MessageBubble({
{/* Голосовое - Optimized Kinetic Layout */} {/* Голосовое - Optimized Kinetic Layout */}
{hasVoice && ( {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 <audio
ref={audioRef} ref={audioRef}
src={media.find((m) => m.type === 'voice')?.url} src={media.find((m) => m.type === 'voice')?.url}
@@ -778,7 +778,7 @@ function MessageBubble({
}; };
return ( return (
<div className="min-w-[220px]"> <div className={`min-w-[220px] ${hasImage || hasVideo || hasVoice || message.forwardedFrom || message.replyTo || message.storyId ? 'mt-3' : ''}`}>
{audioMedia?.filename && ( {audioMedia?.filename && (
<div className="flex items-center gap-2 mb-2 min-w-0"> <div className="flex items-center gap-2 mb-2 min-w-0">
<Volume2 size={14} className={isMine ? 'text-[#0a0a0a]/60' : 'text-zinc-400'} /> <Volume2 size={14} className={isMine ? 'text-[#0a0a0a]/60' : 'text-zinc-400'} />
@@ -875,7 +875,7 @@ function MessageBubble({
target="_blank" target="_blank"
rel="noopener noreferrer" 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' 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' <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`}> } group-hover/file:scale-110 transition-transform`}>
@@ -1034,7 +1034,7 @@ function MessageBubble({
const onlyEmojiRegex = /^[\p{Extended_Pictographic}\s]+$/u; const onlyEmojiRegex = /^[\p{Extended_Pictographic}\s]+$/u;
const isOnlyEmojis = onlyEmojiRegex.test(message.content) && message.content.length <= 15; const isOnlyEmojis = onlyEmojiRegex.test(message.content) && message.content.length <= 15;
return ( 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"> <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'}`}> <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)} {renderFormattedText(message.content)}