search

pwa-builder / PWABuilder

The simplest way to create progressive web apps across platforms and devices. Start here. This repo is home to several projects in the PWABuilder family of tools.
https://docs.pwabuilder.com
Other
2.69k stars 282 forks source link

Service Worker Options page layout is broken #2228

Closed JudahGabriel closed 2 years ago

JudahGabriel commented 2 years ago

Analyze a URL then go to Service Worker Options page. You'll see the button layout is broken:

image

ghost commented 2 years ago

Hello JudahGabriel, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will investigate the issue and help solve it ASAP. Other community members may also look into the issue and provide feedback 🙌

jgw96 commented 2 years ago

Hello all! So, this bug is affecting the Service Worker page. The problem is most likely in this component https://github.com/pwa-builder/PWABuilder/blob/main/src/script/components/sw-picker.ts. If you are not familiar with Lit (the library we use to build our web components), that's totally okay! The docs for Lit can be found here https://lit.dev/, although if you know CSS all you need to look for is the css block https://github.com/pwa-builder/PWABuilder/blob/main/src/script/components/sw-picker.ts#L39 at the top of the component. For help running the project, getting your environment set up etc, you can check our README https://github.com/pwa-builder/PWABuilder#pwabuilder

marabesi commented 2 years ago

I noticed that changing with with from 100% to 95% fixes the issue:

image

Therefor, I don't know if that is a good approach?

jgw96 commented 2 years ago

Hey @marabesi , hmmm, I think this is a good start! Maybe using EM or even VW units here would be better? Reading this https://www.freecodecamp.org/news/css-unit-guide/, im thinking EM units might be better. Let me know what you think! Also if you want, feel free to go ahead and open a PR and we can iterate on that directly. Huge thanks!

jgw96 commented 2 years ago

This was fixed in the above PR, thanks @marabesi !