Dropdowns clipped in Firefox on Ubuntu

[miketaylr]

Originally filed @ https://bugzilla.mozilla.org/show_bug.cgi?id=1496355

.dg .c select {
    margin-top: 5px;
}

.dg li:not(.folder) {
    cursor: auto;
    height: 27px;
    line-height: 27px;
    overflow: hidden;
    padding: 0 4px 0 5px;
}

Any form control that doesn't fit within 27px will be clipped.

Is it possible to remove the explicit height here (and anywhere else on that li)?

[gbroques]

I'm noticing a similar issue on Ubuntu and Firefox (but this may affect Firefox on other distros such as Linux Mint).

The hard-coded height of 27px is clipping longer text labels for controls.

For my use-case, overriding this hard-coded height with a min-height from JavaScript fixed it:

function overrideDatGuiStyles() {
  const style = window.document.createElement('style');
  style.type = 'text/css';
  // overriding styles from https://github.com/dataarts/dat.gui/blob/v0.7.9/src/dat/gui/_structure.scss
  style.innerHTML = `
    .dg li:not(.folder) {
      height: initial;
      min-height: 27px;
    }
    .dg .cr {
      height: initial;
      min-height: 27px;
    }
    .dg .closed li:not(.title), .dg .closed ul li, .dg .closed ul li > * {
      height: 0;
      min-height: 0;
    }
  `;
  const head = window.document.getElementsByTagName('head')[0];
  try {
    head.appendChild(style);
  } catch (e) {
    // Unable to inject CSS, probably because of a Content Security Policy.
    console.error(e);
  }
}

See "Stator Resin" and "Surround" in the BEFORE screenshot, and "Stator Resin Cast" and "Surround Screws" in the AFTER screenshot.

BEFORE	AFTER

It seems like updating the source here to use a min-height instead of height would be more responsive?

Would a pull-request be accepted for this?