Change display of search clear button to flex

The clear button for the search entry field is absolutely positioned and
was using display 'block'. Side effect of that is that the ::after tap
target is positioned incorrectly relative to the button location.

Change the clear cr-button to display 'flex' which lets the tap target
pseudo-element center correctly.

Moves 3 CSS properties into alphabetical order to satisfy presubmit.

Bug: 992823
Change-Id: I7066130f636372d59b956e1061a39ad794dbc354
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2063193
Commit-Queue: Noel Gordon <noel@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#742496}

ui/file_manager/file_manager/foreground/css/file_manager.css

@@ -422,8 +422,8 @@ body.files-ng div.splitter {
   display: flex;
   flex: none;
   justify-content: center;
-  margin-inline-end: calc(16px - 6px);
   margin: 0;
+  margin-inline-end: calc(16px - 6px);
   position: relative;
   width: 32px;
   z-index: 500;  /* Must be below the contextmenu (600). */
@@ -436,8 +436,8 @@ body:not(.files-ng) div.splitter .splitter-button {
 body.files-ng div.splitter .splitter-button {
   --hover-bg-color: rgba(0, 0, 0, 4%);
   --ink-color: rgba(0, 0, 0, 88%);
-  border-radius: 50%;
   border: none;
+  border-radius: 50%;
   cursor: col-resize;
   height: 32px;
   min-width: 32px;
@@ -459,8 +459,8 @@ body.files-ng div.splitter.splitter-active .splitter-button:not(:active) {
 
 body.files-ng div.splitter .splitter-button .icon {
   -webkit-mask-image: url(../images/common/dragger.svg);
-  -webkit-mask-repeat: no-repeat;
   -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
   height: 20px;
   padding: 6px;
   width: 20px;
@@ -1105,11 +1105,16 @@ html[dir='rtl'] #search-box .clear {
   right: auto;
 }
 
-#search-box.has-cursor .clear,
-#search-box.has-text .clear {
+.dialog-header:not(.files-ng) #search-box.has-cursor .clear,
+.dialog-header:not(.files-ng) #search-box.has-text .clear {
   display: block;
 }
 
+.dialog-header.files-ng #search-box.has-cursor .clear,
+.dialog-header.files-ng #search-box.has-text .clear {
+  display: flex;
+}
+
 #search-box.has-text .clear {
   visibility: visible;
 }