email inboc

frontend/src/components/MailDetail.jsx

@@ -18,11 +18,25 @@ function joinAddresses(value) {
   if (!value) return "";
   const addresses = Array.isArray(value) ? value : [value];
   return addresses
-    .map((item) => (typeof item === "string" ? item : item?.email || item?.address))
+    .map((item) => {
+      if (typeof item === "string") return item;
+      if (item?.name && item?.address) return `${item.name} <${item.address}>`;
+      return item?.email || item?.address || "";
+    })
     .filter(Boolean)
     .join(", ");
 }
 
+function messageBody(email) {
+  const text = (email?.body_text || email?.text_body || email?.plain_text || "").trim();
+  if (text) return { mode: "text", value: text };
+  const html = (email?.body_html || "").trim();
+  if (html) return { mode: "html", value: html };
+  const snippet = (email?.snippet || "").trim();
+  if (snippet) return { mode: "text", value: snippet };
+  return { mode: "text", value: "This message has no readable content." };
+}
+
 function detailDate(email) {
   const value =
     email?.received_at || email?.sent_at || email?.created_at || email?.updated_at;
@@ -51,6 +65,7 @@ export default function MailDetail({
   onAnalyzeAttachment,
 }) {
   const files = email ? attachmentCount(email) : 0;
+  const body = email ? messageBody(email) : null;
 
   return (
     <article className={`mail-detail${email || loading ? " open" : ""}`} aria-live="polite">
@@ -124,7 +139,11 @@ export default function MailDetail({
             <time>{detailDate(email)}</time>
           </div>
           <div className="mail-detail-body">
-            {email.body_text || email.text_body || email.plain_text || "This message has no plain-text content."}
+            {body?.mode === "html" ? (
+              <div className="mail-detail-body-html" dangerouslySetInnerHTML={{ __html: body.value }} />
+            ) : (
+              body?.value
+            )}
           </div>
         </div>
       )}

frontend/src/styles.css

@@ -649,16 +649,20 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
 .sticky-note-form-actions button[type="submit"] { background:var(--ink); color:white; }
 .sticky-note-form-actions button:disabled { opacity:.5; cursor:not-allowed; }
 
-.mail-detail { min-width:0; display:none; position:absolute; inset:0; z-index:4; overflow:auto; border-left:0; background:#fffefd; }
+.mail-detail { min-width:0; display:none; position:absolute; inset:0; z-index:4; overflow:hidden; border-left:0; background:#fffefd; }
-.mail-detail.open { display:block; }
+.mail-detail.open { display:flex; flex-direction:column; }
-.mail-detail-toolbar { min-height:62px; padding:10px 13px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
+.mailbox-shell.detail-visible .mailbox-categories,
+.mailbox-shell.detail-visible .mailbox-rows,
+.mailbox-shell.detail-visible .mailbox-pagination { display:none; }
+.mailbox-shell.detail-visible .mailbox-list-pane { display:flex; flex-direction:column; min-height:min(680px,calc(100vh - 200px)); }
+.mail-detail-toolbar { flex-shrink:0; min-height:62px; padding:10px 13px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
 .mail-detail-toolbar>div { display:flex; gap:3px; }
 .mail-detail-toolbar button { width:36px; padding:0; }
 .mail-detail-toolbar button.danger { color:#bb4e43; }
 .mail-detail-close { display:none!important; }
 .mail-detail-state { min-height:320px; padding:30px; display:grid; place-items:center; color:#8d8891; font-size:11px; text-align:center; }
 .mail-detail-state.error { color:#a94f40; }
-.mail-detail-content { padding:26px clamp(19px,3vw,34px) 40px; }
+.mail-detail-content { flex:1; min-height:0; overflow-y:auto; padding:26px clamp(19px,3vw,34px) 40px; }
 .mail-detail-content h2 { margin:0 0 22px; overflow-wrap:anywhere; font:600 21px/1.3 "Manrope"; letter-spacing:-.7px; }
 .mail-detail-meta { padding-bottom:19px; display:flex; align-items:start; justify-content:space-between; gap:14px; border-bottom:1px solid var(--line); }
 .mail-detail-meta>div { min-width:0; display:grid; gap:3px; }
@@ -669,6 +673,9 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
 .mail-detail-meta small,.mail-detail-meta time { color:#928d96; font-size:8px; line-height:1.5; }
 .mail-detail-meta time { white-space:nowrap; }
 .mail-detail-body { padding-top:23px; color:#383440; font-size:12px; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
+.mail-detail-body-html { white-space:normal; }
+.mail-detail-body-html p { margin:0 0 12px; }
+.mail-detail-body-html a { color:#4d74c4; text-decoration:underline; }
 
 .compose-dock { position:fixed; right:var(--compose-dock-right,16px); bottom:16px; z-index:45; display:flex; flex-direction:column; align-items:flex-end; gap:10px; pointer-events:none; transition:right 160ms ease-out; }
 .compose-dock-expanded,.compose-dock-chips { display:flex; flex-direction:row-reverse; align-items:flex-end; gap:16px; pointer-events:auto; }
@@ -838,10 +845,8 @@ body.compose-blank-open .mailbox-empty-cta { opacity:.42; filter:saturate(.55);
   .mailbox-list-pane { border-right:0; }
   .mailbox-shell.detail-visible .mailbox-toolbar,
   .mailbox-shell.detail-visible .mailbox-filters,
-  .mailbox-shell.detail-visible .mailbox-rows,
+  .mailbox-shell.detail-visible .mailbox-list-footer { display:none; }
-  .mailbox-shell.detail-visible .mailbox-list-footer,
+  .mailbox-shell.detail-visible .mailbox-list-pane { min-height:min(100vh - 120px,720px); }
-  .mailbox-shell.detail-visible .mailbox-pagination { display:none; }
-  .mailbox-shell.detail-visible .mailbox-list-pane { display:flex; min-height:520px; }
   .mail-detail { position:static; flex:1; }
   .mail-detail-close { display:flex!important; }
   .compose-dock { right:12px !important; bottom:12px; }