Dialog should clip content overflow

[amcclain]

This might be more general than just the Exception dialog - we should review and ensure a fix is applied at the most efficient level. In general I think think we would ever want a dialog to overflow like this.

XH.handleException('This is an error with a reallyLongStringLikeTheKindOfThingThatCanBeProducedByExceptionsAndStuffLikeThatWeHaveSeen and it overflows')

[TomTirapani]

And interesting question is do we want to elide the overflowing long word (using text-overflow: ellipsis), or break it (using word-break: break-word)?

[amcclain]

Looks like Github must do break-word here? If that works nicely, sounds like the better option to me.

XH.handleException('This is an error with a reallyLongStringLikeTheKindOfThingThatCanBeProducedByExceptionsAndStuffLikeThatWeHaveSeenAlsoreallyLongStringLikeTheKindOfThingThatCanBeProducedByExceptionsAndStuffLikeThatWeHaveSeen and it overflows')

[lbwexler]

this would be a nice one to fix -- overflow errors to me are the most unsettling to me. Seems just so deeply broken to have text escaping from its borders...

[amcclain]

So I think I had the wrong understanding of how break-word would work. I assumed it would be "break word if there is no way to get it to fit with normal wrapping because the word is too long overall," but instead it appears to be "break words whenever you wrap":

Given that, maybe better to go with ellipsis? Sorry it's a minor thing but the common exception above does look weird, and I'm curious re. the CSS options generally.

[shravnk]

My mistake here. I set word-wrap to break-all to avoid unsightly white spaces preceding these long strings.

Easiest change would be to set the rule to break-word. Could also look into handling special cases with more complex CSS logic.

[amcclain]

Thanks for the explanation - swapped to break-word and will keep an eye on it.

[cnrudd]

well, it worked for 5 years... turns out break-word breaks numbers in a date-picker opened in a dialog:

This issue was discovered in a client app in a datepicker in a grid in a dialogBody.

This issue will only happen in a dialog if the dateinput is inside a dialogBody element and this dateInput prop is set:

portalContainer: [dialogBody dom el or some dom el inside the dialogBody dom el]

It is not necessary to set this prop when using a dateInput inside a dialog, but the dateInput used in our Grid DateEditor component has this prop set this way for the reason explained in the accompanying comment:

        // We need to render the day picker popover inside the grid viewport in order for
        // `stopEditingWhenCellsLoseFocus` to work properly - otherwise the day picker becomes
        // unusable due to the grid losing focus and stopping editing when clicking inside picker
portalContainer = props.gridModel.agApi.gridBodyCtrl?.eBodyViewport;

So, making the portal container the dialogBody or an element inside the dialogBody caused datepicker's portal to be inside the dialogBody, and therefore inherit the dialogBody's styles, one of which is:

word-break: break-word;

as set by our css here:

hoist-react/kit/blueprint/styles.scss