--- a/browser/themes/shared/autocomplete.inc.css
+++ b/browser/themes/shared/autocomplete.inc.css
@@ -7,22 +7,22 @@
 #PopupAutoComplete > richlistbox > richlistitem {
   height: 20px;
   min-height: 20px;
   border: 0;
   border-radius: 0;
   padding: 0px 1px 0px 1px;
 }
 
-#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
+#PopupAutoComplete > richlistbox > richlistitem > .ac-box > .ac-site-icon {
   margin-inline-start: 4px;
   margin-inline-end: 0;
 }
 
-#PopupAutoComplete > richlistbox > richlistitem > .ac-title {
+#PopupAutoComplete > richlistbox > richlistitem > .ac-box > .ac-title {
   font: icon;
   margin-inline-start: 4px;
 }
 
 #PopupAutoComplete > richlistbox {
   padding: 0;
 }
 

--- a/browser/themes/shared/urlbar-autocomplete.inc.css
+++ b/browser/themes/shared/urlbar-autocomplete.inc.css
@@ -12,16 +12,17 @@
   padding: 4px 3px;
 }
 
 .autocomplete-richlistitem {
   min-height: 30px;
   font: message-box;
   border-radius: 2px;
   padding-inline-start: var(--item-padding-start);
+  padding-inline-end: var(--item-padding-end);
 }
 
 :root[uidensity=touch] .autocomplete-richlistitem {
   min-height: 40px;
 }
 
 .autocomplete-richlistitem:hover,
 treechildren.searchbar-treebody::-moz-tree-row(hover) {

--- a/toolkit/content/widgets/autocomplete.xml
+++ b/toolkit/content/widgets/autocomplete.xml
@@ -1396,18 +1396,20 @@ extends="chrome://global/content/binding
             if (typeof(val) == "number") {
               let paddingInCSS =
                   3   // .autocomplete-richlistbox padding-left/right
                 + 6   // .ac-site-icon margin-inline-start
                 + 16  // .ac-site-icon width
                 + 6;  // .ac-site-icon margin-inline-end
               let actualVal = Math.round(val) - paddingInCSS;
               this.style.setProperty(varName, actualVal + "px");
+              this.style.setProperty("--item-padding-end", actualVal + "px");
             } else {
               this.style.removeProperty(varName);
+              this.style.removeProperty("--item-padding-end");
             }
             for (let item of this.richlistbox.childNodes) {
               item.handleOverUnderflow();
             }
           }
           return val;
           ]]>
         </setter>
@@ -1456,19 +1458,22 @@ extends="chrome://global/content/binding
             this.adjustHeight();
           }
       ]]>
       </handler>
     </handlers>
   </binding>
 
   <binding id="autocomplete-richlistitem-insecure-field" extends="chrome://global/content/bindings/autocomplete.xml#autocomplete-richlistitem">
-    <content align="center"
-             onoverflow="this._onOverflow();"
-             onunderflow="this._onUnderflow();">
+    <content>
+      <xul:hbox anonid="box" class="ac-box"
+                flex="1" align="center"
+                onoverflow="this.parentNode._onOverflow();"
+                onunderflow="this.parentNode._onUnderflow();"
+                style="overflow: hidden;">
       <xul:image anonid="type-icon"
                  class="ac-type-icon"
                  xbl:inherits="selected,current,type"/>
       <xul:image anonid="site-icon"
                  class="ac-site-icon"
                  xbl:inherits="src=image,selected,type"/>
       <xul:vbox class="ac-title"
                 align="left"
@@ -1508,16 +1513,17 @@ extends="chrome://global/content/binding
                 align="center"
                 xbl:inherits="selected,actiontype">
         <xul:description class="ac-text-overflow-container">
           <xul:description anonid="action-text"
                            class="ac-action-text"
                            xbl:inherits="selected"/>
         </xul:description>
       </xul:hbox>
+      </xul:hbox>
     </content>
 
     <handlers>
       <handler event="click" button="0"><![CDATA[
         let baseURL = Services.urlFormatter.formatURLPref("app.support.baseURL");
         window.openUILinkIn(baseURL + "insecure-password", "tab", {
           relatedToCurrent: true,
         });
@@ -1553,19 +1559,22 @@ extends="chrome://global/content/binding
         </body>
       </method>
 
     </implementation>
   </binding>
 
   <binding id="autocomplete-richlistitem" extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
 
-    <content align="center"
-             onoverflow="this._onOverflow();"
-             onunderflow="this._onUnderflow();">
+    <content>
+      <xul:hbox anonid="box" class="ac-box"
+                flex="1" align="center"
+                onoverflow="this.parentNode._onOverflow();"
+                onunderflow="this.parentNode._onUnderflow();"
+                style="overflow: hidden;">
       <xul:image anonid="type-icon"
                  class="ac-type-icon"
                  xbl:inherits="selected,current,type"/>
       <xul:image anonid="site-icon"
                  class="ac-site-icon"
                  xbl:inherits="src=image,selected,type"/>
       <xul:hbox class="ac-title"
                 align="center"
@@ -1605,21 +1614,25 @@ extends="chrome://global/content/binding
                 align="center"
                 xbl:inherits="selected,actiontype">
         <xul:description class="ac-text-overflow-container">
           <xul:description anonid="action-text"
                            class="ac-action-text"
                            xbl:inherits="selected"/>
         </xul:description>
       </xul:hbox>
+      </xul:hbox>
     </content>
 
     <implementation implements="nsIDOMXULSelectControlItemElement">
       <constructor>
         <![CDATA[
+          this._box = document.getAnonymousElementByAttribute(
+            this, "anonid", "box"
+          );
           this._typeIcon = document.getAnonymousElementByAttribute(
             this, "anonid", "type-icon"
           );
           this._siteIcon = document.getAnonymousElementByAttribute(
             this, "anonid", "site-icon"
           );
           this._titleText = document.getAnonymousElementByAttribute(
             this, "anonid", "title-text"
@@ -2320,17 +2333,17 @@ extends="chrome://global/content/binding
           }
           ]]>
         </body>
       </method>
 
       <!-- This method truncates the displayed strings as necessary. -->
       <method name="_handleOverflow">
         <body><![CDATA[
-          let itemRect = this.parentNode.getBoundingClientRect();
+          let itemRect = this._box.getBoundingClientRect();
           let titleRect = this._titleText.getBoundingClientRect();
           let tagsRect = this._tagsText.getBoundingClientRect();
           let separatorRect = this._separator.getBoundingClientRect();
           let urlRect = this._urlText.getBoundingClientRect();
           let actionRect = this._actionText.getBoundingClientRect();
           let separatorURLActionWidth =
             separatorRect.width + Math.max(urlRect.width, actionRect.width);