[MD Settings][People] UI polish for the easy unlock row

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

Index: chrome/browser/resources/settings/people_page/people_page.html
diff --git a/chrome/browser/resources/settings/people_page/people_page.html b/chrome/browser/resources/settings/people_page/people_page.html
index 2fd9a5dbb2efda232db21bf4e0a18fe6185f081e..d116f5b0dc956d77c8860079eac93cdc790f15ed 100644
--- a/chrome/browser/resources/settings/people_page/people_page.html
+++ b/chrome/browser/resources/settings/people_page/people_page.html
@@ -63,6 +63,10 @@
         color: var(--settings-error-color);
       }
 
+      .settings-box.three-line {
+        min-height: 100px;
+      }
+
       .icon-container {
         display: flex;
         flex-shrink: 0;
@@ -205,8 +209,9 @@
         </template>
 
         <template is="dom-if" if="[[easyUnlockAllowed_]]">
-          <div class="settings-box">
-            <div class="middle">
+          <div class$="settings-box [[getEasyUnlockClass_(
+              easyUnlockEnabled_, easyUnlockProximityDetectionAllowed_)]]">

[stevenjb, 2016/11/04 22:52:08]

This is kind of awkward. We definitely shouldn't be using a somewhat arbitrary
local value here (100px). Instead can we just make this two-line and use padding
to ensure that taller content looks correct?

[Moe, 2016/11/06 21:43:14]

Done.

+            <div class="start">
               <div>$i18n{easyUnlockSectionTitle}</div>
               <div class="secondary">
                 <template is="dom-if" if="[[!easyUnlockEnabled_]]">
@@ -215,7 +220,7 @@
                 <template is="dom-if" if="[[easyUnlockEnabled_]]">
                   $i18n{easyUnlockDescription}
                 </template>
-                <a target="_blank" href$="$i18n{easyUnlockLearnMoreURL}">
+                <a target="_blank" href="$i18n{easyUnlockLearnMoreURL}">
                   $i18n{learnMore}
                 </a>
                 <template is="dom-if" if="[[easyUnlockEnabled_]]">