Flags WebUI: Fix Ui glitches at low resolution and missing color

Screenshot (<1024px) : http://screen/ktdXzvCgc0c
Screenshot (<512px) : http://screen/kPDKQRi0dyo

Bug: 994545, 993915
Change-Id: Iecf2c2c7865e9d8aaf905fe43124193f03b2beda
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1757290
Commit-Queue: Yann Dago <ydago@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#688592}

components/flags_ui/resources/enterprise_flags.css

@@ -70,6 +70,7 @@ body {
   flex-shrink: 0;
   height: 55px;
   position: relative;
+  white-space: nowrap;
 }
 
 #header h1 {
@@ -88,13 +89,21 @@ body {
 }
 
 #header .flex-container {
+  justify-content: space-between;
   max-width: 100%;
   width: 100%;
 }
 
 #header .center-content {
-  max-width: 680px;
-  min-width: 680px;
+ flex: 3;
+ max-width: 680px;
+}
+
+@media only screen and (max-width: 512px) {
+  #enterprise-flags-title {
+    max-width: 0;
+    overflow: hidden;
+  }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -103,6 +112,10 @@ body {
   }
 }
 
+#experiment-reset-all {
+  margin-inline-start: 10px;
+}
+
 .search-container {
   margin-inline-end: 0;
   position: relative;

components/flags_ui/resources/flags.css

@@ -187,6 +187,7 @@ button {
 }
 
 #search {
+  background: var(--input-background);
   border: 1px solid transparent;
   border-radius: 3px;
   box-sizing: border-box;
@@ -196,12 +197,6 @@ button {
   width: 100%;
 }
 
-@media (prefers-color-scheme: dark) {
-  #search {
-    background: var(--input-background);
-  }
-}
-
 #search:focus {
   border-color: var(--interactive-color);
   outline: 0;