--- a/browser/components/aboutlogins/content/aboutLogins.css
+++ b/browser/components/aboutlogins/content/aboutLogins.css
@@ -16,17 +16,17 @@ header {
   grid-area: header;
   align-items: center;
   background-color: var(--in-content-box-background);
   border-bottom: 1px solid var(--in-content-box-border-color);
   padding: 0 18px;
 }
 
 login-filter {
-  flex: auto;
+  flex-grow: 1;
   align-self: center;
 }
 
 menu-button {
   margin-inline-start: 18px;
 }
 
 login-list {

--- a/browser/components/aboutlogins/content/components/confirm-delete-dialog.css
+++ b/browser/components/aboutlogins/content/components/confirm-delete-dialog.css
@@ -4,39 +4,36 @@
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   /* TODO: this color is used in the about:preferences overlay, but
            why isn't it declared as a variable? */
   background-color: rgba(0,0,0,0.5);
   display: flex;
-  align-items: center;
 }
 
 .container {
   z-index: 2;
 
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
 
   width: 50%;
   min-width: 250px;
   max-width: 500px;
   height: 40%;
   min-height: 200px;
   margin: auto;
   background: var(--in-content-page-background);
   color: var(--in-content-page-color);
 }
 
 .title-bar {
   position: relative;
-  flex: 0 1 auto;
   text-align: center;
   background-color: var(--in-content-dialog-header-background);
   padding: 5px;
   border-bottom: 1px solid var(--in-content-border-color);
 }
 
 .title {
   font-size: .9em;
@@ -44,45 +41,35 @@
   font-weight: 600;
   -moz-user-select: none;
   margin: 0;
 }
 
 button.dismiss-button {
   position: absolute;
   top: 0;
-  right: 0;
+  inset-inline-end: 0;
   min-width: 20px;
   min-height: 20px;
   margin: 8px 16px;
   padding: 0;
   background: url(chrome://global/skin/icons/close.svg) no-repeat center;
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 0;
 }
 
-button.dismiss-button:dir(rtl) {
-  right: auto;
-  left: 0;
+.content,
+.buttons {
+  padding: 16px;
 }
 
 .content {
-  flex: 1 1 auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  margin: auto;
 }
 
-.buttons {
-  flex: 0 1 auto;
-  display: flex;
-  justify-content: space-between;
+.confirm-button {
+  float: inline-end;
 }
 
 .buttons button {
   margin: 0;
 }
-
-.content,
-.buttons {
-  margin: 16px;
-}

--- a/browser/components/aboutlogins/content/components/login-filter.css
+++ b/browser/components/aboutlogins/content/components/login-filter.css
@@ -1,26 +1,27 @@
 /* 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/. */
 
-:host {
-  display: flex;
-}
-
 .filter[type="text"] {
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 0.4;
 
   background-image: url("chrome://global/skin/icons/search.svg");
-  background-position: 4px 50%;
+  background-position: 8px center;
   background-repeat: no-repeat;
   background-size: 16px;
-  flex: auto;
+  width: 100%;
   margin: 0;
-  padding: 4px 0;
-  padding-inline-start: 28px;
+  padding-block: 6px;
+  padding-inline-start: 32px;
+  box-sizing: border-box;
 }
 
-.filter:focus-within {
-  fill-opacity: 0.9;
+.filter:dir(rtl) {
+  background-position-x: right 8px;
 }
+
+.filter:focus {
+  fill-opacity: 0.8;
+}

--- a/browser/components/aboutlogins/content/components/login-item.css
+++ b/browser/components/aboutlogins/content/components/login-item.css
@@ -9,16 +9,19 @@
   --reveal-checkbox-opacity-hover: .6;
   --reveal-checkbox-opacity-active: 1;
   --success-color: #00c100;
 }
 
 @supports -moz-bool-pref("browser.in-content.dark-mode") {
 @media (prefers-color-scheme: dark) {
   :host {
+    --reveal-checkbox-opacity: .8;
+    --reveal-checkbox-opacity-hover: 1;
+    --reveal-checkbox-opacity-active: .6;
     --success-color: #86DE74;
   }
 }
 }
 
 :host([data-editing]) .edit-button,
 :host([data-is-new-login]) .copy-button,
 :host([data-is-new-login]) .delete-button,
@@ -44,31 +47,31 @@
 .header {
   display: flex;
   border-bottom: 1px solid var(--in-content-box-border-color);
 }
 
 .title {
   margin-top: 0;
   margin-bottom: 0;
-  flex: auto;
+  flex-grow: 1;
 }
 
 .delete-button,
 .edit-button {
   background-repeat: no-repeat;
   background-position: 8px;
   -moz-context-properties: fill;
   fill: currentColor;
   min-width: auto;
 }
 
 .delete-button:dir(rtl),
 .edit-button:dir(rtl) {
-  background-position: right 8px center;
+  background-position-x: right 8px;
 }
 
 .delete-button {
   background-image: url("chrome://browser/content/aboutlogins/icons/delete.svg");
   padding-inline-start: 30px; /* 8px on each side, and 14px for icon width */
 }
 
 .edit-button {
@@ -96,21 +99,17 @@
   align-items: center;
 }
 
 .detail-row {
   margin-bottom: 20px;
 }
 
 .detail-cell {
-  flex: auto;
-}
-
-.detail-row > button {
-  align-self: end;
+  flex-grow: 1;
 }
 
 .field-label {
   display: block;
   font-size: smaller;
   color: var(--in-content-deemphasized-text);
   margin-bottom: 5px;
 }
@@ -175,18 +174,8 @@
   outline: 2px solid var(--in-content-border-active);
   /* offset outline to align with 1px border-width set for buttons/menulists above. */
   outline-offset: -1px;
   /* Make outline-radius slightly bigger than the border-radius set above,
    * to make the thicker outline corners look smooth */
   -moz-outline-radius: 3px;
   box-shadow: 0 0 0 4px var(--in-content-border-active-shadow);
 }
-
-@supports -moz-bool-pref("browser.in-content.dark-mode") {
-@media (prefers-color-scheme: dark) {
-  :host {
-    --reveal-checkbox-opacity: .8;
-    --reveal-checkbox-opacity-hover: 1;
-    --reveal-checkbox-opacity-active: .6;
-  }
-}
-}

--- a/browser/components/aboutlogins/content/components/login-list.css
+++ b/browser/components/aboutlogins/content/components/login-list.css
@@ -14,17 +14,17 @@
   display: flex;
   align-items: center;
   padding: 10px 18px;
   border-bottom: 1px solid var(--in-content-box-border-color);
   background-color: var(--in-content-box-info-background);
 }
 
 .count {
-  flex: auto;
+  flex-grow: 1;
   text-align: end;
   font-size: smaller;
   margin-inline-start: 18px;
 }
 
 ol {
   margin-top: 0;
   margin-bottom: 0;

--- a/browser/components/aboutlogins/content/components/menu-button.css
+++ b/browser/components/aboutlogins/content/components/menu-button.css
@@ -16,34 +16,29 @@
   min-width: 30px;
   margin-inline-start: 0;
   margin-inline-end: 0;
 }
 
 .menu {
   position: absolute;
   top: 30px;
-  right: 0;
+  inset-inline-end: 0;
   margin: 0;
   padding: 5px 0;
   background-color: var(--in-content-box-background);
   border: 1px solid var(--in-content-box-border-color);
   border-radius: 2px;
   box-shadow: var(--shadow-10);
   min-width: max-content;
   list-style-type: none;
   display: flex;
   flex-direction: column;
 }
 
-.menu:dir(rtl) {
-  right: auto;
-  left: 0;
-}
-
 .menuitem-button {
   padding: 4px 8px;
   /* 32px = 8px (padding) + 16px (icon) + 8px (padding) */
   padding-inline-start: 32px;
   background-repeat: no-repeat;
   background-position: left 8px center;
   background-size: 16px;
   margin: 0;