diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 635a7b10c2..d59a84e1bb 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -8,6 +8,8 @@ $govuk-page-width: 1140px; @import "components/contact-details"; @import "components/table"; +$applications-table-actions-gap: 10px; + // TODO: move into component .gem-c-success-alert, .gem-c-error-alert { @@ -88,15 +90,22 @@ $govuk-page-width: 1140px; } } -.govuk-table__actions { - display: flex; - flex-direction: column; - align-items: end; - gap: 10px; - - @media (min-width: 40.0625em) { +.govuk-table__actions { + @include govuk-media-query($until: $vertical-on-smallscreen-breakpoint) { + .govuk-button, .govuk-link { + display: block; + + &:not(:last-child) { + margin-bottom: $applications-table-actions-gap; + } + } + } + + @include govuk-media-query($from: $vertical-on-smallscreen-breakpoint) { + display: flex; flex-direction: row; align-items: center; justify-content: flex-end; + gap: $applications-table-actions-gap; } } diff --git a/app/assets/stylesheets/components/_table.scss b/app/assets/stylesheets/components/_table.scss index 9abdc1bd37..8fe9136a09 100644 --- a/app/assets/stylesheets/components/_table.scss +++ b/app/assets/stylesheets/components/_table.scss @@ -176,6 +176,10 @@ $table-row-even-background-colour: govuk-colour("light-grey", $legacy: "grey-4") padding-right: 1em; text-align: left; word-break: initial; + + &--visually-hidden { + padding-right: 0; + } } @include govuk-media-query($from: $vertical-on-smallscreen-breakpoint) { diff --git a/app/views/account/applications/index.html.erb b/app/views/account/applications/index.html.erb index bc19421dad..75f90dd17d 100644 --- a/app/views/account/applications/index.html.erb +++ b/app/views/account/applications/index.html.erb @@ -30,7 +30,7 @@ head: [ { text: "Name" }, { text: "Description" }, - { text: content_tag(:span, "Actions", class: "govuk-visually-hidden") }, + { text: content_tag(:span, "Actions", class: "govuk-visually-hidden"), visually_hidden: true }, ], rows: @applications_with_signin.map do |application| [ @@ -43,6 +43,7 @@ }, ] end, + vertical_on_small_screen: true, } %>
@@ -51,7 +52,7 @@ head: [ { text: "Name" }, { text: "Description" }, - { text: content_tag(:span, "Actions", class: "govuk-visually-hidden") } + { text: content_tag(:span, "Actions", class: "govuk-visually-hidden"), visually_hidden: true } ], rows: @applications_without_signin.map do |application| [ @@ -60,5 +61,6 @@ { text: wrap_links_in_actions_markup([account_applications_grant_access_link(application)]) } ] end, + vertical_on_small_screen: true, } %>
diff --git a/app/views/api_users/applications/index.html.erb b/app/views/api_users/applications/index.html.erb index de4235dbfb..2294038452 100644 --- a/app/views/api_users/applications/index.html.erb +++ b/app/views/api_users/applications/index.html.erb @@ -35,7 +35,7 @@ head: [ { text: "Name" }, { text: "Description" }, - { text: content_tag(:span, "Actions", class: "govuk-visually-hidden") }, + { text: content_tag(:span, "Actions", class: "govuk-visually-hidden"), visually_hidden: true }, ], rows: @applications.map do |application| [ @@ -44,4 +44,5 @@ { text: wrap_links_in_actions_markup([api_users_applications_permissions_link(application, @api_user)]) } ] end, + vertical_on_small_screen: true, } %> diff --git a/app/views/components/_table.html.erb b/app/views/components/_table.html.erb index 5ec626729c..712a62081b 100644 --- a/app/views/components/_table.html.erb +++ b/app/views/components/_table.html.erb @@ -30,7 +30,8 @@ format: item[:format], href: item[:href], data_attributes: item[:data_attributes], - sort_direction: item[:sort_direction] + sort_direction: item[:sort_direction], + visually_hidden: item[:visually_hidden] } %> <% end %> <% end %> @@ -47,7 +48,7 @@ } %> <% elsif vertical_on_small_screen && head.any? %> <%= t.cell nil, { format: cell[:format] } do %> -