diff --git a/src/app/globals.css b/src/app/globals.css index b1b906f..8027b98 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -165,42 +165,47 @@ } .rich-text p { @apply my-2; } .rich-text a { @apply text-neutral-900 underline; } - .rich-text a[data-ticket-mention="true"], - .rich-text .ProseMirror a[data-ticket-mention="true"], - .rich-text a.ticket-mention, - .rich-text .ProseMirror a.ticket-mention { + .rich-text [data-ticket-mention="true"], + .rich-text .ProseMirror [data-ticket-mention="true"], + .rich-text .ticket-mention, + .rich-text .ProseMirror .ticket-mention { @apply inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-100 px-2.5 py-1 text-xs font-semibold text-neutral-800 no-underline transition hover:bg-slate-200; } - .rich-text a[data-ticket-mention="true"] .ticket-mention-dot, - .rich-text a.ticket-mention .ticket-mention-dot { + /* While editing, TipTap renders the mention as a span with data-type="ticketMention". + Mirror the same chip style so the layout stays consistent during edits. */ + .rich-text .ProseMirror [data-type="ticketMention"] { + @apply inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-100 px-2.5 py-1 text-xs font-semibold text-neutral-800; + } + .rich-text [data-ticket-mention="true"] .ticket-mention-dot, + .rich-text .ticket-mention .ticket-mention-dot { @apply inline-flex size-2 rounded-full bg-slate-400; } - .rich-text a[data-ticket-mention="true"] .ticket-mention-ref, - .rich-text a.ticket-mention .ticket-mention-ref { + .rich-text [data-ticket-mention="true"] .ticket-mention-ref, + .rich-text .ticket-mention .ticket-mention-ref { @apply text-neutral-900; } - .rich-text a[data-ticket-mention="true"] .ticket-mention-sep, - .rich-text a.ticket-mention .ticket-mention-sep { + .rich-text [data-ticket-mention="true"] .ticket-mention-sep, + .rich-text .ticket-mention .ticket-mention-sep { @apply text-neutral-400; } - .rich-text a[data-ticket-mention="true"] .ticket-mention-subject, - .rich-text a.ticket-mention .ticket-mention-subject { + .rich-text [data-ticket-mention="true"] .ticket-mention-subject, + .rich-text .ticket-mention .ticket-mention-subject { @apply max-w-[220px] truncate text-neutral-700; } - .rich-text a[data-ticket-mention="true"][data-ticket-status="PENDING"] .ticket-mention-dot, - .rich-text a.ticket-mention[data-ticket-status="PENDING"] .ticket-mention-dot { + .rich-text [data-ticket-mention="true"][data-ticket-status="PENDING"] .ticket-mention-dot, + .rich-text .ticket-mention[data-ticket-status="PENDING"] .ticket-mention-dot { @apply bg-amber-400; } - .rich-text a[data-ticket-mention="true"][data-ticket-status="AWAITING_ATTENDANCE"] .ticket-mention-dot, - .rich-text a.ticket-mention[data-ticket-status="AWAITING_ATTENDANCE"] .ticket-mention-dot { + .rich-text [data-ticket-mention="true"][data-ticket-status="AWAITING_ATTENDANCE"] .ticket-mention-dot, + .rich-text .ticket-mention[data-ticket-status="AWAITING_ATTENDANCE"] .ticket-mention-dot { @apply bg-sky-500; } - .rich-text a[data-ticket-mention="true"][data-ticket-status="PAUSED"] .ticket-mention-dot, - .rich-text a.ticket-mention[data-ticket-status="PAUSED"] .ticket-mention-dot { + .rich-text [data-ticket-mention="true"][data-ticket-status="PAUSED"] .ticket-mention-dot, + .rich-text .ticket-mention[data-ticket-status="PAUSED"] .ticket-mention-dot { @apply bg-violet-500; } - .rich-text a[data-ticket-mention="true"][data-ticket-status="RESOLVED"] .ticket-mention-dot, - .rich-text a.ticket-mention[data-ticket-status="RESOLVED"] .ticket-mention-dot { + .rich-text [data-ticket-mention="true"][data-ticket-status="RESOLVED"] .ticket-mention-dot, + .rich-text .ticket-mention[data-ticket-status="RESOLVED"] .ticket-mention-dot { @apply bg-emerald-500; } .rich-text ul { @apply my-2 list-disc ps-5; }