Revert "[NTP] Position richer picker elements using flexbox"

This reverts commit 371290bf.

Reason for revert: Flexbox does not play well with the colors menu

Original change's description:
> [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}

TBR=kristipark@chromium.org,kmilka@chromium.org

# Not skipping CQ checks because original CL landed > 1 day ago.

Change-Id: I4a5a2a70e58e2d1d03d15505d9c5be5b866fe959
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1763340
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: Kristi Park <kristipark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#689196}

chrome/browser/resources/local_ntp/local_ntp.css

@@ -698,6 +698,7 @@ 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;
@@ -712,6 +713,10 @@ html[dir=rtl] #error-notice.has-link #error-notice-msg {
   }
 }
 
+#customization-menu > div {
+  font-size: 13px;
+}
+
 #menu-nav-panel {
   display: inline-block;
   height: 384px;
@@ -880,11 +885,8 @@ 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;
@@ -892,8 +894,6 @@ 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
@@ -916,7 +916,6 @@ 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;
@@ -1002,6 +1001,12 @@ 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;
@@ -1569,7 +1574,6 @@ 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);

chrome/browser/resources/local_ntp/local_ntp.html

@@ -170,7 +170,6 @@
   </dialog>
 
   <dialog id="customization-menu" class="customize-dialog">
-    <div id="menu-inner">
     <div id="menu-nav-panel" role="tablist" aria-label="$i18n{customizeMenu}">
       <button id="backgrounds-button" class="menu-option" tabindex="0"
           role="tab" aria-controls="backgrounds-menu backgrounds-image-menu"
@@ -183,8 +182,8 @@
           $i18n{backgroundsOption}
         </div>
       </button>
-        <button id="shortcuts-button" class="menu-option" tabindex="0"
-            role="tab" aria-controls="shortcuts-menu" aria-selected="false"
+      <button id="shortcuts-button" class="menu-option" tabindex="0" role="tab"
+          aria-controls="shortcuts-menu" aria-selected="false"
           aria-labelledby="shortcuts-menu-option"
           title="$i18n{shortcutsOption}">
         <div class="menu-option-icon-wrapper">
@@ -256,8 +255,7 @@
           <div class="sh-option">
             <div id="sh-option-cl" class="sh-option-image" tabindex="-1"
                 role="button" aria-pressed="false"
-                  aria-labelledby="sh-option-cl-title"
-                  title="$i18n{myShortcuts}">
+                aria-labelledby="sh-option-cl-title" title="$i18n{myShortcuts}">
               <div class="sh-option-icon"></div>
               <div class="sh-option-mini">
                 <div class="mini-page">
@@ -274,8 +272,7 @@
           <div class="sh-option">
             <div id="sh-option-mv" class="sh-option-image" tabindex="-1"
                 role="button" aria-pressed="false"
-                  aria-labelledby="sh-option-mv-title"
-                  title="$i18n{mostVisited}">
+                aria-labelledby="sh-option-mv-title" title="$i18n{mostVisited}">
               <div class="sh-option-icon"></div>
               <div class="sh-option-mini">
                 <div class="mini-page">
@@ -343,7 +340,6 @@
         </div>
       </div>
     </div>
-    </div>
     <div id="menu-footer">
       <button id="menu-cancel"
           class="bg-sel-footer-button paper secondary ripple"

chrome/test/data/local_ntp/local_ntp_browsertest.html

@@ -160,9 +160,7 @@
     </dialog>
 
     <dialog id="customization-menu" class="customize-dialog">
-      <div id="menu-inner">
-        <div id="menu-nav-panel" role="tablist"
-            aria-label="$i18n{customizeMenu}">
+      <div id="menu-nav-panel" role="tablist" aria-label="$i18n{customizeMenu}">
         <button id="backgrounds-button" class="menu-option" tabindex="0"
             role="tab" aria-controls="backgrounds-menu backgrounds-image-menu"
             aria-selected="true" aria-labelledby="backgrounds-menu-option"
@@ -220,16 +218,16 @@
         <div id="backgrounds-menu" class="menu-panel" tabindex="0"
             role="tabpanel" aria-label="$i18n{backgroundsOption}">
           <div id="backgrounds-upload" class="bg-sel-tile-bg">
-              <div id="backgrounds-upload-icon" class="bg-sel-tile"
-                  tabindex="-1" role="button" aria-label="$i18n{uploadImage}"
+            <div id="backgrounds-upload-icon" class="bg-sel-tile" tabindex="-1"
+                role="button" aria-label="$i18n{uploadImage}"
                 aria-pressed="false" title="$i18n{uploadImage}">
               <div id="backgrounds-upload-arrow"></div>
               <div id="backgrounds-upload-text">$i18n{uploadImage}</div>
             </div>
           </div>
           <div id="backgrounds-default" class="bg-sel-tile-bg">
-              <div id="backgrounds-default-icon" class="bg-sel-tile"
-                  tabindex="-1" role="button" aria-label="$i18n{noBackground}"
+            <div id="backgrounds-default-icon" class="bg-sel-tile" tabindex="-1"
+                role="button" aria-label="$i18n{noBackground}"
                 title="$i18n{noBackground}" aria-pressed="false">
               <div class="mini-page">
                 <div class="mini-header-colorful"></div>
@@ -241,8 +239,8 @@
         </div>
         <div id="backgrounds-image-menu" class="menu-panel" tabindex="0"
             role="tabpanel" aria-label="$i18n{backgroundsOption}"></div>
-          <div id="shortcuts-menu" class="menu-panel" tabindex="0"
-              role="tabpanel" aria-label="$i18n{shortcutsOption}">
+        <div id="shortcuts-menu" class="menu-panel" tabindex="0" role="tabpanel"
+            aria-label="$i18n{shortcutsOption}">
           <div id="sh-options">
             <div class="sh-option">
               <div id="sh-option-cl" class="sh-option-image" tabindex="-1"
@@ -334,7 +332,6 @@
           </div>
         </div>
       </div>
-      </div>
       <div id="menu-footer">
         <button id="menu-cancel"
             class="bg-sel-footer-button paper secondary ripple"