/* ==========================================================================
   Corrections to the carried search markup - 1.0.58

   NOT carried from the legacy theme. Everything else the search page loads is a verbatim copy of
   what the live site serves; this file is the plugin's own, and exists so those copies can stay
   verbatim while still fixing things on top of them. Keep it that way: corrections go here, not
   edited into property-search-prop.css, -header.css, -template.css or -shared-header.css.
   ========================================================================== */

/*
 * THE GAP IN THE PROPERTY TYPE LIST.
 *
 * "House - Semi-Detached" is the longest of the eleven labels. Below roughly 1200px of viewport -
 * Bootstrap's `@media (min-width: 1200px)` step, where `.container` drops from 1170px to 970px and
 * this column narrows with it - the label no longer fits on one line, wraps, and the row becomes
 * 40px against the others' 20px. The empty second line reads as a missing entry in the middle of
 * the list.
 *
 * Measured at 1280x800, clientWidth 1135, on BOTH sites:
 *
 *     ul 210.9px   li 170.1px   row 3 height 40px   every other row 20px
 *
 * and at clientWidth 1185, again on both:
 *
 *     ul 260.9px   li 220.1px   row 3 height 20px   no gap
 *
 * So the live site does exactly the same thing at the same width - this is not a migration
 * regression, and the fix below is a deliberate improvement on the live site rather than parity
 * with it. Nothing is missing from the list either way: all eleven property types are present and
 * selectable at every width.
 *
 * `text-overflow: ellipsis` rather than a smaller font or a wider column: the column width is
 * Bootstrap's and shared with the rest of the form, and shrinking the type for one list would make
 * it the odd one out. A clipped "House - Semi-Detache..." on a narrow window is a better outcome
 * than a row of blank space that looks like a bug.
 */
/*
 * The container is `div.dropdown-list` - verified in the rendered page, not guessed. It wraps both
 * scrolling checkbox lists the form has (Property Type and Town or Village), and the long-label
 * problem is the same in each, so both are covered.
 */
#propertyForm .dropdown-list ul li {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}