duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 23:16:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Small fix for the chat bubbles, they where a bit off after the tailwind upgrade

Browse Source
This commit is contained in:
duckietm
2026-02-26 14:03:47 +01:00
parent 10f08c6703
commit 0678e86d3d
1 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/room/widgets/chat/ChatWidgetMessageView.tsx
+5 -6
View File
@@ -26,13 +26,13 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = ({
switch(bubbleWidth) switch(bubbleWidth)
{ {
case RoomChatSettings.CHAT_BUBBLE_WIDTH_NORMAL: case RoomChatSettings.CHAT_BUBBLE_WIDTH_NORMAL:
return 'w-350'; return 'max-w-[350px]';
case RoomChatSettings.CHAT_BUBBLE_WIDTH_THIN: case RoomChatSettings.CHAT_BUBBLE_WIDTH_THIN:
return 'w-240'; return 'max-w-[240px]';
case RoomChatSettings.CHAT_BUBBLE_WIDTH_WIDE: case RoomChatSettings.CHAT_BUBBLE_WIDTH_WIDE:
return 'w-2000'; return 'max-w-[2000px]';
default: default:
return 'w-350'; return 'max-w-[350px]';
} }
}, [ bubbleWidth ]); }, [ bubbleWidth ]);
@@ -83,8 +83,7 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = ({
{ chat.styleId === 0 && ( { chat.styleId === 0 && (
<div className="absolute -top-px left-px w-[30px] h-[calc(100%-0.5px)] rounded-[7px] z-1" style={ { backgroundColor: chat.color } } /> <div className="absolute -top-px left-px w-[30px] h-[calc(100%-0.5px)] rounded-[7px] z-1" style={ { backgroundColor: chat.color } } />
) } ) }
<div className={ `chat-bubble bubble-${ chat.styleId } ${ getBubbleWidth } relative z-1 wrap-break-word min-h-[26px] text-[14px] max-w-[350px]` } <div className={ `chat-bubble bubble-${ chat.styleId } ${ getBubbleWidth } relative z-1 wrap-break-word min-h-[26px] text-[14px]` }>
style={ { maxWidth: getBubbleWidth } }>
<div className="user-container flex items-center justify-center h-full max-h-[24px] overflow-hidden"> <div className="user-container flex items-center justify-center h-full max-h-[24px] overflow-hidden">
{ chat.imageUrl && chat.imageUrl.length > 0 && ( { chat.imageUrl && chat.imageUrl.length > 0 && (
<div className="user-image absolute top-[-15px] left-[-9.25px] w-[45px] h-[65px] bg-no-repeat bg-center" style={ { backgroundImage: `url(${ chat.imageUrl })` } } /> <div className="user-image absolute top-[-15px] left-[-9.25px] w-[45px] h-[65px] bg-no-repeat bg-center" style={ { backgroundImage: `url(${ chat.imageUrl })` } } />