Display table breaks when description is too big
Closed this issue · 2 comments
If the description contains very long lines, then the table will become scrollable. All the important buttons are now out of the view...
We can solve this by wrapping the text, but I don't know if this is preferred since it may result in very high rows. Another way of solving this is too add some expansion button for the description, just like this example: https://quasar.dev/vue-components/table#expanding-rows
Or maybe cut the text at some point and when the user clicks it, a popup will be displayed with the full description?
Originally posted by @JJ-8 in #110 (review)
I did some testing to see if I could find a decent solution and I have now the following:
The buttons will wrap to always 2x2. This will prevent an ugly 1x3 layout and an unpractical 1x4 layout. Since this result in the row being a bit higher by default, you don't have the problem often that the rows are very uneven of height because of a variable description length.
Another screenshot when a task does not contain 5 paragraphs of lorem ipsum:
I have also converted <pre> to <div> since that was required for the word wrapping for the description (#113).
Any thoughts about this? Is this better than vertical scrolling?
I'll create a PR for this if this is a good solution for this issue (and it is accepted that <pre> becomes <div>).