From 3ece2ecbe3652581ab62bc211edf0b0ac818a5c9 Mon Sep 17 00:00:00 2001
From: Philipp Rudiger <prudiger@anaconda.com>
Date: Mon, 21 Oct 2024 14:23:20 +0200
Subject: [PATCH 1/2] Ensure Tabulator table content does not overflow

---
 panel/models/tabulator.ts          | 7 +++++++
 panel/styles/models/tabulator.less | 3 +++
 2 files changed, 10 insertions(+)
 create mode 100644 panel/styles/models/tabulator.less

diff --git a/panel/models/tabulator.ts b/panel/models/tabulator.ts
index 3cc745b2a3..51867a87b4 100644
--- a/panel/models/tabulator.ts
+++ b/panel/models/tabulator.ts
@@ -2,6 +2,7 @@ import {display, undisplay} from "@bokehjs/core/dom"
 import {sum} from "@bokehjs/core/util/arrayable"
 import {isArray, isBoolean, isString, isNumber} from "@bokehjs/core/util/types"
 import {ModelEvent} from "@bokehjs/core/bokeh_events"
+import type {StyleSheetLike} from "@bokehjs/core/dom"
 import {div} from "@bokehjs/core/dom"
 import {Enum} from "@bokehjs/core/kinds"
 import type * as p from "@bokehjs/core/properties"
@@ -17,6 +18,8 @@ import {transform_cds_to_records} from "./data"
 import {HTMLBox, HTMLBoxView} from "./layout"
 import {schedule_when} from "./util"
 
+import tabulator_css from "styles/models/tabulator.css"
+
 export class TableEditEvent extends ModelEvent {
   constructor(readonly column: string, readonly row: number, readonly pre: boolean) {
     super()
@@ -547,6 +550,10 @@ export class DataTabulatorView extends HTMLBoxView {
     this.restore_scroll()
   }
 
+  override stylesheets(): StyleSheetLike[] {
+    return [...super.stylesheets(), tabulator_css]
+  }
+
   setCSSClasses(el: HTMLDivElement): void {
     el.className = "pnx-tabulator tabulator"
     for (const cls of this.model.theme_classes) {
diff --git a/panel/styles/models/tabulator.less b/panel/styles/models/tabulator.less
new file mode 100644
index 0000000000..f82ea6ab4a
--- /dev/null
+++ b/panel/styles/models/tabulator.less
@@ -0,0 +1,3 @@
+.tabulator-table {
+  max-width: 100%
+}

From e8c576f04214a135f5dae2904565d006067fc952 Mon Sep 17 00:00:00 2001
From: maximlt <mliquet@anaconda.com>
Date: Wed, 23 Oct 2024 11:37:44 +0200
Subject: [PATCH 2/2] ensure markup panes wrap text in a row content

---
 panel/styles/models/tabulator.less       |  6 +++++-
 panel/tests/ui/widgets/test_tabulator.py | 15 +++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/panel/styles/models/tabulator.less b/panel/styles/models/tabulator.less
index f82ea6ab4a..04c5dc6c46 100644
--- a/panel/styles/models/tabulator.less
+++ b/panel/styles/models/tabulator.less
@@ -1,3 +1,7 @@
 .tabulator-table {
-  max-width: 100%
+  max-width: 100%;
+
+  .tabulator-row .row-content .bk-panel-models-markup-HTML {
+    white-space: normal;
+  }
 }
diff --git a/panel/tests/ui/widgets/test_tabulator.py b/panel/tests/ui/widgets/test_tabulator.py
index 8663a597f2..c7643ed344 100644
--- a/panel/tests/ui/widgets/test_tabulator.py
+++ b/panel/tests/ui/widgets/test_tabulator.py
@@ -23,6 +23,7 @@
 from panel.io.state import state
 from panel.layout.base import Column
 from panel.models.tabulator import _TABULATOR_THEMES_MAPPING
+from panel.pane import Markdown
 from panel.tests.util import get_ctrl_modifier, serve_component, wait_until
 from panel.util import BOKEH_GE_3_6
 from panel.widgets import Select, Tabulator, TextInput
@@ -4079,3 +4080,17 @@ def test_tabulator_header_tooltips(page):
     page.wait_for_timeout(200)
 
     expect(page.locator('.tabulator-tooltip')).to_have_text("Test")
+
+
+def test_tabulator_row_content_markup_wrap(page):
+    # https://github.com/holoviz/panel/issues/7388
+
+    df = pd.DataFrame({"col": ["foo"]})
+    long_markdown = Markdown("xxxx " * 50)
+    widget = Tabulator(df, row_content=lambda row: long_markdown, expanded=[0], width=200)
+
+    serve_component(page, widget)
+
+    md = page.locator('.row-content .bk-panel-models-markup-HTML')
+
+    assert md.bounding_box()['height'] >= 130