Fix Umami's responsive layout styles

@kjay, I would love to help on this one; have you been able to review what the issues are?

Marking RTBC after 3 marathon reviews via Google Hangouts this week.

Great work @kjay and thanks for the help reviewing @shaal

I ran diffy.website's visual regression test between latest Umami 8.8.x (that now includes media-images), and patch from comment #13 (which is patch 11)

This patch is fixing various padding/margin issues we had, breadcrumb positioning, the correct edge from the screen, and more.

I would re-RTBC it :)

To download the full comparison with various screen width (400MB)
https://diffy-files.s3.amazonaws.com/2019/11/05/Umami88x2019-11-5-187.ta...

1. +++ b/core/profiles/demo_umami/themes/umami/css/layout/layout-2-col.css
   @@ -2,23 +2,25 @@
   +.two-columns .main {
   ...
   +.two-columns .main .layout-content,
   +.two-columns .main .layout-sidebar {
   ...
      .two-columns .main .layout-content {
   ...
   +  .two-columns .main .layout-sidebar {
   

   Where can I test these?

2. +++ b/core/profiles/demo_umami/themes/umami/css/layout/layout.css
   @@ -10,3 +10,13 @@
   +.main.container {
   ...
   +  .main.container {
   

   Why do we need .container in this selector?

3. Should we apply the 4% rule to the .region-page-title element as well?

@kjay created this patch, I just helped cleaning a interdiff and uploading it here.

The interdiff is between patch11 and patch17 (this comment's patch), patch 11 was actually uploaded as part of comment #13

There is an inconsistency in left and right gutter. After apply apply patch the left and gutter space is consistent across pages. please refer the Screenshots.

Should we apply the 4% rule to the .region-page-title element as well? - As it is centre align to the page across the breakpoints . 4% will not required here.

//----
+.two-columns .main .layout-content,
+.two-columns .main .layout-sidebar {
...
.two-columns .main .layout-content {
...
+ .two-columns .main .layout-sidebar {

--///
you can test here - articles/give-it-a-go-and-grow-your-own-herbs

Thanks for that clean up @shaal

This patch is looking very good now.

@lauriii I'm going to mark this RTBC again if you are okay with committing it?

I noticed few things that would be good to deal with before committing this:

1. # lauri.eskola @ MacBookPro-LauriEskola in ~/Projects/drupal/core on git:9.2.x x [16:30:38]
   $ yarn lint:css
   yarn run v1.22.10
   $ stylelint "**/*.css"
   
   profiles/demo_umami/themes/umami/css/layout/grid-2.css
     7:3  ✖  Expected "margin-right" to come before "margin-left"   order/properties-order
    13:1  ✖  Expected empty line before at-rule                     at-rule-empty-line-before
   
   profiles/demo_umami/themes/umami/css/layout/layout-2-col.css
    21:5  ✖  Expected "margin-right" to come before "margin-left"   order/properties-order
   
   profiles/demo_umami/themes/umami/css/layout/layout.css
    15:15  ✖  Expected a trailing semicolon   declaration-block-trailing-semicolon
   
   profiles/demo_umami/themes/umami/css/components/views/promoted-items.css
    113:3  ✖  Expected "margin" to come before "padding"     order/properties-order
    114:3  ✖  Expected "max-width" to come before "margin"   order/properties-order
   
   profiles/demo_umami/themes/umami/css/components/navigation/breadcrumbs/breadcrumbs.css
    15:5  ✖  Expected "padding-right" to come before "padding-left"   order/properties-order
   
   error Command failed with exit code 2.
   info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
   

   There are some stylelint errors in the changes

2. 
   I think the change causes regression on mobile width to articles that have comment form. See horizontal scroll on the screenshot.

Hi @lauriii

Thanks for that review. I'm attaching a new patch here with the stylelint fixes and also a change for what breakpoint we use the display: flex for two sidebars (as we currently have in our layout-2-col.css.

Tested this for the forms on the site. Screenshots attached of our forms - Search and Login and Contact form

Search Form Before and After

Login Form Before and After

Contact Form Before and After
We can see there is a slight regression here because of a piece of padding that was added to the contact form wrapper in commit ffb1e1e553 in June 2019, for layout builder. I'll create a new patch to fix that.

Patch to remove the extra padding on the contact form wrapper.

Contact Form Currently and After Latest Patch

#25 works as expected! Marking this as RTBC

I ran yarn run lint:css --fix to fix coding standard violations reported by CI for the patch in #25.

Committed 0ce8821 and pushed to 9.2.x and 9.1.x. Thanks!

+++ b/core/profiles/demo_umami/themes/umami/umami.libraries.yml
@@ -39,7 +39,9 @@ global:
+      css/components/regions/page-title/page-title.css: {}

This file does not exist. I have filed a follow-up to remove this file from umami.libraries.yml: #3199284: Umami includes non-existing css/components/regions/page-title/page-title.css