--- a/browser/components/search/content/search.xml
+++ b/browser/components/search/content/search.xml
@@ -1578,20 +1578,17 @@
                             .getInterface(Ci.nsIDOMWindowUtils)
                             .screenPixelsPerCSSPixel;
           if (Math.floor(scale) != scale) {
             --panelWidth;
           }
 
           // The + 1 is because the last button doesn't have a right border.
           let enginesPerRow = Math.floor((panelWidth + 1) / this.buttonWidth);
-          let buttonWidth = Math.floor(panelWidth / enginesPerRow);
-          // There will be an emtpy area of:
-          //   panelWidth - enginesPerRow * buttonWidth  px
-          // at the end of each row.
+          this.buttons.style.setProperty("--engines-per-row", enginesPerRow);
 
           // If the <description> tag with the list of search engines doesn't have
           // a fixed height, the panel will be sized incorrectly, causing the bottom
           // of the suggestion <tree> to be hidden.
           if (this.compact)
             ++oneOffCount;
           let rowCount = Math.ceil(oneOffCount / enginesPerRow);
           let height = rowCount * 33; // 32px per row, 1px border.
@@ -1612,57 +1609,39 @@
             button.id = this._buttonIDForEngine(engine);
             let uri = "chrome://browser/skin/search-engine-placeholder.png";
             if (engine.iconURI) {
               uri = engine.iconURI.spec;
             }
             button.setAttribute("image", uri);
             button.setAttribute("class", "searchbar-engine-one-off-item");
             button.setAttribute("tooltiptext", engine.name);
-            button.setAttribute("width", buttonWidth);
             button.engine = engine;
 
             if ((i + 1) % enginesPerRow == 0)
               button.classList.add("last-of-row");
 
             if (i + 1 == engines.length)
               button.classList.add("last-engine");
 
             if (i >= oneOffCount + dummyItems - enginesPerRow)
               button.classList.add("last-row");
 
             this.buttons.insertBefore(button, this.settingsButtonCompact);
           }
 
-          let hasDummyItems = !!dummyItems;
           while (dummyItems) {
             let button = document.createElementNS(kXULNS, "button");
             button.setAttribute("class", "searchbar-engine-one-off-item dummy last-row");
-            button.setAttribute("width", buttonWidth);
 
             if (!--dummyItems)
               button.classList.add("last-of-row");
 
             this.buttons.insertBefore(button, this.settingsButtonCompact);
           }
-
-          if (this.compact) {
-            this.settingsButtonCompact.setAttribute("width", buttonWidth);
-            if (rowCount == 1 && hasDummyItems) {
-              // When there's only one row, make the compact settings button
-              // hug the right edge of the panel.  It may not due to the panel's
-              // width not being an integral multiple of the button width.  (See
-              // the "There will be an emtpy area" comment above.)  Increase the
-              // width of the last dummy item by the remainder.
-              let remainder = panelWidth - (enginesPerRow * buttonWidth);
-              let width = remainder + buttonWidth;
-              let lastDummyItem = this.settingsButtonCompact.previousSibling;
-              lastDummyItem.setAttribute("width", width);
-            }
-          }
         ]]></body>
       </method>
 
       <!-- If a page offers more than this number of engines, the add-engines
            menu button is shown, instead of showing the engines directly in the
            popup. -->
       <field name="_addEngineMenuThreshold">5</field>
 

--- a/browser/themes/shared/searchbar.inc.css
+++ b/browser/themes/shared/searchbar.inc.css
@@ -69,17 +69,17 @@
   background-color: var(--arrowpanel-dimmed);
   /* Bug 1108841: prevent font-size from affecting the layout */
   line-height: 0;
 }
 
 .searchbar-engine-one-off-item {
   -moz-appearance: none;
   display: inline-block;
-  min-width: 48px;
+  min-width: calc(100% / var(--engines-per-row));
   height: 32px;
   margin: 0;
   padding: 0;
   background: linear-gradient(transparent 15%, var(--panel-separator-color) 15%, var(--panel-separator-color) 85%, transparent 85%);
   background-size: 1px auto;
   background-repeat: no-repeat;
   background-position: right center;
   color: GrayText;