Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update width of columns in Nunjucks options table #2369

Open
2 tasks
romaricpascal opened this issue Oct 3, 2022 · 1 comment
Open
2 tasks

Update width of columns in Nunjucks options table #2369

romaricpascal opened this issue Oct 3, 2022 · 1 comment
Labels
design website Issues relating to the Design System website itself

Comments

@romaricpascal
Copy link
Member

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 romaricpascal added the awaiting triage Needs triaging by team label Oct 3, 2022
@romaricpascal
Copy link
Member Author

romaricpascal commented Oct 3, 2022

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;
}

@querkmachine querkmachine added design website Issues relating to the Design System website itself and removed awaiting triage Needs triaging by team labels Apr 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design website Issues relating to the Design System website itself
Projects
None yet
Development

No branches or pull requests

2 participants