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

Fix header product name wrapping onto new line #4498

Merged
merged 2 commits into from
Dec 5, 2023
Merged

Conversation

colinrotherham
Copy link
Contributor

@colinrotherham colinrotherham commented Nov 24, 2023

This PR fixes #1502

See the "Service Manual" topic page for an updated example:
https://govuk-frontend-pr-4498.herokuapp.com/full-page-examples/service-manual-topic

Before

We float the logo and apply width: 33.33%

Before

After

When the logo matches :last-child (no navigation or service name) we can reset the float

After

@colinrotherham colinrotherham added 🐛 bug Something isn't working the way it should (including incorrect wording in documentation) header labels Nov 24, 2023
Copy link

github-actions bot commented Nov 24, 2023

📋 Stats

File sizes

File Size
dist/govuk-frontend-development.min.css 113.72 KiB
dist/govuk-frontend-development.min.js 38.28 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js 77.78 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs 73.09 KiB
packages/govuk-frontend/dist/govuk/all.mjs 3.86 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs 359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css 113.7 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js 38.27 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs 5.38 KiB

Modules

File Size
all.mjs 69.41 KiB
components/accordion/accordion.mjs 21.67 KiB
components/button/button.mjs 4.7 KiB
components/character-count/character-count.mjs 21.24 KiB
components/checkboxes/checkboxes.mjs 5.83 KiB
components/error-summary/error-summary.mjs 6.09 KiB
components/exit-this-page/exit-this-page.mjs 16.08 KiB
components/header/header.mjs 3.9 KiB
components/notification-banner/notification-banner.mjs 4.54 KiB
components/radios/radios.mjs 4.83 KiB
components/skip-link/skip-link.mjs 3.81 KiB
components/tabs/tabs.mjs 9.66 KiB

View stats and visualisations on the review app


Action run for a705245

@colinrotherham colinrotherham requested a review from a team as a code owner November 28, 2023 16:57
@colinrotherham colinrotherham changed the base branch from main to build-dist-diff November 28, 2023 16:58
Copy link

github-actions bot commented Nov 28, 2023

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 156badbe0..c00459365 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -3890,6 +3890,12 @@ only screen and (min-resolution:2dppx) {
         vertical-align: top
     }
 
+    .govuk-header__logo:last-child {
+        width: auto;
+        padding-right: 0;
+        float: none
+    }
+
     .govuk-header__content {
         width: 66.66%;
         padding-left: 15px;

Action run for a705245

Copy link

github-actions bot commented Nov 28, 2023

JavaScript changes to npm package

No changes found.

Action run for a705245

Copy link

github-actions bot commented Nov 28, 2023

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/header/_index.scss b/packages/govuk-frontend/dist/govuk/components/header/_index.scss
index fa80fbdcb..08865369e 100644
--- a/packages/govuk-frontend/dist/govuk/components/header/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/header/_index.scss
@@ -168,6 +168,13 @@
       padding-right: $govuk-gutter-half;
       float: left;
       vertical-align: top;
+
+      // Reset float when logo is the last child, without a navigation
+      &:last-child {
+        width: auto;
+        padding-right: 0;
+        float: none;
+      }
     }
   }
 

Action run for a705245

@colinrotherham colinrotherham force-pushed the build-dist-diff branch 2 times, most recently from f514d76 to 1bca0a6 Compare November 28, 2023 19:46
Copy link
Member

@romaricpascal romaricpascal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Examples look fine on the review app 🙌🏻 ⛵

@colinrotherham colinrotherham merged commit 8c8891a into main Dec 5, 2023
45 checks passed
@colinrotherham colinrotherham deleted the header-float branch December 5, 2023 12:35
owenatgov pushed a commit that referenced this pull request Jan 11, 2024
Fix header product name wrapping onto new line
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working the way it should (including incorrect wording in documentation) header
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product name wraps onto new line with non full-width header
3 participants