Fix UI overlap in XCom/TaskStateStore tables and Details panel

[Dotify71]

Closes #68754

What changes did you make?

• Updated the key columns in XCom.tsx and TaskStateStore.tsx to use the TruncatedText component. This ensures that extremely long, unbroken keys are gracefully truncated with an ellipsis and fully visible on hover (matching how run_id is handled). This prevents the table from expanding infinitely horizontally and getting cut off.
• Adjusted the collapse button in DetailsLayout.tsx by applying transform="translateX(-100%)" (or 100% for RTL). This pulls the button into the resize handle area so it sits cleanly between the two panels rather than directly overlapping the textual content of the right panel.

Why did you make these changes?

To resolve the overlap bugs reported in #68754 and address the review feedback regarding the collapse button overlapping the right panel content.

[jroachgolf84]

@Dotify71 - please include a screenshot or video with this issue now being resolved!

[Dotify71]

@jroachgolf84 - Here is the screenshot verifying the issue is now resolved locally! As you can see, extremely long keys in the XCom / Task State Store tables now properly wrap to the next line instead of overlapping the UI boundaries.

Let me know if there's anything else you need before merging!

[jroachgolf84]

Hmmm, I think this was a different issue than what was originally filed. Can you share a screenshot of the issue beforehand? I'm not sure if this fixes anything?

[pierrejeambrun]

Looks like untested gen AI PR, or a misunderstanding.

In your screenshot we can clearly see the bug is still happening. (the collapse drawer button still overlapping the right panel content)

Closing, feel free to re-open if you are willing to test this and make sure this actually solves the linked issue.

[Dotify71]

@pierrejeambrun Thanks for the feedback! I've just created a new pr of the fixes can you check that #69114