Improve HTML email formatter design

- Add 800px max-width to main container for better readability
- Update container padding to 24px top, 32px left/right, 32px bottom
- Match all borders to status color (red/yellow/green) when color is set
- Adjust left padding to 28px when colored border is applied (to account for 4px thicker left border)
- Set fact list (questions/answers) left column to fixed 160px width
- Add 8px extra top and bottom margin to fact list blocks
- Add max-height (400px) and scroll to code blocks to prevent excessive vertical space
- Fix expandable block arrow to rotate 90° when opened (▶ → ▼) with smooth transition
- Update test fixtures to reflect all design changes
- Add code_block_long.html fixture to demonstrate scrollable code blocks

These changes only affect HTML email formatting and do not impact Slack (Block Kit) or Teams (Adaptive Cards) integrations.

Author: yonnist

elementary/messages/formats/html.py

@@ -43,7 +43,8 @@ class HTMLFormatter:
         "background-color:#ffffff",
         "border:1px solid #e5e7eb",
         "border-radius:6px",
-        "padding:16px",
+        "padding:24px 32px 32px 32px",
+        "max-width:800px",
     ]
 
     _SECTION_MARGIN = "margin:0 0 12px"
@@ -72,7 +73,8 @@ def format_message_block(self, block: MessageBlock | ExpandableBlock) -> str:
                 '<pre style="margin:0;padding:12px;'
                 "background-color:#f8fafc;border-radius:4px;"
                 "font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;"
-                'font-size:13px;line-height:1.5;white-space:pre-wrap;">'
+                'font-size:13px;line-height:1.5;white-space:pre-wrap;'
+                'max-height:400px;overflow-y:auto;">'
                 f"{code_html}</pre>"
             )
         elif isinstance(block, LinesBlock):
@@ -243,14 +245,15 @@ def _format_fact_list_block(self, block: FactListBlock) -> str:
             + "".join(rows)
             + "</table>"
         )
-        return self._wrap_section(table_html)
+        # Use custom margin with +8px on top and bottom
+        return f'<div style="margin:8px 0 20px">{table_html}</div>'
 
     def _format_fact_row(self, fact: FactBlock) -> str:
         title_html = self._format_line_block(fact.title)
         value_html = self._format_line_block(fact.value)
         title_style = (  # noqa: E231,E702
             "padding:4px 12px;font-weight:600;font-size:14px;color:#111827;"
-            "max-width:200px;white-space:nowrap;"
+            "width:160px;white-space:nowrap;"
         )
         value_weight = "700" if fact.primary else "400"
         value_style = f"padding:4px 12px;font-weight:{value_weight};font-size:14px;"  # noqa: E231,E702
@@ -297,22 +300,29 @@ def _format_expandable_block(self, block: ExpandableBlock) -> str:
             "cursor:pointer;font-size:14px;user-select:none;-webkit-user-select:none;"
             "list-style:none;"
         )
-        # Show appropriate arrow based on expanded state
-        arrow = "▼" if block.expanded else "▶"
+        # Always use right arrow - CSS will rotate it when opened
+        arrow = "▶"
         arrow_style = (
-            "margin-right:8px;color:#6b7280;font-size:10px;"  # noqa: E231,E702
+            "display:inline-block;margin-right:8px;color:#6b7280;font-size:10px;"
+            "transition:transform 0.2s ease;"  # noqa: E231,E702
         )
         body_style = (
             "padding:12px 16px;border-top:1px solid #e5e7eb;"  # noqa: E231,E702
         )
         open_attr = " open" if block.expanded else ""
