MD Settings: make input label and error font size relative.

chrome/browser/resources/settings/people_page/sync_page.html

 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
 <link rel="import" href="sync_browser_proxy.html">
@@ skipping 16 matching lines @@
           font-size: inherit;
         };
       }
 
       #saveNewPassphrase {
         margin-top: 20px;
       }
 
       #existingPassphraseContainer,
       #passphraseRecoverHint {
-        align-items: flex-end;
+        align-items: center;
       }
 
       #existingPassphraseInput {
         /* The submit button for the existing passphrase is on the same line. */
         -webkit-margin-end: 16px;
         display: inline-block;
         --paper-input-container: {
           padding: 0;
+          /* TODO(scottchen): remove margin once large font properly padded. */

[dpapad, 2017/02/25 00:42:18]

Is there a bug you could link here?

[scottchen, 2017/02/28 18:47:00]

I don't think so, it's just the part of the general "large fonts make layouts
look ugly" issue.

+          margin-bottom: 1rem;
         };
       }
 
       #sync-data-types .list-item:not([hidden]) ~ .list-item:not([hidden]) {
         border-top: var(--settings-separator-line);
       }
     </style>
     <div id="[[pages.SPINNER]]" class="settings-box first"
         hidden$="[[!isStatus_(pages.SPINNER, pageStatus_)]]">
       $i18n{syncLoading}
@@ skipping 256 matching lines @@
           </div>
           <div id="passphraseRecoverHint" class="list-item">
             <span>$i18nRaw{passphraseRecover}</span>
           </div>
         </div>
       </template>
     </div>
   </template>
   <script src="sync_page.js"></script>
 </dom-module>