[github-actions]

• Wrap long values in Dag version diff table so After stays visible

The Versions tab compares two Dag versions in a table whose path,
before and after cells show serialized values of up to 120 characters.
These are mostly JSON or long paths with no spaces, so the browser
could not wrap them. The table grew far wider than its container
(2146px in a 1100px window), and since DataTable has no horizontal
scroll, the rightmost After column was clipped out of view. Narrower
windows made it worse.

Let those cells wrap with overflow-wrap: anywhere and
white-space: pre-wrap. overflow-wrap: break-word is not enough: it
does not lower the cell's min-content width, so the table would still
overflow. The trade-off is that short paths can break mid-word in
narrow windows.

• UI: Read a Dag version diff's values as JSON, not as a cut string

A change to a Dag version carries the serialized value on each side, and
a whole task added or removed carries its entire payload. Flattened into
a cell and cut at 120 characters, those values said little more than
that something had changed; as a JSON preview they name the keys that
differ and open in place when the rest matters.

The cells were also set as code, whose surface sits on the table's own
striped rows at nearly the same shade, and a path was free to break
after any character, so a column squeezed by its neighbours read
vertically, one glyph per line. A side the change does not have now
leaves its cell empty, since a dash reads as a value the version holds.

Carrying a preview on each side of a comparison asks two things of the
rendered JSON field that its other callers never did. It sized itself
for one payload per row, where one long entry — a dotted class path, a
URL — could widen its column past the pane whatever bound it was given,
since a badge sets its value on one line. And its copy button, shown
outright, competes with the values for attention on every row it
appears in; waiting for the pointer, or for focus so a keyboard can
still reach it, keeps a list to its content. Both now hold wherever a
JSON field is rendered.

What the comparison says about itself was spread over three stacked
rows above the table, and the warning that a bound had cut it short sat
nowhere near the field that sets that bound — the one control that can
lift it. The summary now heads the table's own header row, beside the
columns menu, and the bound carries its own notice.

The tab's components were sharing two files, which left the table, its
cells and the page's query in the same place as whichever one was being
read.

Co-Authored-By: Claude noreply@anthropic.com

---

(cherry picked from commit 5c021ce)

Co-authored-by: Brent Bovenzi brent@astronomer.io
Co-authored-by: jedcunningham 66968678+jedcunningham@users.noreply.github.com
Co-authored-by: Claude noreply@anthropic.com

[github-actions]

Hi maintainer, this PR was merged without a milestone set.
We've automatically set the milestone to Airflow 3.4.1 based on: merged to version branch
If this milestone is not correct, please update it to the appropriate milestone.

This comment was generated by Milestone Tag Assistant.