fix: let gambit suggestions wrap instead of running off the dropdown (#4888)

Dropdown items are laid out as single lines and ellipsised, which is right
for a menu of commands but not for the gambit rows in the search modal.
Those rows document the query syntax, and the value shown against `is:` is
every boolean gambit joined into one string — it grows with each extension
that registers one, so there is no width at which truncating it stays
useful. On a forum with a handful of extensions installed the row was
already being cut off mid-word.

The row now wraps. `white-space`, `overflow` and `text-overflow` are reset
alongside the defaults they override so the two are read together; the
generic rule matches on two classes and two elements, so a reset declared
further down the file on the class alone would have lost the cascade and
silently done nothing.

Wrapping then needs the flex containers to allow it: a flex item will not
shrink below the intrinsic width of its text without `min-width: 0`, and
the key and value need `flex-wrap` to move onto separate lines. The key
keeps its own line, since it is the label the row is identified by. Now
that a row can be taller than one line, the alignment shifts from centre
to the first line so the key, its value and the add/negate buttons all sit
on the same baseline rather than floating against the middle of a wrapped
block.

Author: imorland

framework/core/less/common/Dropdown.less

@@ -56,6 +56,17 @@
         align-items: flex-start;
       }
 
+      // Gambit rows document the query syntax rather than naming a command, and
+      // the value of `is:` is every boolean gambit joined together — it grows
+      // with each extension that registers one, so there is no width at which
+      // ellipsising it stays useful. Declared here to override the single-line
+      // defaults above at equal specificity.
+      &.GambitsAutocomplete-gambit {
+        white-space: normal;
+        overflow: visible;
+        text-overflow: clip;
+      }
+
       &.disabled {
         opacity: 0.4;
         background: none !important;
@@ -247,22 +258,37 @@
 .GambitsAutocomplete {
   &-gambit {
     display: flex;
-    align-items: center;
+    // A wrapped value makes the row taller than one line, so the actions align
+    // to the first line rather than to the middle of the whole row.
+    align-items: flex-start;
 
     > button {
       flex-grow: 1;
+      // Without this the button refuses to shrink below the intrinsic width of
+      // its text, so a long value pushes the row out of the dropdown instead of
+      // wrapping inside it.
+      min-width: 0;
       cursor: pointer;
       gap: 4px;
       display: flex;
-      align-items: center;
+      flex-wrap: wrap;
+      align-items: baseline;
+      text-align: start;
       padding: 8px 15px;
       margin: -8px 0 -8px -15px;
     }
     &-key {
       font-weight: bold;
+      // The key is the label the row is identified by, so it keeps its line
+      // and the value wraps around it.
+      flex-shrink: 0;
     }
     &-value {
       color: var(--control-color);
+      // See the note above: wrap rather than overflow, and break a single
+      // over-long token rather than let it escape the panel.
+      min-width: 0;
+      overflow-wrap: break-word;
     }
     &-actions {
       flex-shrink: 0;