Center content of destinations page

[stveit]

Fixes #1079

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 79.83%. Comparing base (035e3fd) to head (dc94ea6).

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #1078   +/-   ##
=======================================
  Coverage   79.83%   79.83%           
=======================================
  Files         145      145           
  Lines        5267     5267           
=======================================
  Hits         4205     4205           
  Misses       1062     1062           

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

[podliashanyk]

Good start! 🙌
Although there are additional changes to be made in order to stabilize the width properties of the items in this flexbox. If destination collapse element is collapsed, it becomes very short. I would suggest to add following to the #form-list-div and form in _create_form.html: class="max-w-4xl w-full". This way we ensure that each item doesn't extend a max width of 56rem (896px), yet it will always try to extend to 896px if possible (because of w-full). This way we have a nice stable width which with a few extra tweaks (separate PR) would make destinations page responsive to different screen sizes.
I would also suggest to center contents of the create form and collapse-content, looks much prettier together with width changes suggested above.

[stveit]

Good start! 🙌 Although there are additional changes to be made in order to stabilize the width properties of the items in this flexbox. If destination collapse element is collapsed, it becomes very short. I would suggest to add following to the #form-list-div and form in _create_form.html: class="max-w-4xl w-full". This way we ensure that each item doesn't extend a max width of 56rem (896px), yet it will always try to extend to 896px if possible (because of w-full). This way we have a nice stable width which with a few extra tweaks (separate PR) would make destinations page responsive to different screen sizes. I would also suggest to center contents of the create form and collapse-content, looks much prettier together with width changes suggested above.

Did this, I centered the header for the collapse elements (SMS, EMAIL). Do you think that should be centered or should I move it back to the left?

Gonna squash the commits when PR is done

[johannaengland]

I personally feel like it is nicer with the header for the collapse elements (SMS, EMAIL) on the left side, but I feel like that is more a question of personal taste, centered also looks good

[podliashanyk]

I personally feel like it is nicer with the header for the collapse elements (SMS, EMAIL) on the left side, but I feel like that is more a question of personal taste, centered also looks good

I also prefer it with the collapse titles being on the left side

[podliashanyk]

Nice!

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud