Editing Button clashes with Chat icon in Safari

[emmarichardson]

When using Safari browser, the editing on button is not functional. I discovered that the graphic for the button for some reason sits on top of the chat icon and if you click to the right of the editing button in a blank space on the navbar, it will in fact function. The chat icon is not accessible at all from Safari. I have attached screenshots of the view from Safari and the view from Chrome. I have tested this on both my live and dev sites. I also went through my additional css and removed each piece individually to verify that it was not interfering with the view.

[gjb2048]

Dear @emmarichardson I can't afford a Mac (electronic kind) or the cost of online testing tools on different platforms, so with the browser development tools in Safari, does removing the 'd-flex' markup on the form:

solve the issue?

G

[emmarichardson]

That didn't help - I was able to get the icon to move to the right by removing an absolute position tag but it would still was not functioning correctly. I will keep playing with it and see if I can figure it out.

[gjb2048]

@emmarichardson Thanks for trying. The whole area is Flexbox orientated if that helps.

[gjb2048]

@emmarichardson Looked and core CSS is using some sort of padding adjustment to move things around, so please try the following custom CSS:

.navbar-nav .nav-editswitch .custom-switch {
  padding-left: 0;
  width: 1.75rem;
}

.navbar-nav .nav-editswitch .custom-switch .custom-control-label::before {
  left: 0;
}

.navbar-nav .nav-editswitch .custom-switch .custom-control-label::after {
  left: 2px;
}

and see if that fixes it please.

[emmarichardson]

That fixed it and does not interfere with Chrome display. Thanks Gareth!

[gjb2048]

@emmarichardson Cool, I'll make it permanent. Odd that Boost is not affected.

[emmarichardson]

Yes, a little weird but it is all the way to the right of the navbar in Boost so maybe that is why.

[gjb2048]

@emmarichardson This is the patch https://github.com/gjb2048/moodle-theme_foundation/commit/44558e151924747f9cf3bc611da605a4ecc2b9ac

[gjb2048]

Ah, forgot to remove the nbsp!

[gjb2048]

@emmarichardson Still an issue?

[emmarichardson]

No, I haven't noticed it and know that I have upgraded a time or two so you must have got it fixed. Thanks Gareth!