This is an automated email from the ASF dual-hosted git repository.
dongjoon pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/spark.git
The following commit(s) were added to refs/heads/master by this push:
new 129c4b0f6baf [SPARK-55768][UI] Improve responsive layout with
table-responsive wrappers and viz overflow
129c4b0f6baf is described below
commit 129c4b0f6baf05fecaadf27dd295691a6096b70b
Author: Kent Yao <[email protected]>
AuthorDate: Sat Mar 7 10:30:16 2026 -0800
[SPARK-55768][UI] Improve responsive layout with table-responsive wrappers
and viz overflow
### What changes were proposed in this pull request?
Adds Bootstrap 5 responsive layout improvements (4 files, +14 lines):
1. **`UIUtils.listingTable`** — Wraps all table output in `<div
class="table-responsive">` for horizontal scrolling on narrow viewports.
Affects all tables across Jobs, Stages, Storage, Executors, and Environment
pages.
2. **`spark-dag-viz.css`** — Adds `overflow-x: auto` to `#dag-viz-graph`
container so DAG visualizations scroll horizontally instead of overflowing.
3. **`spark-sql-viz.css`** — Adds `overflow-x: auto` to `#plan-viz-graph`
container for SQL plan visualizations.
4. **`UIUtilsSuite`** — Updated 2 test assertions to match new
`table-responsive` wrapper.
### Why are the changes needed?
Tables and visualizations currently overflow on narrow viewports (mobile,
tablet, split-screen) because they have no responsive handling.
`table-responsive` adds horizontal scrolling when content exceeds container
width, and `overflow-x: auto` prevents visualization SVGs from breaking the
page layout.
Part of SPARK-55760 (Spark Web UI Modernization).
### Does this PR introduce _any_ user-facing change?
Yes — tables show a horizontal scrollbar on narrow screens instead of
overflowing. DAG/SQL visualizations scroll instead of breaking layout.
### How was this patch tested?
UIUtilsSuite (8 tests) passes.
### Was this patch authored or co-authored using generative AI tooling?
Yes, co-authored with GitHub Copilot.
Closes #54670 from yaooqinn/SPARK-55768.
Authored-by: Kent Yao <[email protected]>
Signed-off-by: Dongjoon Hyun <[email protected]>
---
core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.css | 4 ++++
core/src/main/scala/org/apache/spark/ui/UIUtils.scala | 2 ++
core/src/test/scala/org/apache/spark/ui/UIUtilsSuite.scala | 4 ++++
.../org/apache/spark/sql/execution/ui/static/spark-sql-viz.css | 4 ++++
4 files changed, 14 insertions(+)
diff --git
a/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.css
b/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.css
index 38d4b6cf50bc..af43f52f8c8f 100644
--- a/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.css
+++ b/core/src/main/resources/org/apache/spark/ui/static/spark-dag-viz.css
@@ -56,6 +56,10 @@
--spark-dag-node-fill: #1b4f72;
}
+#dag-viz-graph {
+ overflow-x: auto;
+}
+
#dag-viz-graph a, #dag-viz-graph a:hover {
text-decoration: none;
}
diff --git a/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
b/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
index ea7a9e3efbd7..4e64b4c394d8 100644
--- a/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
+++ b/core/src/main/scala/org/apache/spark/ui/UIUtils.scala
@@ -471,12 +471,14 @@ private[spark] object UIUtils extends Logging {
}
}
}
+ <div class="table-responsive">
<table class={listingTableClass} id={id.map(Text.apply)}>
<thead>{headerRow}</thead>
<tbody>
{data.map(r => generateDataRow(r))}
</tbody>
</table>
+ </div>
}
def makeProgressBar(
diff --git a/core/src/test/scala/org/apache/spark/ui/UIUtilsSuite.scala
b/core/src/test/scala/org/apache/spark/ui/UIUtilsSuite.scala
index 8da6c9c1a555..3670b60e0729 100644
--- a/core/src/test/scala/org/apache/spark/ui/UIUtilsSuite.scala
+++ b/core/src/test/scala/org/apache/spark/ui/UIUtilsSuite.scala
@@ -161,6 +161,7 @@ class UIUtilsSuite extends SparkFunSuite {
val generated = listingTable(header, generateDataRowValue, data,
tooltipHeaders = tooltip)
val expected: Node =
+ <div class="table-responsive">
<table class="table table-bordered table-hover table-sm table-striped
sortable">
<thead>
<th width="" class="">{header(0)}</th>
@@ -174,6 +175,7 @@ class UIUtilsSuite extends SparkFunSuite {
{data.map(generateDataRowValue)}
</tbody>
</table>
+ </div>
assert(trim(generated(0)) == trim(expected))
}
@@ -187,6 +189,7 @@ class UIUtilsSuite extends SparkFunSuite {
val generated = listingTable(header, generateDataRowValue, data)
val expected =
+ <div class="table-responsive">
<table class="table table-bordered table-hover table-sm table-striped
sortable">
<thead>
<th width="" class="">{header(0)}</th>
@@ -196,6 +199,7 @@ class UIUtilsSuite extends SparkFunSuite {
{data.map(generateDataRowValue)}
</tbody>
</table>
+ </div>
assert(trim(generated(0)) == trim(expected))
}
diff --git
a/sql/core/src/main/resources/org/apache/spark/sql/execution/ui/static/spark-sql-viz.css
b/sql/core/src/main/resources/org/apache/spark/sql/execution/ui/static/spark-sql-viz.css
index 55ba5aa47869..0659d0c80de0 100644
---
a/sql/core/src/main/resources/org/apache/spark/sql/execution/ui/static/spark-sql-viz.css
+++
b/sql/core/src/main/resources/org/apache/spark/sql/execution/ui/static/spark-sql-viz.css
@@ -136,3 +136,7 @@ svg path.linked {
#plan-viz-graph g.cluster text {
fill: var(--bs-body-color);
}
+
+#plan-viz-graph {
+ overflow-x: auto;
+}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
