@handled-ai/design-system 0.20.20 → 0.20.22

package/src/components/timeline-activity.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { cn } from "../lib/utils"
-import { ChevronDown, ChevronUp, ExternalLink } from "lucide-react"
+import { ChevronDown, ChevronUp, ExternalLink, Phone } from "lucide-react"
 import { EmailBody as SharedEmailBody } from "./email-body"
 import {
   decodeEmailDisplayText,
@@ -54,6 +54,51 @@ export interface TimelineEvent {
      * existing consumers are unaffected.
      */
     bodyHtml?: string
+    /**
+     * Sender signature HTML, split out of the main body by the consuming app's
+     * email pipeline. When present, it is hidden behind a subtle "Show
+     * signature" toggle (collapsed by default) so signatures don't add noise to
+     * the timeline. Sanitized before rendering. Optional — when absent the body
+     * renders exactly as before. Mirrors `signatureHtml` on EmailPreviewCard.
+     */
+    signatureHtml?: string | null
+    /**
+     * Quoted / trailing thread content (the "On <date> X wrote:" history) split
+     * out of the main body. When present, it is hidden behind a subtle "Show
+     * quoted text" toggle (collapsed by default). Sanitized before rendering.
+     * Optional — when absent the body renders exactly as before.
+     */
+    quotedHtml?: string | null
+  }
+  /**
+   * Gong call payload. When present, the card renders a dedicated, first-class
+   * Gong call card (mirroring the `email` treatment) instead of generic
+   * content: a collapsed duration + brief-snippet preview, and an expanded
+   * card with the call title, start time, direction/outcome chips, the AI
+   * brief, key points, next steps, and a "View in Gong" link. Opt-in: when
+   * absent, existing consumers are unaffected. Every field except `title` is
+   * optional/nullable and renders nothing when absent (no empty sections,
+   * no "null"/"undefined", no "Invalid Date").
+   */
+  gongCall?: {
+    /** Gong call title. */
+    title: string
+    /** ISO datetime of the call start. */
+    startTime?: string | null
+    /** Call length in seconds. Formatted to a human duration when present. */
+    durationSeconds?: number | null
+    /** Call direction, e.g. "Outbound" / "Inbound". */
+    direction?: string | null
+    /** Call outcome, e.g. "Connected". */
+    outcome?: string | null
+    /** Gong AI call brief (plain text, may be multi-paragraph). */
+    brief?: string | null
+    /** Gong AI key points (plain text, often newline-delimited bullets). */
+    keyPoints?: string | null
+    /** Gong AI highlights / next steps (plain text). */
+    nextSteps?: string | null
+    /** Deep link to the call in Gong. */
+    url?: string | null
   }
   content?: React.ReactNode
   source?: {
@@ -163,7 +208,7 @@ const TIMELINE_VARIANT_CLASSES: Record<TimelineActivityVariant, TimelineVariantC
     title: "min-w-0 pr-1 text-[13.5px] font-medium leading-tight text-foreground",
     time: "shrink-0 whitespace-nowrap pt-px text-[11px] leading-tight text-muted-foreground/60",
     cardContainer: "overflow-hidden rounded-lg border border-border/70 bg-card",
-    cardHeader: "flex items-center justify-between border-b border-border/60 bg-muted/30 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70",
+    cardHeader: "flex items-start justify-between border-b border-border/60 bg-muted/30 px-3 py-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70",
     cardBody: "px-3 py-2.5 text-[13px] leading-relaxed",
     cardFooter: "border-t border-border/60 bg-muted/10 px-3 py-1.5",
     collapsedPreview: "flex items-center justify-between gap-2 px-3 py-2 text-[13px] text-muted-foreground",
@@ -245,6 +290,7 @@ function TimelineItem({
   const [showAllRecipients, setShowAllRecipients] = React.useState(false)
   const hasContent = !!event.content
   const hasEmail = !!event.email
+  const hasGongCall = !!event.gongCall
   const classes = TIMELINE_VARIANT_CLASSES[variant]
 
   const toneStyle = event.tone ? TONE_CLASSES[event.tone] : null
@@ -275,10 +321,18 @@ function TimelineItem({
 
         {event.actor && <ActorByline actor={event.actor} time={event.time} />}
 
-        {(hasContent || hasEmail) && (
+        {(hasContent || hasEmail || hasGongCall) && (
           <div className="mt-2">
             {event.isInteractive ? (
-              hasEmail ? (
+              hasGongCall ? (
+                <GongCallCard
+                  event={event}
+                  expanded={expanded}
+                  setExpanded={setExpanded}
+                  variant={variant}
+                  classes={classes}
+                />
+              ) : hasEmail ? (
                 <EmailCard
                   event={event}
                   expanded={expanded}
@@ -310,6 +364,7 @@ function TimelineItem({
 }
 
 type TimelineEmail = NonNullable<TimelineEvent["email"]>
+type TimelineGongCall = NonNullable<TimelineEvent["gongCall"]>
 type TimelineSource = NonNullable<TimelineEvent["source"]>
 
 function reactNodeToDisplayText(value: React.ReactNode): string {
@@ -317,6 +372,41 @@ function reactNodeToDisplayText(value: React.ReactNode): string {
   return ""
 }
 
+/**
+ * Formats a call length in seconds to a compact human duration:
+ * "38 min", ">= 60 min" → "1 h 12 min". Returns "" for absent/invalid
+ * input so callers can omit the chip entirely (never render "0 min").
+ */
+function formatCallDuration(durationSeconds?: number | null): string {
+  if (durationSeconds == null || !Number.isFinite(durationSeconds) || durationSeconds <= 0) return ""
+  const totalMinutes = Math.round(durationSeconds / 60)
+  if (totalMinutes < 1) return "< 1 min"
+  if (totalMinutes < 60) return `${totalMinutes} min`
+  const hours = Math.floor(totalMinutes / 60)
+  const minutes = totalMinutes % 60
+  return minutes === 0 ? `${hours} h` : `${hours} h ${minutes} min`
+}
+
+function cleanGongText(value?: string | null): string {
+  if (!value) return ""
+  return decodeEmailDisplayText(value).trim()
+}
+
+function getTimelineGongCallDisplay(gongCall: TimelineGongCall) {
+  const title = cleanGongText(gongCall.title)
+  const startTime = formatEmailTimestamp(gongCall.startTime) ?? ""
+  const duration = formatCallDuration(gongCall.durationSeconds)
+  const direction = cleanGongText(gongCall.direction)
+  const outcome = cleanGongText(gongCall.outcome)
+  const brief = cleanGongText(gongCall.brief)
+  const keyPoints = cleanGongText(gongCall.keyPoints)
+  const nextSteps = cleanGongText(gongCall.nextSteps)
+  const url = gongCall.url?.trim() || ""
+  const snippet = brief.split("\n").find((line) => line.trim())?.trim() ?? ""
+
+  return { title, startTime, duration, direction, outcome, brief, keyPoints, nextSteps, url, snippet }
+}
+
 function getTimelineEmailDisplay(email: TimelineEmail) {
   const sender = normalizeEmailSender({ name: email.from, email: email.fromEmail })
   const to = formatAddressList(email.to) || decodeEmailDisplayText(email.to ?? "")
@@ -326,8 +416,9 @@ function getTimelineEmailDisplay(email: TimelineEmail) {
   const subject = email.subject ? decodeEmailDisplayText(email.subject) : ""
   const bodyText = reactNodeToDisplayText(email.body)
   const snippet = emailBodySnippet({ bodyHtml: email.bodyHtml, body: bodyText }, 140)
+  const hasRecipients = Boolean(to || cc || bcc)
 
-  return { sender, to, cc, bcc, date, subject, bodyText, snippet }
+  return { sender, to, cc, bcc, date, subject, bodyText, snippet, hasRecipients }
 }
 
 function EmailMetadata({
@@ -340,9 +431,13 @@ function EmailMetadata({
   setShowAllRecipients: React.Dispatch<React.SetStateAction<boolean>>
 }) {
   const display = getTimelineEmailDisplay(email)
+  const hasExpandableRecipients = Boolean(display.cc || display.bcc)
 
   return (
     <>
+      {/* Row 1: sender name + email, with the date right-aligned. The `gap-4`
+          guarantees whitespace between the sender block and the date so they
+          never visually jam together. */}
       <div className="flex items-center justify-between gap-4">
         <div className="flex min-w-0 items-baseline gap-1.5">
           <span className="font-semibold text-foreground text-[13px] whitespace-nowrap">{display.sender.name}</span>
@@ -354,36 +449,94 @@ function EmailMetadata({
           <span className="shrink-0 text-xs text-muted-foreground/50 whitespace-nowrap">{display.date}</span>
         ) : null}
       </div>
-      <div className="mt-0.5 flex items-center gap-1 text-xs text-muted-foreground">
-        <span className="truncate">
-          To {display.to || "no recipient yet"}
-          {!showAllRecipients && (display.cc || display.bcc) ? (
-            <>, ...</>
-          ) : null}
-          {showAllRecipients && display.cc ? (
-            <>, <span className="text-muted-foreground/40">cc</span> {display.cc}</>
+      {/* Recipient lines live on their own full-width, stacked rows below the
+          sender/date row. Each line truncates independently. The To-segment is
+          suppressed entirely when there is no recipient data (history emails)
+          rather than rendering a meaningless "no recipient yet" placeholder. */}
+      {display.hasRecipients ? (
+        <div className="mt-0.5 text-xs text-muted-foreground">
+          <div className="flex items-center gap-1">
+            <span className="min-w-0 flex-1 truncate">
+              {display.to ? (
+                <>To {display.to}</>
+              ) : (
+                <>
+                  <span className="text-muted-foreground/40">cc</span> {display.cc || display.bcc}
+                </>
+              )}
+              {display.to && !showAllRecipients && hasExpandableRecipients ? (
+                <>, &hellip;</>
+              ) : null}
+            </span>
+            {hasExpandableRecipients ? (
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  setShowAllRecipients((prev) => !prev)
+                }}
+                className="shrink-0 text-muted-foreground/40 hover:text-muted-foreground transition-colors"
+                aria-label={showAllRecipients ? "Hide cc and bcc" : "Show cc and bcc"}
+              >
+                <ChevronDown className={cn("h-3 w-3 transition-transform", showAllRecipients && "rotate-180")} />
+              </button>
+            ) : null}
+          </div>
+          {showAllRecipients && display.to && display.cc ? (
+            <div className="truncate">
+              <span className="text-muted-foreground/40">cc</span> {display.cc}
+            </div>
           ) : null}
           {showAllRecipients && display.bcc ? (
-            <> <span className="text-muted-foreground/40">bcc</span> {display.bcc}</>
+            <div className="truncate">
+              <span className="text-muted-foreground/40">bcc</span> {display.bcc}
+            </div>
           ) : null}
-        </span>
-        {(display.cc || display.bcc) ? (
-          <button
-            type="button"
-            onClick={(e) => {
-              e.stopPropagation()
-              setShowAllRecipients((prev) => !prev)
-            }}
-            className="shrink-0 text-muted-foreground/40 hover:text-muted-foreground transition-colors"
-          >
-            <ChevronDown className={cn("h-3 w-3 transition-transform", showAllRecipients && "rotate-180")} />
-          </button>
-        ) : null}
-      </div>
+        </div>
+      ) : null}
     </>
   )
 }
 
+function SuppressedHtmlSection({
+  html,
+  showLabel,
+  hideLabel,
+  slot,
+}: {
+  html: string
+  showLabel: string
+  hideLabel: string
+  slot: string
+}) {
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <div className="mt-2" data-slot={slot}>
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation()
+          setOpen((value) => !value)
+        }}
+        aria-expanded={open}
+        className="inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] text-muted-foreground/70 transition-colors hover:bg-muted hover:text-foreground"
+      >
+        {open ? hideLabel : showLabel}
+        <ChevronDown className={cn("h-3 w-3 transition-transform", open && "rotate-180")} />
+      </button>
+      {open ? (
+        <div
+          data-slot={`${slot}-content`}
+          className="mt-2 border-l-2 border-border pl-3 text-sm leading-relaxed text-muted-foreground"
+        >
+          <SharedEmailBody html={html} variant="history" collapseDetails={false} />
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
 function TimelineEmailBody({ email }: { email: TimelineEmail }) {
   const display = getTimelineEmailDisplay(email)
   const bodyFallback = display.bodyText || (typeof email.body === "string" ? email.body : "")
@@ -402,7 +555,35 @@ function TimelineEmailBody({ email }: { email: TimelineEmail }) {
     />
   )
 
-  return email.bodyHtml ? <div data-slot="timeline-email-html">{body}</div> : body
+  const hasSignature = Boolean(email.signatureHtml && email.signatureHtml.trim())
+  const hasQuoted = Boolean(email.quotedHtml && email.quotedHtml.trim())
+
+  // Fast path: no signature/quoted slots → identical output to before.
+  if (!hasSignature && !hasQuoted) {
+    return email.bodyHtml ? <div data-slot="timeline-email-html">{body}</div> : body
+  }
+
+  return (
+    <div data-slot={email.bodyHtml ? "timeline-email-html" : undefined}>
+      {body}
+      {hasSignature ? (
+        <SuppressedHtmlSection
+          html={email.signatureHtml as string}
+          showLabel="Show signature"
+          hideLabel="Hide signature"
+          slot="timeline-email-signature"
+        />
+      ) : null}
+      {hasQuoted ? (
+        <SuppressedHtmlSection
+          html={email.quotedHtml as string}
+          showLabel="Show quoted text"
+          hideLabel="Hide quoted text"
+          slot="timeline-email-quoted"
+        />
+      ) : null}
+    </div>
+  )
 }
 
 function renderDecodedPreview(preview?: React.ReactNode): React.ReactNode {
@@ -428,7 +609,7 @@ function CollapsedEmailPreview({
 
   return (
     <div className={className} onClick={onClick}>
-      <span className="line-clamp-1 pr-3 text-[13px]">
+      <span className="line-clamp-1 min-w-0 flex-1 pr-3 text-[13px]">
         <span className="text-muted-foreground">{display?.sender.name}</span>
         <span className="mx-1.5 text-muted-foreground/40">&middot;</span>
         {display?.subject ? (
@@ -462,6 +643,34 @@ function ShowLessButton({
   )
 }
 
+/**
+ * Top-of-card collapse affordance. Long expanded emails are tedious to collapse
+ * from the bottom alone, so the header row also carries a "Show less" control.
+ */
+function CollapseTopButton({
+  onClick,
+  className,
+}: {
+  onClick: React.MouseEventHandler<HTMLButtonElement>
+  className?: string
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label="Show less"
+      data-slot="timeline-collapse-top"
+      className={cn(
+        "shrink-0 inline-flex items-center gap-1 text-[11px] font-medium text-muted-foreground/60 transition-colors hover:text-foreground",
+        className,
+      )}
+    >
+      <span className="sr-only sm:not-sr-only">Show less</span>
+      <ChevronUp className="h-3 w-3" />
+    </button>
+  )
+}
+
 function SourceAction({
   source,
   onSourceClick,
@@ -499,6 +708,256 @@ function SourceAction({
   )
 }
 
+function GongLinkAction({
+  url,
+  className,
+}: {
+  url: string
+  className: string
+}) {
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      onClick={(e) => e.stopPropagation()}
+      className={className}
+      data-slot="timeline-gong-link"
+    >
+      View in Gong
+      <ExternalLink className="h-3 w-3" />
+    </a>
+  )
+}
+
+/**
+ * The expanded Gong call card body — call title + start time header, optional
+ * direction/outcome chips, the AI brief as primary body text, and labeled
+ * Key points / Next steps subsections. Every section renders only when its
+ * content is present.
+ */
+function TimelineGongCallBody({
+  display,
+  labelClassName,
+}: {
+  display: ReturnType<typeof getTimelineGongCallDisplay>
+  labelClassName: string
+}) {
+  return (
+    <div className="space-y-3" data-slot="timeline-gong-body">
+      {display.brief ? (
+        <div className="whitespace-pre-line text-sm leading-relaxed text-foreground/90">
+          {display.brief}
+        </div>
+      ) : null}
+      {display.keyPoints ? (
+        <div data-slot="timeline-gong-key-points">
+          <div className={labelClassName}>Key points</div>
+          <div className="mt-1 whitespace-pre-line text-sm leading-relaxed text-foreground/90">
+            {display.keyPoints}
+          </div>
+        </div>
+      ) : null}
+      {display.nextSteps ? (
+        <div data-slot="timeline-gong-next-steps">
+          <div className={labelClassName}>Next steps</div>
+          <div className="mt-1 whitespace-pre-line text-sm leading-relaxed text-foreground/90">
+            {display.nextSteps}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function GongCallHeader({
+  display,
+}: {
+  display: ReturnType<typeof getTimelineGongCallDisplay>
+}) {
+  return (
+    <>
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex min-w-0 items-center gap-1.5">
+          <Phone className="h-3.5 w-3.5 shrink-0 text-muted-foreground/60" />
+          <span className="min-w-0 truncate font-semibold text-foreground text-[13px]">{display.title}</span>
+        </div>
+        {display.startTime ? (
+          <span className="shrink-0 text-xs text-muted-foreground/50 whitespace-nowrap">{display.startTime}</span>
+        ) : null}
+      </div>
+      {display.duration || display.direction || display.outcome ? (
+        <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
+          {display.duration ? <span data-slot="timeline-gong-duration">{display.duration}</span> : null}
+          {display.direction ? (
+            <span className="rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">{display.direction}</span>
+          ) : null}
+          {display.outcome ? (
+            <span className="rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">{display.outcome}</span>
+          ) : null}
+        </div>
+      ) : null}
+    </>
+  )
+}
+
+function CollapsedGongCallPreview({
+  display,
+  className,
+  actionClassName,
+  onClick,
+}: {
+  display: ReturnType<typeof getTimelineGongCallDisplay>
+  className: string
+  actionClassName: string
+  onClick?: () => void
+}) {
+  return (
+    <div className={className} onClick={onClick}>
+      <span className="line-clamp-1 min-w-0 flex-1 pr-3 text-[13px] text-muted-foreground">
+        {display.duration ? (
+          <>
+            <span className="inline-flex items-center gap-1">
+              <Phone className="h-3 w-3" />
+              {display.duration}
+            </span>
+            {display.snippet ? <span className="mx-1.5 text-muted-foreground/40">&middot;</span> : null}
+          </>
+        ) : null}
+        {display.snippet ? <span>{display.snippet}</span> : null}
+      </span>
+      <button type="button" className={actionClassName}>
+        Expand <ChevronDown className="h-3 w-3" />
+      </button>
+    </div>
+  )
+}
+
+function GongCallCard({
+  event,
+  expanded,
+  setExpanded,
+  variant,
+  classes,
+}: {
+  event: TimelineEvent
+  expanded: boolean
+  setExpanded: React.Dispatch<React.SetStateAction<boolean>>
+  variant: TimelineActivityVariant
+  classes: TimelineVariantClasses
+}) {
+  const gongCall = event.gongCall as TimelineGongCall
+  const display = getTimelineGongCallDisplay(gongCall)
+
+  if (variant === "default") {
+    return (
+      <div className={classes.cardContainer} data-variant={variant} data-slot="timeline-gong-card">
+        <div
+          className={cn(
+            "px-3 py-2.5 text-sm",
+            !expanded && "cursor-pointer hover:bg-muted/30 transition-colors",
+          )}
+          onClick={() => !expanded && setExpanded(true)}
+        >
+          {expanded ? (
+            <div className="space-y-3">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0 flex-1">
+                  <GongCallHeader display={display} />
+                </div>
+                <CollapseTopButton
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setExpanded(false)
+                  }}
+                  className="mt-0.5"
+                />
+              </div>
+
+              <TimelineGongCallBody
+                display={display}
+                labelClassName="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70"
+              />
+
+              <div className="mt-2 flex items-center gap-3">
+                {display.url ? (
+                  <GongLinkAction
+                    url={display.url}
+                    className="mr-auto inline-flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
+                  />
+                ) : null}
+                <ShowLessButton
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setExpanded(false)
+                  }}
+                  className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground transition-colors hover:text-foreground"
+                />
+              </div>
+            </div>
+          ) : (
+            <CollapsedGongCallPreview
+              display={display}
+              className="flex items-center justify-between gap-2 text-muted-foreground"
+              actionClassName="flex shrink-0 items-center gap-1 text-[11px] font-semibold uppercase tracking-wider transition-colors hover:text-foreground"
+            />
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={classes.cardContainer} data-variant={variant} data-slot="timeline-gong-card">
+      {expanded ? (
+        <>
+          <div className={classes.cardHeader} data-slot="timeline-card-header">
+            <div className="min-w-0 flex-1 normal-case tracking-normal">
+              <GongCallHeader display={display} />
+            </div>
+            <CollapseTopButton
+              onClick={(e) => {
+                e.stopPropagation()
+                setExpanded(false)
+              }}
+              className="ml-3 normal-case tracking-normal"
+            />
+          </div>
+
+          <div className={classes.cardBody} data-slot="timeline-card-body">
+            <TimelineGongCallBody
+              display={display}
+              labelClassName="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/70"
+            />
+          </div>
+
+          <div
+            className={cn(classes.cardFooter, classes.actionLinkRow, display.url ? "justify-between" : "justify-end")}
+            data-slot="timeline-card-footer"
+          >
+            {display.url ? <GongLinkAction url={display.url} className={classes.actionLink} /> : null}
+            <ShowLessButton
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation()
+                setExpanded(false)
+              }}
+              className={classes.actionLink}
+            />
+          </div>
+        </>
+      ) : (
+        <CollapsedGongCallPreview
+          display={display}
+          className={cn(classes.collapsedPreview, "cursor-pointer hover:bg-muted/30 transition-colors")}
+          actionClassName={cn(classes.actionLink, "shrink-0")}
+          onClick={() => setExpanded(true)}
+        />
+      )}
+    </div>
+  )
+}
+
 function EmailCard({
   event,
   expanded,
@@ -528,11 +987,20 @@ function EmailCard({
         >
           {expanded && event.email ? (
             <div className="space-y-3">
-              <div>
-                <EmailMetadata
-                  email={event.email}
-                  showAllRecipients={showAllRecipients}
-                  setShowAllRecipients={setShowAllRecipients}
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0 flex-1">
+                  <EmailMetadata
+                    email={event.email}
+                    showAllRecipients={showAllRecipients}
+                    setShowAllRecipients={setShowAllRecipients}
+                  />
+                </div>
+                <CollapseTopButton
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setExpanded(false)
+                  }}
+                  className="mt-0.5"
                 />
               </div>
 
@@ -579,10 +1047,19 @@ function EmailCard({
       {expanded && event.email ? (
         <>
           <div className={classes.cardHeader} data-slot="timeline-card-header">
-            <EmailMetadata
-              email={event.email}
-              showAllRecipients={showAllRecipients}
-              setShowAllRecipients={setShowAllRecipients}
+            <div className="min-w-0 flex-1 normal-case tracking-normal">
+              <EmailMetadata
+                email={event.email}
+                showAllRecipients={showAllRecipients}
+                setShowAllRecipients={setShowAllRecipients}
+              />
+            </div>
+            <CollapseTopButton
+              onClick={(e) => {
+                e.stopPropagation()
+                setExpanded(false)
+              }}
+              className="ml-3 normal-case tracking-normal"
             />
           </div>