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.