Add responsive sizing of VCAuthn login page for mobile devices

[Gavinok]

This PR resolves #420 using media queries as well as bootstrap.

Here is the new desktop view

To ensure uniform rendering of the boarder it no longer uses a dedicated svg and instead uses CSS boarders

On mobile devices the card style is removed and instead the entire screen is used to make the most of the smaller displays.

[Gavinok]

With the removal of media queries the css is simplified. I have also migrated the button css to make use of bootstrap. Here is the updated look on desktop

and on mobile

[esune]

@Gavinok can you resolve the conflicts - likely with code from the last merged PR?

[Gavinok]

@esune working on this now

[Gavinok]

@esune resolved the conflict

[esune]

LGTM based on screenshots and what demonstrated during live review.

[loneil]

Holding this as deep link is no longer delivering request message (working on main fine)

[loneil]

@Gavinok see comment above, not working with form action, needs to be an href link I believe.

Probably: https://stackoverflow.com/questions/45542773/how-to-style-an-anchor-as-a-button-in-bootstrap-4

[loneil]

Can we do some additional tweaks to the widths of the "header-desc" (and possibly other) containers?

They're thinner in which is crowding texts.

Existing:

Current:

Initial text (also could use a top margin here when opening the "other device" section)

Declined

(Probably same with approved and expired states)

Scanned mask over the qr code is thinner

[Gavinok]

@Gavinok see comment above, not working with form action, needs to be an href link I believe.

Probably: https://stackoverflow.com/questions/45542773/how-to-style-an-anchor-as-a-button-in-bootstrap-4

Dang that was what made is able to remove all that custom button CSS :(

[esune]

I'm wondering if we should tackle the UI redesign/tweaks as part of the full move to Bootstrap, rather than potentially do the work twice? #431

[loneil]

@Gavinok see comment above, not working with form action, needs to be an href link I believe.
Probably: https://stackoverflow.com/questions/45542773/how-to-style-an-anchor-as-a-button-in-bootstrap-4

Dang that was what made is able to remove all that custom button CSS :(

No should just need to change button to a I just did that on my local and it worked.

[Gavinok]

Reference in new issue
Edit
Hide
Delete

It was more to do with the css not indicating the button was disabled but I was able to work around this anyways

[Gavinok]

@loneil is it just me or does the qr code expire extremely fast now? Did I make a change that could effect that?

[Gavinok]

Can we do some additional tweaks to the widths of the "header-desc" (and possibly other) containers?

They're thinner in which is crowding texts.

Existing:

Current:

Initial text (also could use a top margin here when opening the "other device" section)

Declined (Probably same with approved and expired states)

Scanned mask over the qr code is thinner

I have just updated this. There should be a little more space. I figured we should add some line breaks for more consistent text formatting while I was at it.

[loneil]

Works for me, should be good to deploy for more device testing in dev. Can refine further with bootstrap framework.