fix(dashboard): resolve UI issues across email-* pages

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>
           );
         })}

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]">

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

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"

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"

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}