From 6727ffaae0ff1cf4e789729770bbadda0030a64b Mon Sep 17 00:00:00 2001
From: Silas Krause <krausesilas@gmail.com>
Date: Fri, 28 Nov 2025 07:28:57 +0100
Subject: [PATCH] Fix markdown styles regression (#28202)

* Render markdown table in wrapper.

* Fix markdown styles

* Fix formatting
---
 src/components/ha-markdown.ts    | 14 ++++++++------
 src/resources/markdown-worker.ts | 12 ++++++++++++
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/ha-markdown.ts b/src/components/ha-markdown.ts
index a1e7b886b7..404e24b6b9 100644
--- a/src/components/ha-markdown.ts
+++ b/src/components/ha-markdown.ts
@@ -88,8 +88,7 @@ export class HaMarkdown extends LitElement {
     }
     ol,
     ul {
-      list-style-position: inside;
-      padding-inline-start: 0;
+      padding-inline-start: 1rem;
     }
     li {
       &:has(input[type="checkbox"]) {
@@ -140,16 +139,19 @@ export class HaMarkdown extends LitElement {
       margin: var(--ha-space-4) 0;
     }
     table {
-      border-collapse: collapse;
-      display: block;
-      overflow-x: auto;
+      border-collapse: var(--markdown-table-border-collapse, collapse);
+    }
+    div:has(> table) {
+      overflow: auto;
     }
     th {
       text-align: start;
     }
     td,
     th {
-      border: 1px solid var(--markdown-table-border-color, transparent);
+      border-width: var(--markdown-table-border-width, 1px);
+      border-style: var(--markdown-table-border-style, solid);
+      border-color: var(--markdown-table-border-color, var(--divider-color));
       padding: 0.25em 0.5em;
     }
     blockquote {
diff --git a/src/resources/markdown-worker.ts b/src/resources/markdown-worker.ts
index d415c2391f..dfade11123 100644
--- a/src/resources/markdown-worker.ts
+++ b/src/resources/markdown-worker.ts
@@ -55,6 +55,18 @@ const renderMarkdown = async (
 
   marked.setOptions(markedOptions);
 
+  marked.use({
+    renderer: {
+      table(...args) {
+        const defaultRenderer = new marked.Renderer();
+        // Wrap the table with block element because the property 'overflow'
+        // cannot be applied to elements of display type 'table'.
+        // https://www.w3.org/TR/css-overflow-3/#overflow-control
+        return `<div>${defaultRenderer.table.apply(this, args)}</div>`;
+      },
+    },
+  });
+
   const tokens = marked.lexer(content);
   return tokens.map((token) =>
     filterXSS(marked.parser([token]), {