[NTP] Position richer picker elements using flexbox

Position elements with flexbox instead of inline-block. This allows us
to remove the "font-size: 0" hack that fixed the extra space between
inline-block elements.

Change-Id: Ie3b6f02281795e60806259a00b2ee948df3b0959
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1725334
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#688355}

chrome/browser/resources/local_ntp/local_ntp.css

@@ -700,7 +700,6 @@ html[dir=rtl] #error-notice.has-link #error-notice-msg {
   box-shadow: 0 1px 3px 0 rgba(var(--GG800-rgb), .3),
               0 4px 8px 3px rgba(var(--GG800-rgb), .15);
   color: rgb(var(--GG700-rgb));
-  font-size: 0;  /* Remove extra spacing between inline-block elements. */
   height: 528px;
   min-width: 800px;
   padding: 0;
@@ -715,10 +714,6 @@ html[dir=rtl] #error-notice.has-link #error-notice-msg {
   }
 }
 
-#customization-menu > div {
-  font-size: 13px;
-}
-
 #menu-nav-panel {
   display: inline-block;
   height: 384px;
@@ -887,8 +882,11 @@ html[dir=rtl] .menu-option {
   margin-inline-end: 8px;
 }
 
+#menu-inner {
+  display: flex;
+}
+
 #menu-contents {
-  display: inline-block;
   height: 464px;
   margin-inline-start: 40px;
   position: relative;
@@ -896,6 +894,8 @@ html[dir=rtl] .menu-option {
 }
 
 .menu-panel {
+  display: flex;
+  flex-flow: wrap;
   height: 384px;
   left: 0;
   /* Pad the content by 5px top/left. This will prevent the focus outline on
@@ -918,6 +918,7 @@ html[dir=rtl] .menu-option {
 #backgrounds-menu .bg-sel-tile-bg,
 #backgrounds-image-menu .bg-sel-tile-bg {
   border-radius: 4px;
+  display: block;
   height: 176px;
   margin-bottom: 45px;
   margin-inline-end: 8px;
@@ -1003,12 +1004,6 @@ html[dir=rtl] .menu-option {
   }
 }
 
-#backgrounds-menu,
-#colors-menu {
-  /* Remove extra spacing between inline-block elements. */
-  font-size: 0;
-}
-
 #backgrounds-upload.bg-sel-tile-bg {
   background-color: transparent;
   vertical-align: top;
@@ -1576,6 +1571,7 @@ input:checked + .toggle .highlight {
   border-radius: 50%;
   box-sizing: border-box;
   cursor: pointer;
+  display: block;
   height: var(--tile-size);
   margin-bottom: var(--tile-margin);
   margin-inline-end: var(--tile-margin);