Dialoge auf mobile

[peggimann]

Wenn ein Dialog auf mobile Ansicht geöffnet wird ist der Abstand zum Rand zu hoch.
Die Dialoge haben neu im CSS eine max-height gesetzt bekommen. @lkleisa hat eine Umsetzung vorher gemacht, wie es ohne funktioniert hat.

Es gibt bereits einen PR, diesen zuerst ansehen und wenn nötig erweitern

Anforderungen

• Die Dialoge auf Mobilen Devices entspricht dem Figma
• Die Trennlinie für den Scrollbaren bereich ist ebenfalls in der Webversion erstellt
• Das Verhalten ist auf allen Browsern das gleiche (Edge, Firefox, Safari)

Akzeptanzkriterien

• Dialoge sind angepasst gemäss Anforderungen
• Tests sind geschrieben
• UX hat das feature gereviewd

[kcinay055679]

In Safari werden die Buttons der Dialoge abgeschnitten.

Um das zu testen kann Browserstack verwendet werden. Browserstack ist nicht nur ein Simulator sondern verwendet echte Geräte welche gemirrored werden. Zusätzlich unterstützt Browserstack auch das Verbinden mit dem eigenen System damit kann sogar auf localhost zugegriffen werden.

[kcinay055679]

(Potential) TODO's

• unify CancelDialog andConfirmDialog
• Check if all dialog should have height 100% on mobile (Yes they should)
• Adjust styling of dialogs to Figma
• create error component (new ticket?)
• generalize spacing in all components (parent class for the label and .okr-form-input)
• use .keyResult-attribute-show where appropriate
• $keyResult-attribute-bg vs $display-element
• angular material inputs or native?