Fix Assistant settings label padding

- Wrap the sub-label of settings entry.
- md-select items automatically shrink, adding a min-width to it.
  (not sure if this is intended?)

Bug: b/123363474
Test: Manual Test
Change-Id: Idd47e14a3b9d00dafe792f421660665d636e58b5
Reviewed-on: https://chromium-review.googlesource.com/c/1439460Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Xiaohui Chen <xiaohuic@chromium.org>
Commit-Queue: Yue Li <updowndota@chromium.org>
Cr-Commit-Position: refs/heads/master@{#627996}

chrome/browser/resources/settings/controls/settings_slider.html

@@ -26,7 +26,7 @@
         display: flex;
         flex-direction: column;
         margin: 8px 0;
-        min-width: 200px;
+        min-width: var(--cr-text-element-min-width);
       }
 
       #labels {

chrome/browser/resources/settings/google_assistant_page/google_assistant_page.html

@@ -14,7 +14,11 @@
 
 <dom-module id="settings-google-assistant-page">
   <template>
-    <style include="settings-shared md-select"></style>
+    <style include="settings-shared md-select">
+      .text-area {
+        margin-inline-end: 24px;
+      }
+    </style>
     <settings-toggle-button id="googleAssistantEnable"
         class="first primary-toggle"
         pref="{{prefs.settings.voice_interaction.enabled}}"

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -184,6 +184,8 @@
       white-space: nowrap;
     }
 
+    --cr-text-element-min-width: 200px;
+
     --cr-title-text: {
         color: var(--cr-title-text-color);
         font-size: 107.6923%;  /* Go to 14px from 13px. */
@@ -200,7 +202,7 @@
       font-size: 92.31%;  /* Effectively 12px if the host default is 13px. */
       font-weight: 500;
       max-width: 330px;
-      min-width: 200px;
+      min-width: var(--cr-text-element-min-width);
       padding: 10px 8px;
     }
 

ui/webui/resources/html/md_select_css.html

@@ -28,6 +28,7 @@
         font-size: inherit;
         line-height: inherit;
         max-width: 100%;
+        min-width: var(--cr-text-element-min-width);
         outline: none;
         padding-bottom: 6px;
         /* Ensures 3px space between text and arrow */