diff --git a/desktop/src/features/messages/lib/rowHeightEstimate.ts b/desktop/src/features/messages/lib/rowHeightEstimate.ts index e45de48998..3ca08ac3fc 100644 --- a/desktop/src/features/messages/lib/rowHeightEstimate.ts +++ b/desktop/src/features/messages/lib/rowHeightEstimate.ts @@ -25,8 +25,8 @@ const MEDIA_MAX_HEIGHT = 256; // max-h-64 const TEXT_LINE_HEIGHT = 22; const CODE_LINE_HEIGHT = 19; const CHARS_PER_LINE = 64; // rough wrap width at the timeline column -const ROW_CHROME = 34; // author/time header + row padding -const REACTION_ROW = 28; +const ROW_CHROME = 26; // author/time header + denser row padding +const REACTION_ROW = 24; const PREVIEW_CARD = 96; const MIN_ESTIMATE = 60; // never reserve less than the old flat floor diff --git a/desktop/src/features/messages/ui/MessageReactions.tsx b/desktop/src/features/messages/ui/MessageReactions.tsx index 1f9343d01a..0f28bf12f4 100644 --- a/desktop/src/features/messages/ui/MessageReactions.tsx +++ b/desktop/src/features/messages/ui/MessageReactions.tsx @@ -16,8 +16,12 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip"; const REACTION_PILL_BASE_CLASSES = - "inline-flex h-8 items-center rounded-full border text-xs font-medium leading-none transition-colors"; -const REACTION_GLYPH_CLASSES = "h-3.5 w-3.5 translate-y-px text-sm"; + "inline-flex h-7 items-center rounded-full border text-xs font-medium leading-none transition-colors"; +const REACTION_CUSTOM_GLYPH_CLASSES = "h-3.5 w-3.5 -translate-y-[0.5px]"; +const REACTION_NATIVE_GLYPH_CLASSES = "h-3 w-3 text-xs"; +const REACTION_COUNT_CLASSES = "text-muted-foreground"; +const REACTION_NATIVE_COUNT_CLASSES = + "text-muted-foreground translate-y-[0.5px]"; const REACTION_PILL_HOVER_CLASSES = "hover:bg-primary/10 hover:text-foreground focus-visible:bg-primary/10 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"; const BADGE_BURST_STABLE_FRAMES = 2; @@ -436,9 +440,20 @@ function ReactionPill({ ref={setPillRef} type="button" > - + @@ -468,10 +483,18 @@ function ReactionPill({ > diff --git a/desktop/src/features/messages/ui/MessageRow.tsx b/desktop/src/features/messages/ui/MessageRow.tsx index fff5d049d2..79c900384c 100644 --- a/desktop/src/features/messages/ui/MessageRow.tsx +++ b/desktop/src/features/messages/ui/MessageRow.tsx @@ -380,7 +380,7 @@ export const MessageRow = React.memo( const actionBarNode = (
0 ? "-ml-2" : ""} + className={index > 0 ? "-ml-1" : ""} data-testid="message-thread-summary-participant" style={{ zIndex: index + 1, ...(index < participantCount - 1 && { - mask: "radial-gradient(circle 16px at calc(100% + 4px) 50%, transparent 99%, #fff 100%)", + mask: "radial-gradient(circle 14px at calc(100% + 6px) 50%, transparent 99%, #fff 100%)", WebkitMask: - "radial-gradient(circle 16px at calc(100% + 4px) 50%, transparent 99%, #fff 100%)", + "radial-gradient(circle 14px at calc(100% + 6px) 50%, transparent 99%, #fff 100%)", }), }} > @@ -210,7 +210,7 @@ export function MessageThreadSummaryRow({