-        # Need inline style to hide webkit disclosure marker
+        # Add CSS to rotate arrow when details is open and hide webkit disclosure marker
+        css_style = (
+            "<style>"
+            "summary::-webkit-details-marker{display:none;}"
+            "details[open] > summary > span{transform:rotate(90deg);}"
+            "</style>"
+        )
         summary_with_marker_hidden = (
             f'<summary style="{summary_style}">'
             f'<span style="{arrow_style}">{arrow}</span>'
             f"{title_html}"
             "</summary>"
-            "<style>summary::-webkit-details-marker{display:none;}</style>"
+            f"{css_style}"
         )
         return (
             f'<details style="{container_style}"{open_attr}>'
@@ -329,8 +339,13 @@ def _coerce_table_cell(self, cell: object) -> str:
     def _build_container_style(self, color: Color | None) -> str:
         styles: list[str] = list(self._CONTAINER_STYLES)
         if color and color in COLOR_MAP:
+            # Replace the default border color with the status color
+            styles = [
+                s if not s.startswith("border:") else f"border:1px solid {COLOR_MAP[color]}"
+                for s in styles
+            ]
             styles.append(f"border-left:4px solid {COLOR_MAP[color]}")  # noqa: E231
-            styles.append("padding-left:12px")  # noqa: E231
+            styles.append("padding-left:28px")  # noqa: E231
         return ";".join(styles)
 
 

tests/unit/messages/formats/html/fixtures/all_blocks_green.html

@@ -1,2 +1,2 @@
-<div style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;line-height:1.5;color:#1f2937;background-color:#ffffff;border:1px solid #e5e7eb;border-radius:6px;padding:16px;border-left:4px solid #33b989;padding-left:12px"><div style="margin:0 0 12px"><h1 style="margin:0;font-size:18px;line-height:1.4;">Main Header</h1></div><div style="margin:0 0 12px"><div style="margin:0;">Normal text <strong>Bold text</strong> <em>Italic text</em></div></div><div style="margin:0 0 12px"><pre style="margin:0;padding:12px;background-color:#f8fafc;border-radius:4px;font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:13px;line-height:1.5;white-space:pre-wrap;">def hello_world():
-    print(&#x27;Hello, World!&#x27;)</pre></div><hr style="border:none;border-top:1px solid #e5e7eb;margin:16px 0;" /><div style="margin:0 0 12px"><ul style="margin:0;padding-left:24px;list-style-position:outside;"><li style="margin:0 0 4px;">First bullet point</li><li style="margin:0 0 4px;">Second bullet point</li></ul></div><div style="margin:0 0 12px"><ul style="margin:0;padding-left:24px;list-style-position:outside;"><li style="margin:0 0 4px;list-style:none;"><span style="margin-right:6px;"><span style="margin-right:4px;">✅</span></span>Check item</li></ul></div><div style="margin:0 0 12px"><table style="width:100%;border-collapse:collapse;"><tr><td style="padding:4px 12px;font-weight:600;font-size:14px;color:#111827;max-width:200px;white-space:nowrap;">Status</td><td style="padding:4px 12px;font-weight:400;font-size:14px;">Passed</td></tr><tr><td style="padding:4px 12px;font-weight:600;font-size:14px;color:#111827;max-width:200px;white-space:nowrap;">Tags</td><td style="padding:4px 12px;font-weight:400;font-size:14px;">test, example</td></tr></table></div><table style="width:100%;border-collapse:collapse;margin:0 0 12px;border:1px solid #e5e7eb;border-radius:6px;overflow:hidden;"><thead><tr><th style="text-align:left;padding:8px;border-bottom:1px solid #e5e7eb;font-weight:600;font-size:14px;background-color:#f8fafc;">Column 1</th><th style="text-align:left;padding:8px;border-bottom:1px solid #e5e7eb;font-weight:600;font-size:14px;background-color:#f8fafc;">Column 2</th><th style="text-align:left;padding:8px;border-bottom:1px solid #e5e7eb;font-weight:600;font-size:14px;background-color:#f8fafc;">Column 3</th></tr></thead><tbody><tr><td style="padding:8px;border-bottom:1px solid #f3f4f6;vertical-align:top;font-size:14px;">Row 1 Col 1</td><td style="padding:8px;border-bottom:1px solid #f3f4f6;vertical-align:top;font-size:14px;">Row 1 Col 2</td><td style="padding:8px;border-bottom:1px solid #f3f4f6;vertical-align:top;font-size:14px;">Row 1 Col 3</td></tr><tr><td style="padding:8px;border-bottom:1px solid #f3f4f6;vertical-align:top;font-size:14px;">Row 2 Col 1</td><td style="padding:8px;border-bottom:1px solid #f3f4f6;vertical-align:top;font-size:14px;">Row 2 Col 2</td><td style="padding:8px;border-bottom:1px solid #f3f4f6;vertical-align:top;font-size:14px;">Row 2 Col 3</td></tr></tbody></table><details style="border:1px solid #e5e7eb;border-radius:6px;margin:16px 0;"><summary style="padding:12px 16px;font-weight:600;background-color:#f8fafc;cursor:pointer;font-size:14px;user-select:none;-webkit-user-select:none;list-style:none;"><span style="margin-right:8px;color:#6b7280;font-size:10px;">▶</span>Show Details</summary><style>summary::-webkit-details-marker{display:none;}</style><div style="padding:12px 16px;border-top:1px solid #e5e7eb;"><div style="margin:0 0 12px"><div style="margin:0;"><span style="margin-right:4px;">🔎</span> <strong>Details Section</strong></div><div style="margin:0;">Here&#x27;s some content with a <a style="color:#2563eb;text-decoration:none;" href="https://example.com" target="_blank" rel="noopener noreferrer">link</a></div></div></div></details><div style="margin:0 0 12px"><div style="margin:0;"><span style="color:#0ea5e9;">user1</span> <code style="font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;background-color:#eef2ff;border-radius:3px;padding:1px 4px;font-size:12px;">select 1</code></div></div></div>
+<div style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px;line-height:1.5;color:#1f2937;background-color:#ffffff;border:1px solid #33b989;border-radius:6px;padding:24px 32px 32px 32px;max-width:800px;border-left:4px solid #33b989;padding-left:28px"><div style="margin:0 0 12px"><h1 style="margin:0;font-size:18px;line-height:1.4;">Main Header</h1></div><div style="margin:0 0 12px"><div style="margin:0;">Normal text  <strong>Bold text</strong>   <em>Italic text</em></div></div><div style="margin:0 0 12px"><pre style="margin:0;padding:12px;background-color:#f8fafc;border-radius:4px;font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:13px;line-height:1.5;white-space:pre-wrap;max-height:400px;overflow-y:auto;">def hello_world():
+    print(&#x27;Hello, World!&#x27;)</pre></div><hr style="border:none;border-top:1px solid #e5e7eb;margin:16px 0;" /><div style="margin:0 0 12px"><ul style="margin:0;padding-left:24px;list-style-position:outside;"><li style="margin:0 0 4px;">First bullet point</li><li style="margin:0 0 4px;">Second bullet point</li></ul></div><div style="margin:0 0 12px"><ul style="margin:0;padding-left:24px;list-style-position:outside;"><li style="margin:0 0 4px;list-style:none;"><span style="margin-right:6px;"><span style="margin-right:4px;">✅</span></span>Check item</li></ul></div><div style="margin:8px 0 20px"><table style="width:100%;border-collapse:collapse;"><tr><td style="padding:4px 12px;font-weight:600;font-size:14px;color:#111827;width:160px;white-space:nowrap;">Status</td><td style="padding:4px 12px;font-weight:400;font-size:14px;">Passed</td></tr><tr><td style="padding:4px 12px;font-weight:600;font-size:14px;color:#111827;width:160px;white-space:nowrap;">Tags</td><td style="padding:4px 12px;font-weight:400;font-size:14px;">test, example</td></tr></table></div><table style="width:100%;border-collapse:collapse;margin:0 0 12px;border:1px solid #e5e7eb;border-radius:6px;overflow:hidden;"><thead><tr><th style="text-align:left;padding:8px;border-bottom:1px solid #e5e7eb;font-weight:600;font-size:14px;background-color:#f8fafc;">Column 1</th><th style="text-align:left;padding:8px;border-bottom:1px solid #e5e7eb;font-weight:600;font-size:14px;background-color:#f8fafc;">Column 2</th><th style="text-align:left;padding:8px;border-bottom:1px solid #e5e7eb;font-weight:600;font-size:14px;background-color:#f8fafc;">Column 3</th></tr></thead><tbody><tr><td style="padding:8px;border-bottom:1px solid #f3f4f6;vertical-align:top;font-size:14px;">Row 1 Col 1</td><td style="padding:8px;border-bottom:1px solid #f3f4f6;vertical-align:top;font-size:14px;">Row 1 Col 2</td><td style="padding:8px;border-bottom:1px solid #f3f4f6;vertical-align:top;font-size:14px;">Row 1 Col 3</td></tr><tr><td style="padding:8px;border-bottom:1px solid #f3f4f6;vertical-align:top;font-size:14px;">Row 2 Col 1</td><td style="padding:8px;border-bottom:1px solid #f3f4f6;vertical-align:top;font-size:14px;">Row 2 Col 2</td><td style="padding:8px;border-bottom:1px solid #f3f4f6;vertical-align:top;font-size:14px;">Row 2 Col 3</td></tr></tbody></table><details style="border:1px solid #e5e7eb;border-radius:6px;margin:16px 0;"><summary style="padding:12px 16px;font-weight:600;background-color:#f8fafc;cursor:pointer;font-size:14px;user-select:none;-webkit-user-select:none;list-style:none;"><span style="display:inline-block;margin-right:8px;color:#6b7280;font-size:10px;transition:transform 0.2s ease;">▶</span>Show Details</summary><style>summary::-webkit-details-marker{display:none;}details[open] > summary > span{transform:rotate(90deg);}</style><div style="padding:12px 16px;border-top:1px solid #e5e7eb;"><div style="margin:0 0 12px"><div style="margin:0;"><span style="margin-right:4px;">🔎</span>   <strong>Details Section</strong></div><div style="margin:0;">Here&#x27;s some content with a  <a style="color:#2563eb;text-decoration:none;" href="https://example.com" target="_blank" rel="noopener noreferrer">link</a></div></div></div></details><div style="margin:0 0 12px"><div style="margin:0;"><span style="color:#0ea5e9;">user1</span>   <code style="font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;background-color:#eef2ff;border-radius:3px;padding:1px 4px;font-size:12px;">select 1</code></div></div></div>