fix: Mobile screen rotation fix

[KyleKlus]

This pr fixes the current visual bug, when the plugin is used on a mobile device in landscape mode (See pictures).
Further more this pr also adds a "how to develop & test ui changes" to the contribution page, so that these issues wont arise again in a future ui change.

PC design

For reference: Old design used on a pc

New design used on a pc

Mobile design

For reference: Old design on a mobile device in landscape mode with the visual bug

New design on a mobile device in landscape mode

Old design on a small mobile device in landscape mode with visual bug

New design on a small mobile device in landscape mode

New contributing text

[codecov]

Codecov Report

Attention: Patch coverage is 96.11650% with 4 lines in your changes missing coverage. Please review.

Project coverage is 93.20%. Comparing base (b2daf9d) to head (df6eb2b).
Report is 1 commits behind head on master.

Files with missing lines	Patch %	Lines
src/question-postponement-list.ts	33.33%	4 Missing ⚠️

❌ Your patch status has failed because the patch coverage (96.11%) is below the target coverage (100.00%). You can increase the patch coverage or adjust the target coverage.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1194      +/-   ##
==========================================
+ Coverage   92.89%   93.20%   +0.30%     
==========================================
  Files          42       42              
  Lines        4574     4662      +88     
  Branches      647      374     -273     
==========================================
+ Hits         4249     4345      +96     
+ Misses        318      315       -3     
+ Partials        7        2       -5     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[KyleKlus]

The thought process behind the end design

The whole thing broke because I didnt check the mobile landscape mode 🙄, when I developed the more detailed session progress title text and didnt assume that someone moved everything around so dramatically.
Someone wanted to make room in the mobile landscape mode and has thus moved all the buttons to the side, to open up some space in the middle (see #990 & #998).

To fix this, I moved the progress text to the card context area, shrunk down the response buttons for small screens and only moved the upper control buttons to the left side in the landscape mode, such that more space is opened up for viewing the cards. I did my best to respect the wish to have more viewing space and at the same time to have a good and consistant design.

PS.: The new contributing text is there so that no one repeats my mistakes 😅

[KyleKlus]

The last commit changes the looks of the deck progress info a tiny bit(see pictures below).

Changes:

• Deck progress info now with bold font weight(highlights the usefullness of the information better):

• Chosen deck progress info now without sub deck counter if there are no subdecks (removes redundant information for a better focus):

[bentoner]

@KyleKlus Thanks for fixing this. Works for me on iPad and Desktop.

[st3v3nmw]

Hi @KyleKlus, thanks for the fix!

My only question is, can we make the card context always appear on a separate line on its own? Something like this:

Currently, it moves to the bottom when the card context is too long which is a bit distracting if it keeps switching places:

[KyleKlus]

Sure, let's do that 😊.

I'll work on it either this evening or tomorrow, so it should be ready until Tuesday.

[st3v3nmw]

LGTM, thank you for the UI fixes!