diff --git a/frontend/src/components/ChatView/ChatView.css b/frontend/src/components/ChatView/ChatView.css index 707fe62cb..8719f4acb 100644 --- a/frontend/src/components/ChatView/ChatView.css +++ b/frontend/src/components/ChatView/ChatView.css @@ -2325,7 +2325,7 @@ width: fit-content; padding: 0; border: 0; - border-radius: 8px; + border-radius: 14px; background: transparent; color: inherit; cursor: pointer; @@ -2337,10 +2337,12 @@ } .chat__attach-thumb { - height: 80px; - max-width: 160px; + /* Match the composer's attachment card after send. The thumbnail is a + consistent square crop; tapping it still opens the full source image. */ + width: 96px; + height: 96px; object-fit: cover; - border-radius: 8px; + border-radius: 14px; border: 1px solid var(--border-light); /* CONTRACT: subtle 1px hairline on opaque fill */ cursor: inherit; transition: opacity 0.15s; diff --git a/frontend/src/components/ChatView/__tests__/attachmentSizing.test.js b/frontend/src/components/ChatView/__tests__/attachmentSizing.test.js new file mode 100644 index 000000000..6f9a241f7 --- /dev/null +++ b/frontend/src/components/ChatView/__tests__/attachmentSizing.test.js @@ -0,0 +1,37 @@ +import { test } from 'node:test' +import assert from 'node:assert/strict' +import { readFileSync } from 'node:fs' + +const css = readFileSync(new URL('../ChatView.css', import.meta.url), 'utf8') +const msgContent = readFileSync(new URL('../MsgContent.jsx', import.meta.url), 'utf8') + +function ruleBody(selector) { + const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + const match = css.match(new RegExp(`${escaped}\\s*\\{([^}]*)\\}`)) + assert.ok(match, `${selector} rule must exist`) + return match[1] +} + +test('sent image attachments match the composer card height and corners', () => { + const composer = ruleBody('.chat__attach-card--image') + const sentButton = ruleBody('.chat__attach-thumb-button') + const sent = ruleBody('.chat__attach-thumb') + + assert.match(composer, /height:\s*96px/) + assert.match(sent, /width:\s*96px/) + assert.match(sent, /height:\s*96px/) + assert.match(composer, /border-radius:\s*14px/) + assert.match(sentButton, /border-radius:\s*14px/) + assert.match(sent, /border-radius:\s*14px/) +}) + +test('sent attachments render above message text in both message paths', () => { + const attachmentNeedle = "msg.role === 'user' && = 0 && firstAttachments < blockContent) + assert.ok(secondAttachments >= 0 && secondAttachments < plainText) +})