From e28d7cbb052947a5fec7345603be08eeecc95e6b Mon Sep 17 00:00:00 2001 From: Tom Byers Date: Thu, 10 Mar 2022 10:35:02 +0000 Subject: [PATCH] Fix comments, remove flex-grow and unused margin Based on comments on the associated pull request, (and my realisation that I was using flexbox wrong): https://github.com/alphagov/notifications-admin/pull/4171 Removal of flex-grow I added `flex-grow: 1` to make the description and status flex items grow to fill the container, at least until they hit their `max-width`. They already have `width: 100%` which achieves the same thing so this removes it. --- app/assets/stylesheets/views/dashboard.scss | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss index 44d9ce713..6a49f05b0 100644 --- a/app/assets/stylesheets/views/dashboard.scss +++ b/app/assets/stylesheets/views/dashboard.scss @@ -63,11 +63,13 @@ // and making children inline mimic `justify-content: space-between` display: inline-block; - // simulate govuk-grid-column-one-half spacing - smaller screens + // This simulates a 50% column in a govuk grid on smaller screens + // govuk grid columns go to 100% width on smaller screens width: 100%; - flex-grow: 1; - // simulate govuk-grid-column-one-half spacing - larger screens + // This simulates a 50% column in a govuk grid on larger screens + // as with govuk grid, this includes a gap between columns to ensure the contents + // are separated by a space @include govuk-media-query($from: tablet) { max-width: calc(50% - #{$govuk-gutter-half}); } @@ -76,10 +78,6 @@ & > .file-list-status { overflow: hidden; // old IE hack to make it vertically line up with the hint margin-bottom: 0; // cancel margin-bottom from .govuk-hint class - - @include govuk-media-query($from: tablet) { - margin-bottom: 10px; // match margin-bottom on hint - } } & > .file-list-hint-large {