From cd228a3155e13b04aa2af389e6a6680e185db173 Mon Sep 17 00:00:00 2001
From: Bilal Godil <bg2002@gmail.com>
Date: Fri, 17 Apr 2026 17:24:37 -0700
Subject: [PATCH] fix(dashboard): resolve UI issues across email-* pages

- email-sent: stack the log table and domain reputation card vertically
  below lg breakpoint instead of crushing them side-by-side on mobile/tablet
- email-settings: render managed-domain statuses through a human-readable
  label map so users don't see raw enums like "pending_dns"
- email-themes: make the Select Theme dialog grid one column on mobile,
  two on sm+, instead of forcing cramped 2 columns everywhere
- email-templates: allow the template name row to shrink and truncate so
  long names don't push the Edit button off-card
- email-sent: annotate the boosted capacity label with an arrow and a
  "(boosted)" text marker so the red/blue strikethrough isn't the only cue
- email-drafts: shrink the step connectors on mobile so the 4-step progress
  bar no longer overflows the viewport at 375px
---
 .../[draftId]/draft-progress-bar.tsx          |  4 ++--
 .../email-sent/domain-reputation-card.tsx     | 20 ++++++++++++++-----
 .../[projectId]/email-sent/page-client.tsx    |  2 +-
 .../email-settings/domain-settings.tsx        | 10 +++++++++-
 .../email-templates/page-client.tsx           | 10 +++++-----
 .../[projectId]/email-themes/page-client.tsx  |  2 +-
 6 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/[draftId]/draft-progress-bar.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/[draftId]/draft-progress-bar.tsx
index 4dddf3ba0f..f9b4d16569 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/[draftId]/draft-progress-bar.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-drafts/[draftId]/draft-progress-bar.tsx
@@ -55,7 +55,7 @@ export function DraftProgressBar({ steps, currentStep, onStepClick, disableNavig
               </button>
 
               {!isLast && (
-                <div className="w-20 h-1 bg-muted-foreground/15 overflow-hidden">
+                <div className="w-8 sm:w-20 h-1 bg-muted-foreground/15 overflow-hidden">
                   <div
                     className={cn(
                       "h-full bg-primary transition-all duration-300",
@@ -86,7 +86,7 @@ export function DraftProgressBar({ steps, currentStep, onStepClick, disableNavig
               >
                 {step.label}
               </span>
-              {!isLast && <div className="w-20" />}
+              {!isLast && <div className="w-8 sm:w-20" />}
             </div>
           );
         })}
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/domain-reputation-card.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/domain-reputation-card.tsx
index 08fd771a52..d43c6fa3d7 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/domain-reputation-card.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/domain-reputation-card.tsx
@@ -247,10 +247,20 @@ export function DomainReputationCard() {
   const capacityLabel = isBoostActive ? (
     <span>
       {hourlyUsed} of{" "}
-      <span className="text-red-500 line-through">{Math.round(baseHourlyCapacity)}</span>
-      {" "}
-      <span className="text-blue-500 font-medium">{Math.round(hourlyCapacity)}</span>
-      /h max
+      <span
+        className="text-red-500 line-through"
+        title="Base hourly capacity (replaced by active boost)"
+      >
+        {Math.round(baseHourlyCapacity)}
+      </span>
+      {" \u2192 "}
+      <span
+        className="text-blue-500 font-medium"
+        title="Boosted hourly capacity"
+      >
+        {Math.round(hourlyCapacity)}
+      </span>
+      /h max <span className="text-blue-500 font-medium">(boosted)</span>
     </span>
   ) : (
     `${hourlyUsed} of ${Math.round(hourlyCapacity)}/h max`
@@ -260,7 +270,7 @@ export function DomainReputationCard() {
     <DesignCard
       gradient="default"
       glassmorphic
-      className="w-72"
+      className="w-full lg:w-72"
     >
       <div className="flex items-center gap-2 mb-3">
         <div className="p-1 rounded-md bg-foreground/[0.06] dark:bg-foreground/[0.04]">
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/page-client.tsx
index 153092b8e8..9852d6bf38 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-sent/page-client.tsx
@@ -134,7 +134,7 @@ export default function PageClient() {
         title="Sent"
         description="View email logs and domain reputation"
       >
-        <div data-walkthrough="emails-sent" className="flex gap-6">
+        <div data-walkthrough="emails-sent" className="flex flex-col lg:flex-row gap-6">
           {/* Left side: Email Log with toggle inside card */}
           <div className="flex-1 flex flex-col gap-4">
             <DesignCard
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-settings/domain-settings.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-settings/domain-settings.tsx
index 8b8772e18d..2ab1557af7 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-settings/domain-settings.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-settings/domain-settings.tsx
@@ -40,6 +40,14 @@ const SERVER_TYPE_LABELS: Record<ServerType, string> = {
   standard: "Custom SMTP",
 };
 
+const MANAGED_DOMAIN_STATUS_LABELS: Record<ManagedDomainStatus, string> = {
+  pending_dns: "Pending DNS records",
+  pending_verification: "Pending verification",
+  verified: "Verified",
+  applied: "Applied",
+  failed: "Failed",
+};
+
 const VISIBLE_FIELDS: Record<ServerType, ServerFieldConfig[]> = {
   shared: [],
   managed: [],
@@ -317,7 +325,7 @@ function ManagedEmailSetupDialog(props: { trigger: React.ReactNode }) {
                     <Alert key={domain.domainId} className="bg-slate-500/5 border-slate-500/20">
                       <AlertTitle className="font-mono text-xs">{domain.senderLocalPart}@{domain.subdomain}</AlertTitle>
                       <AlertDescription className="mt-1 flex items-center justify-between gap-2">
-                        <span className="text-xs">Status: {domain.status}</span>
+                        <span className="text-xs">Status: {(MANAGED_DOMAIN_STATUS_LABELS as Record<string, string>)[domain.status] ?? domain.status}</span>
                         <DesignButton
                           size="sm"
                           variant="secondary"
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/page-client.tsx
index a6ad5364e2..55cb3b48a2 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-templates/page-client.tsx
@@ -63,17 +63,17 @@ export default function PageClient() {
               gradient="default"
               contentClassName="p-4"
             >
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-4">
-                  <div className="p-2.5 rounded-xl bg-foreground/[0.04] ring-1 ring-foreground/[0.06]">
+              <div className="flex items-center justify-between gap-3">
+                <div className="flex items-center gap-4 min-w-0 flex-1">
+                  <div className="p-2.5 rounded-xl bg-foreground/[0.04] ring-1 ring-foreground/[0.06] shrink-0">
                     <EnvelopeSimpleIcon className="h-5 w-5 text-muted-foreground" />
                   </div>
-                  <Typography className="font-semibold text-foreground">
+                  <Typography className="font-semibold text-foreground truncate">
                     {template.displayName}
                   </Typography>
                 </div>
 
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 shrink-0">
                   <Button
                     variant="ghost"
                     size="sm"
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/page-client.tsx
index 5b22ee289f..36c2789d77 100644
--- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/email-themes/page-client.tsx
@@ -193,7 +193,7 @@ export default function PageClient() {
                   onClick: handleSaveTheme
                 }}
               >
-                <div className="grid grid-cols-2 gap-4">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   {themes.map((theme) => (
                     <ThemeOption
                       key={theme.id}