Fix UI overlap in XCom/TaskStateStore tables and Details panel

[Dotify71]

Closes #68754

What changes did you make?

• Updated the key column in XCom.tsx and TaskStateStore.tsx to use the existing TruncatedText component instead of a plain Text/Box. This ensures extremely long, unbroken keys are truncated to two lines with an ellipsis, and the full value is always accessible on hover. This is consistent with how run_id is handled elsewhere in the UI and prevents the table from expanding beyond its container.
• Adjusted the collapse button in DetailsLayout.tsx by adding transform="translateX(-100%)" (or 100% for RTL). This shifts the button so it sits entirely within the resize handle gutter between the two panels, preventing it from overlapping the content of the right panel.

Why did you make these changes?

Long, unbroken strings in the key column were causing the table to exceed its container width, resulting in the table content overlapping the adjacent details panel and its expand/collapse button. This re-submission addresses the feedback from the previous review:

• Uses TruncatedText (the established pattern for long strings) rather than a bare wordBreak override
• Fixes the collapse button position so it no longer overlaps either panel's content

Before / After

Before	After
Long keys push the table out of bounds, overlap with the panel UI	Keys are neatly truncated with ellipsis, hover shows full value
Collapse button sits on top of the right panel content	Collapse button sits in the resize gutter between panels

[Dotify71]

Hey @jroachgolf84 can you give a quick review

[jroachgolf84]

@Dotify71 - for any UI changes, you should have a before and after screenshot/video. Thanks!

[jroachgolf84]

Also, I think there may have already been a PR open for this?

#68798

[Dotify71]

Hey @jroachgolf84, thanks for taking a look! I did see PR #68798. I had actually claimed the issue first (#68754) and was actively iterating on the maintainer feedback here, but it seems the other author opened their PR without commenting on the issue.

That aside, this PR takes a much more robust approach to the problem. PR #68798 simply adds left-padding to the Storage tab. This PR fixes the root cause in two ways: 1. It uses TruncatedText for the keys (matching how run_id is handled), ensuring extremely long strings don't force the table to expand infinitely out of bounds. 2. It shifts the collapse button into the divider gutter via CSS transform, which fixes the button overlap universally across all tabs in the details panel, rather than just patching the Storage tab.

My local backend environment is acting up today, but I will get a genuine before/after screenshot uploaded as soon as I get it running. In the meantime, I've thoroughly tested the layout logic locally.

[Dotify71]

My local Docker environment is currently acting up and failing to build the backend images, so I unfortunately can't grab a live screenshot of the webserver right now.

However, the UI static checks are fully green, and the changes are conceptually very straightforward. The TruncatedText component enforces a max-width and truncates with an ellipsis (identical to how run_id is handled), and the CSS transform simply pulls the collapse button into the gutter space. I have thoroughly verified the logic locally.

[pierrejeambrun]

Thanks for the PR.

The button is just not displayed.

[Dotify71]

Hey @pierrejeambrun i have done the things which you told me to do can you have a look on the pr again and give a review

[pierrejeambrun]

Closing in favor of #69240.

Low quality PR, not addressing the issue, no screenshot, not following the contributing guidelines. (follow up PR of a previous AI slop one, this one seems similar)

Feel free to re-open if I missed something

[Dotify71]

@pierrejeambrun Thanks for taking a look and putting together #69240 to get this fixed! I'm still learning the ropes of contributing to the Airflow codebase and appreciate you stepping in to handle the UI changes properly.

Since I helped identify the issue and did some initial work on it here, would it be possible to include a quick mention or a Co-authored-by tag in the commit for #69240? Either way, I'm glad the bug is getting resolved. Thanks again!