Table column width changes as filtering is applied

[nnagewad]

Issue

Description

• Noticed that the table's column widths change as users start filtering their search. This is in reference to the PR Add organisation index page in the GOV.UK Design System.

Why it's a problem

• Appears glitchy as width changes as end-users start entering into the filter text-field.
• Could be a bad experience for those require the use of screen magnifiers

Reference

• Direct link to the comment with screen captures in the link below
  • https://github.com/alphagov/whitehall/pull/7367#issuecomment-1441423072

Screen captures

Instance 1 - Control

Instance 2 - Note the change of width of each column in comparison to Control

Proposal

• Be neat to have a property to define the width of individual columns, ideally in percentage, to ensure that the column width doesn't change as end-users enter a response within the filter textfield.

[davidgisbey]

For now we can override this in the stylesheets like this (.app-view-organisation-index__table is a wrapper)

.app-view-organisation-index__table .govuk-table {
  table-layout: fixed;
}

And can manually set columns width with something like

.app-view-organisation-index__table .govuk-table__row .govuk-table__header:nth-child(1) {
  width: 10%;
}

.app-view-organisation-index__table .govuk-table__row .govuk-table__header:nth-child(2) {
  width: 30%;
}

.app-view-organisation-index__table .govuk-table__row .govuk-table__header:nth-child(3) {

  width: 30%;
}

.app-view-organisation-index__table .govuk-table__row .govuk-table__header:nth-child(4) {
  width: 10%;
}

.app-view-organisation-index__table .govuk-table__row .govuk-table__header:nth-child(5) {
  width: 20%;
}

It would def be a nice to have though if we could configure column width and the filter didn't dynamically adjust column size