Jumpy UI On Mobile

[jdevries3133]

I started taking the quiz on mobile and it was very challenging to use because the UI keeps jumping up and down and I'm constantly pressing the wrong choices.

Also, a small thing, the component that shows the test result id has too big a font size on mobile. It matches off the right of the viewport.

Thanks!

[jdevries3133]

I hoped to offer to investigate further and to help but I'm not familiar with vuejs, so I apologize for the barren complaint; good luck!

[maccyber]

I started taking the quiz on mobile and it was very challenging to use because the UI keeps jumping up and down and I'm constantly pressing the wrong choices.

I recall mr. @moxnes looked at that earlier and we could not find a satisfying solution for it. Don't remember the details, but I agree - it's somewhat annoying

Also, a small thing, the component that shows the test result id has too big a font size on mobile. It matches off the right of the viewport.

I think we can fix that with something like: https://css-tricks.com/fitting-text-to-a-container/

at https://github.com/rubynor/bigfive-web/blob/master/pages/result/_id.vue#L32-L40

[sesam]

Is the jumpiness due to the text area being considered narrow enough to fit together with the language chooser, and then again becoming considered not fitting? It does seem so, as the effect (noticeable on 360px screen width) disappears if I just add a big enough min-width, from at least 3em or at least 38px:

As the effect is that the clock is pushed down, the safest fix is max-width: 5em; which should be enough to fit the highest likely timer values.