[ProfilePicker]: Improve css on the profile picker main view.

This CL does the following:
1. Specify height for product logo which avoid a shift down on page
first render.
2. Specify max width for the title and subtitle.
3. Add margins to the profile card menu. This is necessary for the box
shadow on item focus to be fully visible.

Bug: 1063856
Change-Id: I0546a719df76b1aba6b717e5965a97211564150e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2611089Reviewed-by: David Roger <droger@chromium.org>
Commit-Queue: Monica Basta <msalama@chromium.org>
Cr-Commit-Position: refs/heads/master@{#840582}

chrome/browser/resources/signin/profile_picker/profile_picker_main_view.html

@@ -26,11 +26,24 @@
 
   .title-container {
     margin: 30px auto 0 auto;
+    max-width: 490px;
     padding-inline-end: calc(var(--banner-img-width) - 10px);
     padding-inline-start: calc(var(--banner-img-width) - 10px);
     text-align: center;
   }
 
+  #product-logo {
+    height: 32px;
+  }
+
+  .title-container h2 {
+    margin-bottom: 8px;
+  }
+
+  .title-container h3 {
+    margin-top: 8px;
+  }
+
   #wrapper {
     display: flex;
     height: calc(max(100vh, var(--view-min-size)) - 290px);
@@ -39,14 +52,16 @@
   }
 
   .profiles-container {
-    --grid-gutter: 24px;
+    --grid-gutter: 16px;
     --profile-item-height:178px;
+    --profile-item-margin: 4px;
     --profile-item-width: 162px;
     align-items: center;
     display: grid;
     grid-column-gap: var(--grid-gutter);
     grid-row-gap: var(--grid-gutter);
-    grid-template-columns: repeat(auto-fit, var(--profile-item-width));
+    grid-template-columns: repeat(auto-fit, calc(var(--profile-item-width) +
+      2 * var(--profile-item-margin)));
     justify-content: center;
     margin: auto;
     max-height: 100%;
@@ -79,6 +94,7 @@
     flex-direction: column;
     height: var(--profile-item-height);
     justify-content: center;
+    margin: var(--profile-item-margin);
     width: var(--profile-item-width);
   }