t/416: Improved responsiveness of the forms in narrow viewports

[oleq]

Suggested merge commit message (convention)

Feature: Improved responsiveness of the forms in narrow viewports (see #416).

---

Additional information

• This PR should not close the issue. This is only the first action we take to improve the responsiveness. More is yet to come.
• This is a CI/tests PR.
• PRs with actual changes:
  • t/ckeditor5/416: Improved responsiveness of the form and actions views ckeditor5-link#205
  • t/ckeditor5/416: Feature: Improved responsiveness of the text alternative view ckeditor5-image#239
  • t/ckeditor5/416: Feature: Improved responsiveness of the media form view ckeditor5-media-embed#60
  • t/ckeditor5/416: Feature: Introduced the ck-media-phone RWD mixin; improved responsive of various views ckeditor5-theme-lark#204

Things to decide

• Is the media query breakpoint correct https://github.com/ckeditor/ckeditor5-theme-lark/compare/t/ckeditor5/416?expand=1#diff-5ac1a3c4aac63c20ab773daf9fbe1983R7? I picked it at random from the net (it's the screen size of some iPhone :P) but maybe we can do better than that.
  • Also... should we use max-device-width instead?
• If you browse the branches you'll notice that a lot of code repeats because the UI is almost the same in each case: [ input/url preview button, save button, cancel button ]. Maybe we could give such a structure a class name, implement it somewhere, and make the existing code and this new responsive approach shorter. This could be a follow–up.

[oleq]

P.S. I consider this situation and an edge case and a sacrifice for the sake of an easy solution

[dkonopka]

First of all with this PR I would recommend to add viewport settings in manual tests:
<meta name="viewport" content="width=device-width, initial-scale=1">.

https://github.com/ckeditor/ckeditor5-dev/blob/master/packages/ckeditor5-dev-tests/lib/utils/manual-tests/template.html#L4

[dkonopka]

If you browse the branches you'll notice that a lot of code repeats because the UI is almost the same in each case: [ input/url preview button, save button, cancel button ]

I agree this is not perfect solution, but ATM we can live with it I guess.

Anyway, I was thinking about something like mixin for buttons in the forms (_rwd-form-buttons) to not duplicate code, but as you said it can be a follow-up.

[dkonopka]

And my last thought, if we are using --ck-spacing-standard for labels, then it would be great to use it for buttons too (instead of --ck-spacing-tiny).

ATM (left), proposal (right)

[oleq]

That's a good idea @dkonopka! It's way easier to tap. I added it in ckeditor/ckeditor5-theme-lark@33c974c.

Oh, BTW, can you finish the review, please?

[dkonopka]

👍