Mobile Button Madness, The Danger of Global Changes

Recently, I was tasked with fixing a new problem that popped up on the mobile navigation for a new website I am working on. The buttons looked great just a week ago. But now there were big gaps around these two buttons that were supposed to each fill up half the screen and sit side-by-side.

Troubleshooting

The first thing I checked was the SCSS files git history. I didn’t find any changes to any of the CSS that directly targets these buttons. This sent me down a winding path of checking flexbox positioning and sizing and many other things.

Then I decided to take another look at the recent git commit history for the entire repository. What I found surprised me. There were a few small changes to the globally used “button” component. This component is also used in the navigation.

One change in particular caused the problem. The width for the button wrapper was set to “fit-content”. I found through in-browser developer tools testing that if this was changed to width: 100% the problem was solved.

Conclusion

This was a fairly easy solve for the nav buttons. But this could have wider ranging effects across the site because of the nature of any global change. It is a reminder to tread lightly with wide reaching changes and thoroughly test in multiple screen sizes and on a wide variety of pages and page types.

A mockup of this can be found here:

See the Pen Problems with width by Patrick Thurmond (@pthurmond) on CodePen.