Offline notice mangles layout

[tripflex]

First, thank you for creating this, great boilerplate to use for setting up a vue + vuetify + firebase project! Your work on this is greatly appreciated!

Love the offline notice as well, just wanted to mention that I noticed the layout seems to be mangled when the notice is showing:

Found this is related to this CSS code for has-alert In src/App.vue:

.has-alert {
  padding: 64px 0px 0px !important;
}

I tried playing around with this in Chrome dev tools simulating offline (which is awesome btw), and i'm only able to replicate the issue requiring this CSS once when in mobile preview mode, but oddly enough can't reproduce it again to give you the specifics.

Thoughts?

It seems when removing that CSS that the layout tends to update itself .. not sure if this is something required when running on a mobile device in webview or not, but figured I would mention it.

Again, thanks for creating this can't wait to start using it!

[sayhicoelho]

Hi @tripflex. I'm glad to know you've liked the boilerplate.

This is a known issue. But I did not know that it could impact the UI/UX somehow. Also I did not have tested the offline behaviour in mobile device.

If you can help us with a PR to solve the issue on mobile devices, I'll be graceful!

Thank you for notice.

[tripflex]

@sayhicoelho I was actually just testing using Chrome dev tools ... the issue only seemed to happen on the desktop version though. I will try and build a version on the mobile and see how it reacts and let you know