Display issue for queries that have long strings in the result

[madalincm]

Issue Summary:

Build identifier: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:55.0) Gecko/20100101 Firefox/55.0

Steps to Reproduce:

1. Open this query https://pipeline-sql.stage.mozaws.net/queries/123/source#149
2. Observe the pie chart.

Expected results:

The pie chart is displayed correctly.

Actual results:

The text is overlapping the pie chart.

Notes/Issues:

Verified in FF55(Win7).
Screencast for this issue:

[alison985]

I build in a way to truncate X Axis label names to a specific character length under the options in the X Axis edit pane of the chart editor. The default character length is 300. You can change it to a number to shorten the lengths.

Here is a test query:

select action, count(1)
from events
group by 1
union
select 'asdkjfa;lsdjfla;sdjflkasjdfl;kasjdfl as adlkfjasdlfkj al;ksdjf laksdjf lkasjdfl aksjdf asdf asdfas asdfs aslkjflaksdjflaskdjf lkasdjfl aksdjfl kasjdflk jasdf s', 1

I had tried word-wrap in CSS and max-width in CSS and those did not work/were not enforced, so I went with truncation.

[madalincm]

Verified in FF55(Win7) in stmo-stage
The test query Alison provided works well, there are no display issues in that case:

But the issue is still reproducing for queries that have longer strings in the results. I have created a new test query using the same code as the original one: https://pipeline-sql.stage.mozaws.net/queries/138/source#183
Please view this screencast:

[madalincm]

Using the what Alison suggested in her latest comment works as expected. Closing this bug and marking it as verified fixed.