Bug 1846907: Limit the description text to 2 or 3 lines r=desktop-theme-reviewers,adw,dao

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

browser/components/urlbar/UrlbarView.sys.mjs

@@ -1478,10 +1478,7 @@ export class UrlbarView {
     item._elements.set("url", url);
 
     let description = this.#createElement("div");
-    description.classList.add(
+    description.classList.add("urlbarView-row-body-description");
-      "urlbarView-row-body-description",
-      "urlbarView-overflowable"
-    );
     body.appendChild(description);
     item._elements.set("description", description);
 

browser/themes/shared/urlbar-dynamic-results.css

@@ -490,6 +490,7 @@
 .urlbarView-dynamic-addons-header {
   grid-area: header;
   display: flex;
+  overflow: hidden;
 }
 
 .urlbarView-dynamic-addons-description {
@@ -499,6 +500,11 @@
   margin-block: 2px 9px;
   max-width: 80ch;
   white-space: normal;
+
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow-y: hidden;
 }
 
 .urlbarView-dynamic-addons-footer {

browser/themes/shared/urlbarView.css

@@ -763,6 +763,10 @@
 
 .urlbarView-row[rich-suggestion] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-description {
   max-width: 80ch;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow-y: hidden;
 }
 
 .urlbarView-row[rich-suggestion][selected] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-description,
@@ -800,6 +804,11 @@
   background-color: var(--urlbarView-result-button-selected-background-color);
 }
 
+.urlbarView-row[type$=_mdn] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-description,
+.urlbarView-row[type$=_pocket] > .urlbarView-row-inner > .urlbarView-row-body > .urlbarView-row-body-description {
+  -webkit-line-clamp: 2;
+}
+
 /* Search one-offs */
 
 #urlbar .search-one-offs:not([hidden]) {