[Passwords] Fixed layout problem inside compromised credential list

This change fixes problem with layout when username/url is too long to
display fully. The end is truncated.

Bug: 1059334
Change-Id: I0b6d42d500c51835330b04daf75a921070022410
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2095724Reviewed-by: Jan Wilken Dörrie <jdoerrie@chromium.org>
Commit-Queue: Viktor Semeniuk <vsemeniuk@google.com>
Cr-Commit-Position: refs/heads/master@{#749138}

chrome/browser/resources/settings/autofill_page/password_check_list_item.html

@@ -13,12 +13,6 @@
 <dom-module id="password-check-list-item">
   <template>
     <style include="settings-shared passwords-shared">
-      .icon-column {
-        align-items: center;
-        height: 16px;
-        margin-inline-end: 16px;
-      }
-
       #change-password-link-icon {
         height: 16px;
         margin-inline-start: 10px;
@@ -26,15 +20,10 @@
         --iron-icon-fill-color: var(--text-color-action);
       }
 
-      #icon-more-vert {
-        height: 32px;
-        width: 32px;
-      }
-
       #leakedPassword {
         background-color: transparent;
         border: none;
-        color: inherit;
+        margin-inline-start: 4px;
       }
 
       #leaked-item {
@@ -43,27 +32,65 @@
       }
 
       #leaked-info {
+        display: flex;
+        flex: 2;
+        width: 0;
+      }
+
+      #leakUsername {
+        align-items: center;
+        display: flex;
+        flex: 1;
+      }
+
+      #changePasswordInApp {
+        display: flex;
+        flex: 2;
+        flex-direction: row-reverse;
+      }
+
+      #changePasswordUrl {
+        display: flex;
+        flex: 1;
+        flex-direction: row-reverse;
+        white-space: nowrap;
+      }
+
+      #info-column {
+        display: flex;
         flex: 1;
+        flex-direction: column;
+      }
+
+      #leakOrigin {
+        direction: rtl;
+        display: flex;
+        justify-content: flex-end;
       }
     </style>
-    <div class="list-item" id="leaked-item">
-      <div class="icon-column">
+    <div class="list-item" id="leaked-item" focus-row-container>
       <site-favicon url="[[item.changePasswordUrl]]"></site-favicon>
+      <div id="leaked-info">
+        <div id="info-column" class="no-min-width">
+          <div id="leakOrigin" class="no-min-width">
+            <span class="text-elide">
+              <!-- This bdo tag is necessary to fix the display of domains
+                starting with numbers. -->
+              <bdo dir="ltr">[[item.formattedOrigin]]</bdo>
+            </span>
           </div>
-
-      <div class="info-column two-line" id="leaked-info">
-        <div class="start text">
-          <div id="leakOrigin">[[item.formattedOrigin]]</div>
-          <div>
-            <span class="secondary" id="leakUsername">[[item.username]]</span>
-            <input id="leakedPassword" type="password" value="[[password_]]"
-                readonly disabled>
+          <div class="no-min-width" id="leakUsername" >
+            <span class="no-min-width text-elide secondary">
+              [[item.username]]
+            </span>
+            <input class="no-min-width secondary" id="leakedPassword"
+                type="password" value="[[password_]]" readonly disabled>
           </div>
-          <div class="secondary"
-              id="leakType">[[getCompromiseType_(item)]]
+          <div class="secondary" id="leakType">
+            [[getCompromiseType_(item)]]
           </div>
-          <div class="secondary"
-              id="elapsedTime">[[item.elapsedTimeSinceCompromise]]
+          <div class="secondary" id="elapsedTime">
+            [[item.elapsedTimeSinceCompromise]]
           </div>
         </div>
       </div>