MD Settings: Ensure that long text does not overlap with <select> arrow.

chrome/browser/resources/settings/md_select_css.html

Index: chrome/browser/resources/settings/md_select_css.html
diff --git a/chrome/browser/resources/settings/md_select_css.html b/chrome/browser/resources/settings/md_select_css.html
index 2a28fc246293ed6ab3fb2ec5b7800f026fac61e6..708d5aabd0984e31d191bacb31bc89a7b8e64060 100644
--- a/chrome/browser/resources/settings/md_select_css.html
+++ b/chrome/browser/resources/settings/md_select_css.html
@@ -4,9 +4,12 @@
   <template>
     <style>
       .md-select {
+        --md-arrow-width: 0.9em;
         -webkit-appearance: none;
-        background: url(images/arrow_down.svg) 97% 70% no-repeat;
-        background-size: 0.9em;
+        /* Ensure that the text does not overlap with the down arrow. */
+        -webkit-padding-end: calc(var(--md-arrow-width) * 1.8);
+        background: url(images/arrow_down.svg) 97% center no-repeat;
+        background-size: var(--md-arrow-width);
         border-bottom: 1px solid var(--paper-grey-300);
         border-left: none;
         /* Override Mac's default border-radius */
@@ -18,7 +21,8 @@
         font-family: inherit;
         font-size: inherit;
         outline: none;
-        padding: 3px 0;
+        padding-bottom: 3px;
+        padding-top: 3px;
         width: 200px;
       }