Bug 1572475 - Make the about:logins sidebar have a fixed width. r=MattN
authorTim Nguyen <ntim.bugs@gmail.com>
Thu, 15 Aug 2019 22:57:37 +0000
changeset 488386 f7db69e3462cf046fca6782483ec999bd997f982
parent 488382 257776683ca2ea65d61b7e3cc1100e43a93cd6c3
child 488387 eeb6741275a1d04cb23e16751f2670571f3b8ab5
push id113908
push userccoroiu@mozilla.com
push dateFri, 16 Aug 2019 09:57:53 +0000
treeherdermozilla-inbound@83fad6abe38a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1572475
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1572475 - Make the about:logins sidebar have a fixed width. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D42228
browser/components/aboutlogins/content/aboutLogins.css
browser/components/aboutlogins/content/aboutLogins.html
browser/components/aboutlogins/content/components/login-list.css
--- a/browser/components/aboutlogins/content/aboutLogins.css
+++ b/browser/components/aboutlogins/content/aboutLogins.css
@@ -1,15 +1,15 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 body {
   display: grid;
-  grid-template-columns: minmax(320px, max-content) 1fr;
+  grid-template-columns: 320px 1fr;
   grid-template-rows: 75px 1fr;
   grid-template-areas: "header header"
                        "logins login";
   height: 100vh;
 }
 
 header {
   display: flex;
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -99,17 +99,17 @@
       <button class="create-login-button" data-l10n-id="create-login-button"></button>
     </template>
 
     <template id="login-list-item-template">
       <li class="login-list-item" role="option">
         <div class="favicon-wrapper">
           <img class="favicon" src="" alt=""/>
         </div>
-        <div>
+        <div class="labels">
           <span class="title"></span>
           <span class="username"></span>
         </div>
       </li>
     </template>
 
     <template id="login-intro-template">
       <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
--- a/browser/components/aboutlogins/content/components/login-list.css
+++ b/browser/components/aboutlogins/content/components/login-list.css
@@ -102,20 +102,24 @@ ol {
   border-inline-start-color: var(--in-content-border-highlight);
   background-color: var(--in-content-box-background-hover);
 }
 
 .login-list-item.selected .title {
   font-weight: 600;
 }
 
+.labels {
+  flex-grow: 1;
+  overflow: hidden;
+}
+
 .title,
 .username {
   display: block;
-  max-width: 50ch;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
 .favicon-wrapper {
   height: 16px;
   width: 16px;
   background-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");