devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

fix: precise chat layout alignment to match Aether Drift prototype

Browse Source 
Message rows: 20px horizontal padding, 3px vertical, 56px avatar column,
subtle 2.5% hover. Channel headers: border instead of shadow, text # hash,
10px gap, 6px button radius. Date dividers: 8px margin, 11px text, border-hard
lines. Input bubble: 34px buttons with 18px SVGs, 10px textarea padding.
Inline code: lavender on #111115 with border-soft border.
This commit is contained in:
Jannis Braun
2026-03-02 16:17:42 +01:00
parent 9491edb3c9
commit b8ce05ad6c
5 changed files with 52 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/chat/Message.tsx
+8 -8
View File
@@ -146,23 +146,23 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
const content = (
<div
className={`group relative flex px-4 py-0.5 transition-colors ${isFirstInGroup || message.replyTo ? 'mt-[1.0625rem]' : ''} ${
className={`group relative flex px-5 py-[3px] transition-colors ${isFirstInGroup || message.replyTo ? 'mt-[1.0625rem]' : ''} ${
isMentioned
? 'bg-accent-amber/10 border-l-2 border-l-accent-amber hover:bg-accent-amber/15'
: 'hover:bg-interactive-hover'
: 'hover:bg-[rgba(255,255,255,0.025)]'
}`}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{/* Reply Line */}
{message.replyTo && (
<div className="absolute left-[36px] top-[-14px] w-[33px] h-[22px] border-l-2 border-t-2 border-interactive-muted rounded-tl-[6px] opacity-60" />
<div className="absolute left-[40px] top-[-14px] w-[30px] h-[22px] border-l-2 border-t-2 border-interactive-muted rounded-tl-[6px] opacity-60" />
)}
{/* Avatar or timestamp column */}
<div className="w-[72px] flex-shrink-0 flex items-start justify-start pl-0.5">
<div className="w-14 flex-shrink-0 flex items-start justify-start">
{isFirstInGroup || message.replyTo ? (
<div className="mt-1">
<div className="mt-0.5">
<Avatar
src={message.user.avatar}
name={displayName}
@@ -172,14 +172,14 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
/>
</div>
) : (
<span className={`text-[11px] text-txt-tertiary opacity-0 group-hover:opacity-100 mt-2 select-none w-full text-center leading-[1.375rem] font-medium`}>
<span className={`text-[11px] text-txt-tertiary opacity-0 group-hover:opacity-100 mt-[3px] select-none w-full text-center leading-[1.375rem]`}>
{formatHoverTime(message.createdAt)}
</span>
)}
</div>
{/* Content */}
<div className="flex-1 min-w-0 pr-4">
<div className="flex-1 min-w-0">
{message.replyTo && (
<div className="flex items-center gap-1 mb-1 ml-[-4px] opacity-80 hover:opacity-100 cursor-pointer group/reply">
<Avatar src={message.replyTo.user.avatar} name={message.replyTo.user.username} size={16} user={message.replyTo.user} />
@@ -204,7 +204,7 @@ export function Message({ message, isCompact, isFirstInGroup }: MessageProps) {
>
{displayName}
</span>
<span className="text-[11px] text-txt-tertiary leading-tight font-medium hover:cursor-default">
<span className="text-[11px] text-txt-tertiary leading-tight hover:cursor-default">
{formatTime(message.createdAt)}
</span>
</div>