search

mdn / yari

The platform code behind MDN Web Docs
Mozilla Public License 2.0
1.17k stars 500 forks source link

<th> in properties table for HTML elements is squished #5441

Open danieldafoe opened 2 years ago

danieldafoe commented 2 years ago

Description There's an unnecessary amount of constrained space for the <th> within the table that comes after the first description of an HTML element. It's table that has information such as "Content categories" and "Permitted content". Current state screen shot is below.

Content within the table headers of the table are forced to be squished

Proposed solution Here are a couple screen shots of things I tried.

  1. Giving the <th> a min-width: 20%:
Content within table headers of the table after 20% min width allow more content per line and less wrapping
  1. Giving the <th> a min-width: 20% as well as the same padding as the <td> (padding: .5rem 0 .5rem .75rem) except for the right side since the` already has padding on the left:
Content within table headers of the table after 20% min width allow more content per line and less wrapping
schalkneethling commented 2 years ago

Thank you for reporting @danieldafoe. I am moving this to the Yari repo where we will triage and address this issue.

scottdotweb commented 2 years ago

Setting white-space: nowrap; on the row headers would fix this.

schalkneethling commented 2 years ago

Setting white-space: nowrap; on the row headers would fix this.

Thank you for the suggestion @scottdotjs. I will give this a try. One of the challenges with MDN Web Docs is that we have so many pages so, we need to always ensure we test a possible solution in multiple variations.

mirunacurtean commented 4 months ago

@danieldafoe Closing this now as the styling of the table has since changed and there is more spacing now. image

scottdotweb commented 4 months ago

@mirunacurtean I don't understand why you've closed this, since the issue is still valid? Please compare your screenshot to those in the proposed solutions.

mirunacurtean commented 4 months ago

I misunderstood where it applied. Sorry, reopening.

caugner commented 3 months ago

Hi, we would accept a community PR that sets a min-width for the first column to 20% or 25%, so that the first column usually no longer breaks in the English locale.