govuk-design-system icon indicating copy to clipboard operation
govuk-design-system copied to clipboard

Update width of columns in Nunjucks options table

Open romaricpascal opened this issue 3 years ago • 1 comments
trafficstars

What

Adjust the width of the columns in the Nunjucks options table to allow longer names for the options.

Why

Internationalisation work on govuk-frontend adds some pretty long option names due to pluralisation suffix (on top of the "Html" suffix used to make the translation keys). Because both the option name and type have the same width (29%), that leaves very little space for the option name, which wraps.

Screenshot 2022-10-03 at 17 37 56

Who needs to work on this

Developers, Designers (? thinking there may be a concious decision of setting the type column to being 29% of the table, maybe not putting the type too far away from the name?)

Who needs to review this

Developers, Designers

Done when

  • [ ] Decide on a different column width adjustment
  • [ ] Implement new column width

romaricpascal avatar Oct 03 '22 16:10 romaricpascal

If that's helpful, here's a screenshot of a quick adjustment. That only postpones the wrapping to smaller viewport sizes (which happen pretty quickly) but I think we should at least try to prevent it when the content is at its widest.

Screenshot 2022-10-03 at 17 56 51

Through some quick and dirty CSS:

/* 
   Make all columns the same width so description doesn't get compressed 
   (will need some checks for older browsers)
*/
th {
  width: 100%;
}

/* Override current width set to 29% */
.app-options__limit-table-cell {
  width: 100%;
}

/* Limit type column to something smaller as it'll ever contain:
	"object", "boolean", "string" or maybe "number"/"integer" */
.app-options__limit-table-cell + .app-options__limit-table-cell {
  width: 4em;
}

romaricpascal avatar Oct 03 '22 16:10 romaricpascal