Fix logo position in Titlepiece component

[cemms1]

What does this change?

Adjusts the alignment of the logo in the header (Titlepiece component) for the mobileMedium breakpoint

Does this by

• reverting the change in Use The Whole Picture Guardian logo in campaign #14527 to bring the logo positioning styles back into the Titlepiece component
  • This makes it easier to understand the grid and relative positioning offsets because everything is in the same component. Leaving grid CSS definitions away from where the grid is defined makes it tricky for future developers to understand
  • This also keeps the component concerns different: the Logo component is purely to control which logo appears; the Titlepiece component brings together all the separate sub components into a header component
  • Fixes the bug by removing an override for the logo from mobileMedium

Also adds three chromatic snapshot breakpoints to help to capture these issues earlier in future

Why?

I noticed a positioning bug which occurred after some recent work on the Titlepiece component. Since the logo is clickable and the menu has a higher z-index, this prevents users from being able to click "home" easily on mobileMedium and mobileLandscape sized screens.

Screenshots

Before	After

[github-actions]

Deploy build 45236 of Mobile::mobile-apps-rendering to CODE

All deployment options

• Deploy build 45236 of Mobile::mobile-apps-rendering to CODE
• Deploy parts of build 45236 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 21000 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 21000 of dotcom:rendering-all to CODE
• Deploy parts of build 21000 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[domlander]

This makes it easier to understand the grid and relative positioning offsets because everything is in the same component. Leaving grid CSS definitions away from where the grid is defined makes it tricky for future developers to understand.

Fully agree with this point. I was trying to get the logo styles inside the logo component as I think it make sense for them to belong there (e.g. the SVG styles), but agree that the grid styling should live in the Titlepiece component.

Fixes the bug by removing an override for the logo from mobileMedium

Chromatic is showing that the logo has moved to the left in many snapshots on larger screen sizes. I don't think this was intended?

[cemms1]

This makes it easier to understand the grid and relative positioning offsets because everything is in the same component. Leaving grid CSS definitions away from where the grid is defined makes it tricky for future developers to understand.

Fully agree with this point. I was trying to get the logo styles inside the logo component as I think it make sense for them to belong there (e.g. the SVG styles), but agree that the grid styling should live in the Titlepiece component.

I actually think the logo sizing and positioning should be adjusted from outside of the component. We should be able to update the svg sizing using props rather than targeting svg from the outer component CSS, so I get that part! But I think logo should be able to be as flexible as possible and not need to know any context about where it's being used

Chromatic is showing that the logo has moved to the left in many snapshots on larger screen sizes. I don't think this was intended?

Thanks for spotting that! I'd missed how I'd accidentally tweaked styles I didn't mean to! I've hopefully fixed that now 🙏

[gu-prout]

Seen on PROD (merged by @cemms1 8 minutes and 58 seconds ago) Please check your changes!