fix: long table name fit hover popover size

[ShuchiZhang]

We noticed an issue that the hover popover for table cannot fit when the table name is long. Which was like:

We notice there was a max-width limit and should be removed to make the popover size larger when the table name is long like:

[czgu]

hey Shuchi, thanks for fixing it! Is it possible to keep the max-width and wrap the text if it is too long?

[ShuchiZhang]

hey Shuchi, thanks for fixing it! Is it possible to keep the max-width and wrap the text if it is too long?

I use the zero width space to wrap the title and it now looks like:

But with long strings without "_", it might overflow the popover. But these cases won't happen too often.

There's also a css solution to add

.DataTableHoverContent {
    max-width: 400px;
    overflow-wrap: break-word;

    .DataTableTags {
        margin-bottom: 4px;
        margin-left: -2px;
    }
}

It will break up words but will always work like:

[czgu]

@ShuchiZhang oh i think it is better if we just do a pure css fix instead of using js. I added a PR https://github.com/pinterest/querybook/pull/974