Configuration table is hard to read

[lentzi90]

Several charts use a table with parameter, description and default value columns. Unfortunately, it is very hard to read the tables because of the narrow column used for the content. See Prometheus for an example.

I'm not suggesting that we just change the max-width. This would make the rest of the text hard to read with too long lines. Maybe there could be a separate section just for the table, with full width?

What do you think?

[prydonius]

Agreed @lentzi90, it does look pretty difficult to read. I'm not sure how much control we have over the table rendering since we're just using https://github.com/markedjs/marked. @Angelmmiguel any ideas?

[Angelmmiguel]

You're right @prydonius. Since we're rendering the markdown file it's quite complicated to customize the table. The same issue happens on Github: https://github.com/helm/charts/tree/master/stable/prometheus#configuration.

We can make more obvious you need to scroll the table using an inner shadow. However, that's not gonna solve the readability issue.

Another option could be to include an "expand table" button that removes the overflow: auto; property:

We can modify how marked renders the table using the renderer helpers: https://marked.js.org/#/USING_PRO.md.

What do you think @prydonius @lentzi90 ?

[prydonius]

@Angelmmiguel to clarify, are you suggesting having the table always be expanded, or to have a button next to it to expand it? I think the latter could be very useful, the former might end up hiding other elements.

[Angelmmiguel]

@prydonius yea, I'm talking about adding a button to expand the table (toggle). The button will be showed when users' mouse is hover the table. This button will toggle the overflow property for the table.

To highlight the table is expanded and avoid issues with the right sidebar, I'd add a high z-index and a box-shadow to the table when it's expanded.

[prydonius]

@Angelmmiguel that sounds good to me!

[lentzi90]

This sounds good to me as well! :+1: