diff --git a/browser/components/aboutlogins/content/aboutLogins.css b/browser/components/aboutlogins/content/aboutLogins.css
index 5f77d0bf47a6..ee51ba452092 100644
--- a/browser/components/aboutlogins/content/aboutLogins.css
+++ b/browser/components/aboutlogins/content/aboutLogins.css
@@ -54,10 +54,6 @@ login-item {
   grid-area: login;
 }
 
-login-item {
-  max-width: 700px;
-}
-
 #branding-logo {
   flex-basis: var(--sidebar-width);
   flex-shrink: 0;
diff --git a/browser/components/aboutlogins/content/aboutLogins.html b/browser/components/aboutlogins/content/aboutLogins.html
index 2559dc08fcfb..7a8011b08d00 100644
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -146,93 +146,95 @@
       <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-item.css">
-      <div class="error-message">
-        <span class="error-message-text" data-l10n-id="about-logins-error-message-default"></span>
-        <span class="error-message-link">
-          <a data-l10n-name="duplicate-link" href=""></a>
-        </span>
-      </div>
-      <div class="breach-alert">
-        <img class="breach-icon" src="chrome://global/skin/icons/warning.svg"/>
-        <span class="breach-alert-text" data-l10n-id="breach-alert-text"></span>
-        <a class="breach-alert-link" data-l10n-id="breach-alert-link" href="#" rel="noreferrer" target="_blank"></a>
-        <button class="dismiss-breach-alert" data-l10n-id="breach-alert-dismiss">
-          <img class="dismiss-breach-alert-icon" src="chrome://global/skin/icons/close.svg"/>
-        </button>
-      </div>
-      <div class="header">
-        <div class="login-item-favicon-wrapper">
-          <img class="login-item-favicon" src=""/>
+      <div class="container">
+        <div class="error-message">
+          <span class="error-message-text" data-l10n-id="about-logins-error-message-default"></span>
+          <span class="error-message-link">
+            <a data-l10n-name="duplicate-link" href=""></a>
+          </span>
         </div>
-        <h2 class="title">
-          <span class="login-item-title"></span>
-          <span class="new-login-title" data-l10n-id="login-item-new-login-title"></span>
-        </h2>
-        <button class="edit-button ghost-button" data-l10n-id="login-item-edit-button"></button>
-        <button class="delete-button ghost-button" data-l10n-id="login-item-delete-button"></button>
-      </div>
-      <form>
-        <div class="detail-row">
-          <label class="detail-cell">
-            <span class="origin-label field-label" data-l10n-id="login-item-origin-label"></span>
-            <!-- Default text inputs to readonly to reduce jumping of the field
-                 size on page load since it always starts readonly. -->
-            <input type="url"
-                   name="origin"
-                   class="origin-input"
-                   required
-                   data-l10n-id="login-item-origin"
-                   dir="auto"
-                   readonly/>
-          </label>
+        <div class="breach-alert">
+          <img class="breach-icon" src="chrome://global/skin/icons/warning.svg"/>
+          <span class="breach-alert-text" data-l10n-id="breach-alert-text"></span>
+          <a class="breach-alert-link" data-l10n-id="breach-alert-link" href="#" rel="noreferrer" target="_blank"></a>
+          <button class="dismiss-breach-alert" data-l10n-id="breach-alert-dismiss">
+            <img class="dismiss-breach-alert-icon" src="chrome://global/skin/icons/close.svg"/>
+          </button>
         </div>
-        <div class="detail-row">
-          <div class="detail-row-contents">
-            <label class="detail-cell">
-              <span class="username-label field-label" data-l10n-id="login-item-username-label"></span>
-              <input type="text"
-                     name="username"
-                     data-l10n-id="login-item-username"
-                     dir="ltr"
-                     readonly/>
-            </label>
-            <button class="copy-button copy-username-button" data-copy-login-property="username" data-telemetry-object="username" type="button">
-              <span class="copied-button-text" data-l10n-id="login-item-copied-username-button-text"></span>
-              <span class="copy-button-text" data-l10n-id="login-item-copy-username-button-text"></span>
-            </button>
+        <div class="header">
+          <div class="login-item-favicon-wrapper">
+            <img class="login-item-favicon" src=""/>
           </div>
+          <h2 class="title">
+            <span class="login-item-title"></span>
+            <span class="new-login-title" data-l10n-id="login-item-new-login-title"></span>
+          </h2>
+          <button class="edit-button ghost-button" data-l10n-id="login-item-edit-button"></button>
+          <button class="delete-button ghost-button" data-l10n-id="login-item-delete-button"></button>
         </div>
-        <div class="detail-row">
-          <div class="detail-row-contents">
+        <form>
+          <div class="detail-row">
             <label class="detail-cell">
-              <span class="password-label field-label" data-l10n-id="login-item-password-label"></span>
-              <div class="reveal-password-wrapper">
-                <input type="password"
-                       name="password"
-                       autocomplete="off"
-                       dir="ltr"
-                       required
-                       readonly/>
-                <input type="checkbox"
-                       class="reveal-password-checkbox"
-                       data-l10n-id="login-item-password-reveal-checkbox"/>
-              </div>
+              <span class="origin-label field-label" data-l10n-id="login-item-origin-label"></span>
+              <!-- Default text inputs to readonly to reduce jumping of the field
+                  size on page load since it always starts readonly. -->
+              <input type="url"
+                    name="origin"
+                    class="origin-input"
+                    required
+                    data-l10n-id="login-item-origin"
+                    dir="auto"
+                    readonly/>
             </label>
-            <button class="copy-button copy-password-button" data-copy-login-property="password" data-telemetry-object="password" type="button">
-              <span class="copied-button-text" data-l10n-id="login-item-copied-password-button-text"></span>
-              <span class="copy-button-text" data-l10n-id="login-item-copy-password-button-text"></span>
-            </button>
           </div>
-        </div>
-        <div class="form-actions-row">
-          <button class="save-changes-button" type="submit"></button>
-          <button class="cancel-button" data-l10n-id="login-item-cancel-button" type="button"></button>
-        </div>
-        <p class="time-created meta-info" data-l10n-id="login-item-time-created" data-l10n-args='{"timeCreated": 0}'></p>
-        <p class="time-changed meta-info" data-l10n-id="login-item-time-changed" data-l10n-args='{"timeChanged": 0}'></p>
-        <p class="time-used meta-info" data-l10n-id="login-item-time-used" data-l10n-args='{"timeUsed": 0}'></p>
-      </form>
-      <login-footer hidden></login-footer>
+          <div class="detail-row">
+            <div class="detail-row-contents">
+              <label class="detail-cell">
+                <span class="username-label field-label" data-l10n-id="login-item-username-label"></span>
+                <input type="text"
+                      name="username"
+                      data-l10n-id="login-item-username"
+                      dir="ltr"
+                      readonly/>
+              </label>
+              <button class="copy-button copy-username-button" data-copy-login-property="username" data-telemetry-object="username" type="button">
+                <span class="copied-button-text" data-l10n-id="login-item-copied-username-button-text"></span>
+                <span class="copy-button-text" data-l10n-id="login-item-copy-username-button-text"></span>
+              </button>
+            </div>
+          </div>
+          <div class="detail-row">
+            <div class="detail-row-contents">
+              <label class="detail-cell">
+                <span class="password-label field-label" data-l10n-id="login-item-password-label"></span>
+                <div class="reveal-password-wrapper">
+                  <input type="password"
+                        name="password"
+                        autocomplete="off"
+                        dir="ltr"
+                        required
+                        readonly/>
+                  <input type="checkbox"
+                        class="reveal-password-checkbox"
+                        data-l10n-id="login-item-password-reveal-checkbox"/>
+                </div>
+              </label>
+              <button class="copy-button copy-password-button" data-copy-login-property="password" data-telemetry-object="password" type="button">
+                <span class="copied-button-text" data-l10n-id="login-item-copied-password-button-text"></span>
+                <span class="copy-button-text" data-l10n-id="login-item-copy-password-button-text"></span>
+              </button>
+            </div>
+          </div>
+          <div class="form-actions-row">
+            <button class="save-changes-button" type="submit"></button>
+            <button class="cancel-button" data-l10n-id="login-item-cancel-button" type="button"></button>
+          </div>
+          <p class="time-created meta-info" data-l10n-id="login-item-time-created" data-l10n-args='{"timeCreated": 0}'></p>
+          <p class="time-changed meta-info" data-l10n-id="login-item-time-changed" data-l10n-args='{"timeChanged": 0}'></p>
+          <p class="time-used meta-info" data-l10n-id="login-item-time-used" data-l10n-args='{"timeUsed": 0}'></p>
+        </form>
+        <login-footer hidden></login-footer>
+      </div>
     </template>
 
     <template id="login-filter-template">
diff --git a/browser/components/aboutlogins/content/components/login-item.css b/browser/components/aboutlogins/content/components/login-item.css
index ab29f62b1c5f..9c4dedae3d8b 100644
--- a/browser/components/aboutlogins/content/components/login-item.css
+++ b/browser/components/aboutlogins/content/components/login-item.css
@@ -3,9 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :host {
-  padding: 40px;
-  display: flex;
-  flex-direction: column;
+  overflow: auto;
 
   --reveal-checkbox-opacity: .8;
   --reveal-checkbox-opacity-hover: .6;
@@ -26,6 +24,13 @@
   }
 }
 
+.container {
+  max-width: 700px;
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+}
+
 form {
   flex-grow: 1;
 }