highperfocused/grimoire
1
0
Fork 0
mirror of https://github.com/purrgrammer/grimoire.git synced 2026-04-12 00:17:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: make ChatMediaRenderer inline with subtle dotted border

Browse Source 
Use a subtle dotted bottom border instead of background/padding
to better integrate with surrounding text flow.

https://claude.ai/code/session_01AeeN5d5EcVLGjZbGueZxaD
This commit is contained in:
Claude
2026-01-30 09:23:55 +00:00
parent 6ea0a17f2c
commit ec29178ce9
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/chat/ChatMediaRenderer.tsx
View File

@@ -54,7 +54,7 @@ function parseBlossomUrl(
* Get icon component based on media type
*/
function MediaIcon({ type }: { type: "image" | "video" | "audio" }) {
const iconClass = "size-4 shrink-0";
const iconClass = "size-3.5 shrink-0 text-muted-foreground";
switch (type) {
case "image":
return <Image className={iconClass} />;
@@ -91,7 +91,7 @@ export function ChatMediaRenderer({ url, type, imeta }: MediaRendererProps) {
};
return (
<span className="inline-flex items-center gap-1.5 rounded bg-muted/50 px-2 py-0.5 text-sm">
<span className="inline-flex items-center gap-1 border-b border-dotted border-muted-foreground/50">
<MediaIcon type={type} />
<a
href={url}
@@ -109,10 +109,10 @@ export function ChatMediaRenderer({ url, type, imeta }: MediaRendererProps) {
{blossom && (
<button
onClick={handleBlossomClick}
className="text-muted-foreground hover:text-foreground shrink-0"
className="text-muted-foreground hover:text-foreground"
title="View in Blossom"
>
<Flower2 className="size-3.5" />
<Flower2 className="size-3" />
</button>
)}
</span>