You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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
The text was updated successfully, but these errors were encountered:
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.
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;
}
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.
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
The text was updated successfully, but these errors were encountered: