From efd2bb26b48b63e976b60479b83614b7e570d292 Mon Sep 17 00:00:00 2001
From: Matthew Meszaros <matt@warmbly.com>
Date: Wed, 7 Oct 2026 07:30:19 +0000
Subject: [PATCH] feat: prioritize campaign names over descriptions and use
 available list width while keeping actions accessible

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 docs/content/docs/guides/campaigns.mdx |  4 ++++
 web/src/app/app/analytics/page.tsx     |  2 +-
 web/src/app/app/campaigns/page.tsx     | 26 ++++++++++++++------------
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/docs/content/docs/guides/campaigns.mdx b/docs/content/docs/guides/campaigns.mdx
index 73f97958e..af5afe274 100644
--- a/docs/content/docs/guides/campaigns.mdx
+++ b/docs/content/docs/guides/campaigns.mdx
@@ -17,6 +17,10 @@ Campaigns belong to the workspace. Members with **View campaigns** can read camp
 
 Select the workspace that owns the campaign before opening it. Creating a campaign does not grant access to it from a different workspace.
 
+## Campaigns list
+
+Campaign names take priority over descriptions in the list. Descriptions use the remaining space and are hidden on small screens. A name that is still too long for the available space is shortened with an ellipsis so the status and actions stay accessible; hover over the name to read it in full, or open the campaign on a touch screen. The top campaigns list in Analytics also uses the available space for names before shortening them.
+
 ## Create a campaign
 
 **Campaigns** > **New campaign** opens a four-step flow. A campaign is a first email and, optionally, follow-ups that stop for anyone who replies.
diff --git a/web/src/app/app/analytics/page.tsx b/web/src/app/app/analytics/page.tsx
index 8f25d35a8..8e752c001 100644
--- a/web/src/app/app/analytics/page.tsx
+++ b/web/src/app/app/analytics/page.tsx
@@ -233,7 +233,7 @@ export default function AnalyticsPage() {
                                         className="group h-11 px-5 flex items-center gap-3 hover:bg-slate-50 transition-colors"
                                     >
                                         <span className={`size-1.5 rounded-full shrink-0 ${dot}`} />
-                                        <span className="text-[12.5px] font-medium text-slate-900 truncate max-w-[40%]">{c.name}</span>
+                                        <span className="min-w-0 flex-1 text-[12.5px] font-medium text-slate-900 truncate" title={c.name}>{c.name}</span>
                                         <span className="ml-auto flex items-center gap-2 md:gap-4 font-mono text-[11px] text-slate-500 tabular-nums shrink-0">
                                             <span title="Emails sent">{num(c.emails_sent)} sent</span>
                                             <span title="Open rate" className="hidden md:inline text-emerald-600">{pct(c.open_rate)} open</span>
diff --git a/web/src/app/app/campaigns/page.tsx b/web/src/app/app/campaigns/page.tsx
index 3a58aaf93..956591c7e 100644
--- a/web/src/app/app/campaigns/page.tsx
+++ b/web/src/app/app/campaigns/page.tsx
@@ -531,19 +531,21 @@ export default function CampaignsPage() {
                                     <span className="shrink-0 w-3.5 flex items-center justify-center">
                                         <CampaignStatusMark status={cstatus} idle={isIdleCampaign(c)} />
                                     </span>
-                                    <span className="text-[12.5px] text-slate-900 font-medium truncate max-w-[40%]">
-                                        {c.name}
-                                    </span>
-                                    <span className="font-mono text-[10.5px] text-slate-400 tabular-nums shrink-0 hidden sm:inline">
-                                        {c.id.slice(0, 8)}
-                                    </span>
-                                    <AdvisorRowFlag findings={advisor.get(c.id)} subject={c.name} />
-                                    <CampaignFolderChips campaign={c} folders={folders} />
-                                    {c.description && (
-                                        <span className="text-[11.5px] text-slate-400 truncate hidden md:inline">
-                                            {c.description}
+                                    <div className="flex min-w-0 flex-1 items-center gap-3 overflow-hidden">
+                                        <span className="min-w-0 text-[12.5px] text-slate-900 font-medium truncate" title={c.name}>
+                                            {c.name}
                                         </span>
-                                    )}
+                                        <span className="font-mono text-[10.5px] text-slate-400 tabular-nums shrink-0 hidden sm:inline">
+                                            {c.id.slice(0, 8)}
+                                        </span>
+                                        <AdvisorRowFlag findings={advisor.get(c.id)} subject={c.name} />
+                                        <CampaignFolderChips campaign={c} folders={folders} />
+                                        {c.description && (
+                                            <span className="min-w-0 flex-1 text-[11.5px] text-slate-400 truncate hidden md:inline">
+                                                {c.description}
+                                            </span>
+                                        )}
+                                    </div>
                                     <span className={cn("ml-auto text-[10px] uppercase tracking-[0.1em] font-medium shrink-0", campaignDisplayTone(c))}>
                                         {stateLabel}
                                     </span>