mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-08-04 04:05:22 -04:00
Code Issues Packages Projects Releases Wiki Activity

Refactor message icon component: separate margin utilities from icon styling to fix badge positioning issues.

Browse Source
This commit is contained in:
MartinBraquet
2026-08-01 01:25:57 +02:00
parent d9e6524c0d
commit 7c25245e6f
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/components/messaging/messages-icon.tsx
View File

@@ -45,11 +45,16 @@ export function PrivateMessagesIcon(props: {
const {solid, className, bubbleClassName} = props
const privateUser = usePrivateUser()
const Icon = solid ? BiSolidEnvelope : BiEnvelope
// Margin utilities (`mx-auto`, `my-1`, ...) belong on the wrapper, everything else (size, color)
// stays on the icon. Otherwise the wrapper stretches to the full width of its parent — e.g. the
// bottom-nav item — and the badge anchors to that far edge instead of the envelope's corner.
const classes = (className ?? '').split(/\s+/).filter(Boolean)
const isMargin = (c: string) => /^-?m[xytrbl]?-/.test(c)
return (
// Sized to the icon itself so the count badge can anchor to its top-right corner instead of
// being centered on top of the envelope.
<Row className="relative flex-shrink-0">
<Icon className={className} />
<Row className={clsx('relative w-fit flex-shrink-0', classes.filter(isMargin))}>
<Icon className={clsx(classes.filter((c) => !isMargin(c)))} />
{privateUser && (
<InternalUnseenMessagesBubble
className={clsx('absolute -right-1.5 -top-1.5', bubbleClassName)}