Bug 1696645 - fix height of buttons in container settings rows r=preferences-reviewers,desktop-theme-reviewers,ntim

Wrapping text can mean the container name takes up more vertical space.
The buttons should keep their ideal spacing instead of stretching vertically.

Differential Revision: https://phabricator.services.mozilla.com/D107486

browser/components/preferences/containers.js

@@ -53,11 +53,13 @@ let gContainersPane = {
       outer.appendChild(userContextIcon);
 
       let label = document.createXULElement("label");
+      label.className = "userContext-label-inprefs";
       label.setAttribute("flex", 1);
-      label.setAttribute("crop", "end");
-      label.textContent = ContextualIdentityService.getUserContextLabel(
+      let containerName = ContextualIdentityService.getUserContextLabel(
         container.userContextId
       );
+      label.textContent = containerName;
+      label.setAttribute("tooltiptext", containerName);
       outer.appendChild(label);
 
       let containerButtons = document.createXULElement("hbox");

browser/themes/shared/preferences/containers.css

@@ -28,6 +28,17 @@
   border-block-end: 1px solid var(--in-content-box-border-color);
 }
 
+/* Crop the label at the end using CSS. This isn't using XUL crop
+ * and a value attribute because those labels cannot be highlighted
+ * by the prefs' find-in-page feature.
+ */
+.userContext-label-inprefs {
+  display: -moz-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 #containersView richlistitem:last-of-type {
   border-block-end: 0 none;
   margin-block-end: 8px;