[Enhancement] Add desktop functionality to existing modal

[RasmusKjeldgaard]

• I have written a good issue

Describe the enhancement

I would like to have the current modal (not ModalV2) enhanced with desktop styles and functionality during the migration period, so modal becomes a nice fallback until ModalV2 is feature complete. This includes:

• styling the modal wrapper component with correct paddings for header, footer and content
• global styles that define width, height and border radius of modal on larger screens
  • multiple desktop sizes according to spec
• removing drawer styles on desktop so it shows as normal modal
• show close button to the right instead of arrow down to the left in header on desktop
• What should happen to the 'open in full height' option?
• make modal scrollable to bottom on larger screen sizes
• update tests
• modal shadow should dynamically scale
• min-height on fixed t-shirt sizes
• divider line in header
  • always shown on larger screens
  • should also be shown on mobile but only when modal is scrolled
• replace border radii with new 32px value
• make button in feature hint correct color

Known issues that needs fixing

• Keyboard pushes up modal and limits space - should keyboard appear on top?
• some modals cannot scroll all the way to the bottom, content is cut off - it has something to do with containment on modal wrapper

  @mixin contain-content() {
    ion-content {
        contain: content;
    }
  }
  

---

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Refinement

• Request that the issue is UX refined; do not proceed until this is done.
• Request that the issue is tech refined; do not proceed until this is done.

Implementation

The contributor who wants to implement this issue should:

• Make sure you have read: "Before you get coding".
• Signal to others you are working on the issue by assigning yourself.
• Create a branch from the develop branch following our branch naming convention.
• Publish a WIP implementation to Github as a draft PR and ask for feedback.
• Make sure you have implemented tests following the guidelines in: "The good: Test".
• Update the cookbook with examples and showcases.

Review

Once the issue has been implemented and is ready for review:

• Do a self-review.
• Create a pull-request. If you created a draft PR during implementation you can just mark that as "ready for review".