bottom-drawer's UI is broken when some data is too long

[Pamplemousse]

In tables, columns have currently a fixed width.

However, when containing long data (for example, in the history tab, some URL can get pretty long when they have plenty of parameters), the body columns are getting "stacked" on the left, making it difficult to read.

Here is a made-up example that show the differences.

First, everything is normal.

With very long URL, content get clumped up on the left (breaking alignment with the table head).

Here are a couple of things I thought of:

• Make the thead and tbody in the same table so that content stay aligned between them (tried that out, but as I am lame in CSS, I could not get the header to stay fixed, and would need a bit of rewrite for the UI related to filtering).
• Wrap cell content when overflowing.

[dscrobonia]

Nice find!

Make the thead and tbody in the same table so that content stay aligned between them (tried that out, but as I am lame in CSS, I could not get the header to stay fixed, and would need a bit of rewrite for the UI related to filtering).

I am also lame in CSS so unfortunately I can't give any advice here.

I think the easiest (and most user friendly) solution would be to just truncate the url after some point. There's no reason to really need to see the whole thing from this view anyways. What are your thoughts about that @Pamplemousse ?

[jaywon]

Couple discussions we have going on around the CSS at a high level for this section but maybe a happy medium for now would be to overflow:hidden in this view? If a user wanted to view the full URL they could select the message for the full context.

The sticky header is really a key UX feature so joining them in the same table isn't going to be feasible. Other non table options may exist as discussed in #449 .