Use custom breakpoint for table on users page

As agreed in the collaboration session on Wed 06 Sep [1], we're
increasing the value of this breakpoint from the standard "tablet"
breakpoint of 641px to a custom breakpoint of 940px. We chose this value
so that the table changes into "vertical" mode before the table content
overflows the right-hand side of the container and before a scrollbar
appears at the bottom of the page.

This change also affects the API users index page, but seems to work OK
there too.

[1]: https://trello.com/c/2gvEJKw9/207-migrate-users-page-to-use-design-system#comment-64f87c053ccc070a1fae1821

app/assets/stylesheets/components/_table.scss

@@ -6,6 +6,7 @@ $table-border-colour: govuk-colour("mid-grey", $legacy: "grey-2");
 $table-header-border-width: 2px;
 $table-header-background-colour: govuk-colour("light-grey", $legacy: "grey-3");
 $vertical-row-bottom-border-width: 3px;
+$vertical-on-smallscreen-breakpoint: 940px;
 $sort-link-active-colour: govuk-colour("white");
 $sort-link-arrow-size: 14px;
 $sort-link-arrow-size-small: 8px;
@@ -157,7 +158,7 @@ $table-row-even-background-colour: govuk-colour("light-grey", $legacy: "grey-4")
     text-align: right;
   }
 
-  @include govuk-media-query($until: tablet) {
+  @include govuk-media-query($until: $vertical-on-smallscreen-breakpoint) {
     .govuk-table__cell {
       padding-right: 0;
     }
@@ -178,7 +179,7 @@ $table-row-even-background-colour: govuk-colour("light-grey", $legacy: "grey-4")
     word-break: initial;
   }
 
-  @include govuk-media-query($from: tablet) {
+  @include govuk-media-query($from: $vertical-on-smallscreen-breakpoint) {
     .govuk-table__head {
       clip: auto;
       -webkit-clip-path: none;