Bug 1550091 - Place the Launch button in its own column in the LoginItem. r=MattN

Differential Revision: https://phabricator.services.mozilla.com/D30977

--HG--
extra : moz-landing-system : lando

browser/components/aboutlogins/content/aboutLogins.css

@@ -29,4 +29,5 @@ login-list {
 
 login-item {
   grid-area: login;
+  max-width: 800px;
 }

browser/components/aboutlogins/content/aboutLogins.html

@@ -67,19 +67,25 @@
         <button class="edit-button"></button>
         <button class="delete-button"></button>
       </div>
-      <label>
-        <span class="hostname-label field-label"></span>
-        <span class="hostname"/>
-      </label>
-      <button class="open-site-button"></button>
-      <label>
-        <span class="username-label field-label"></span>
-        <modal-input name="username"/>
-      </label>
-      <label>
-        <span class="password-label field-label"></span>
-        <modal-input type="password" name="password"/>
-      </label>
+      <div class="detail-row">
+        <label>
+          <span class="hostname-label field-label"></span>
+          <span class="hostname"/>
+        </label>
+        <button class="open-site-button"></button>
+      </div>
+      <div class="detail-row">
+        <label>
+          <span class="username-label field-label"></span>
+          <modal-input name="username"/>
+        </label>
+      </div>
+      <div class="detail-row">
+        <label>
+          <span class="password-label field-label"></span>
+          <modal-input type="password" name="password"/>
+        </label>
+      </div>
       <p class="time-created meta-info"></p>
       <p class="time-changed meta-info"></p>
       <p class="time-used meta-info"></p>

browser/components/aboutlogins/content/components/login-item.css

@@ -24,8 +24,24 @@
   flex: auto;
 }
 
+.detail-row {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.detail-row > label {
+  flex: auto;
+}
+
+.detail-row > button {
+  align-self: end;
+}
+
 .field-label {
   display: block;
+  font-size: smaller;
+  opacity: .7;
+  margin-bottom: 5px;
 }
 
 .meta-info {