Fix slider tooltip and switch label overlap

Author: perfectly-preserved-pie

assets/css/responsive-filters.css

@@ -68,6 +68,19 @@
   display: none;
 }
 
+/* RangeSlider tooltips are absolutely positioned and therefore do not add to
+   the slider's layout height. Reserve a row for bottom tooltips before laying
+   out the missing-value switch so its label cannot overlap them. */
+.range-filter__slider-with-switch {
+  padding-bottom: 2.75rem;
+}
+
+/* The ISP control has two stacked sliders and does not use build_range_filter.
+   Give both bottom tooltip rows space so they clear the next heading/switch. */
+.isp-speed-filter__range {
+  padding-bottom: 2.75rem;
+}
+
 @media (max-width: 1099.98px) {
   .listing-page-layout {
     display: block;

pages/component_factories.py

@@ -79,9 +79,17 @@ def build_range_filter(
     if marks is not None:
         slider_kwargs["marks"] = marks
 
-    body_children = [dcc.RangeSlider(**slider_kwargs)]
+    slider = dcc.RangeSlider(**slider_kwargs)
+    has_missing_switch = bool(
+        include_missing_switch_id and include_missing_switch_label
+    )
+    body_children = [
+        html.Div(slider, className="range-filter__slider-with-switch")
+        if has_missing_switch
+        else slider
+    ]
 
-    if include_missing_switch_id and include_missing_switch_label:
+    if has_missing_switch:
         body_children.append(
             dmc.Switch(
                 id=include_missing_switch_id,
@@ -96,7 +104,7 @@ def build_range_filter(
     return html.Div(
         [
             html.Div(list(header_children or [])),
-            html.Div(body_children, id=dynamic_id),
+            html.Div(body_children, id=dynamic_id, className="range-filter__controls"),
         ],
         style=container_style,
         id=component_id,
@@ -132,7 +140,7 @@ def build_isp_speed_components(max_download: float, max_upload: float) -> html.D
                         },
                     ),
                 ],
-                style={"marginBottom": "15px"},
+                className="isp-speed-filter__range",
             ),
             html.Div(
                 [
@@ -150,6 +158,7 @@ def build_isp_speed_components(max_download: float, max_upload: float) -> html.D
                         },
                     ),
                 ],
+                className="isp-speed-filter__range",
             ),
             dmc.Switch(
                 id="isp_speed_missing_switch",
@@ -161,6 +170,7 @@ def build_isp_speed_components(max_download: float, max_upload: float) -> html.D
             ),
         ],
         id="isp_speed_div",
+        className="isp-speed-filter",
     )
 
 

tests/e2e/responsive_filters.spec.js

@@ -162,3 +162,79 @@ test("tablet uses a right drawer and desktop keeps a persistent sidebar", async
 
   expect(errors).toEqual([]);
 });
+
+test("range slider tooltips stay clear of missing-value switches", async ({ page }) => {
+  await page.setViewportSize({ width: 440, height: 900 });
+  await page.goto(`${BASE_URL}/buy`, { waitUntil: "domcontentloaded" });
+  await waitForFilterState(page, "buy");
+  await page.locator("#buy-filter-open-button").click();
+  await page.getByRole("button", { name: "Lot Size", exact: true }).click();
+
+  const slider = page.locator("#lot_size_div_buy .range-filter__slider-with-switch");
+  const missingSwitch = page.locator("#lot_size_missing_switch");
+  await expect(slider).toBeVisible();
+  await expect(missingSwitch).toBeVisible();
+
+  const geometry = await page.evaluate(() => {
+    const tooltipBottom = Math.max(
+      ...Array.from(
+        document.querySelectorAll(
+          "#lot_size_div_buy .range-filter__slider-with-switch .rc-slider-tooltip",
+        ),
+        (tooltip) => tooltip.getBoundingClientRect().bottom,
+      ),
+    );
+    const switchTop = document
+      .getElementById("lot_size_missing_switch")
+      .closest(".mantine-Switch-root")
+      .getBoundingClientRect().top;
+    return { tooltipBottom, switchTop };
+  });
+
+  expect(geometry.switchTop).toBeGreaterThanOrEqual(geometry.tooltipBottom + 8);
+});
+
+test("ISP slider tooltips stay clear of the next control", async ({ page }) => {
+  await page.setViewportSize({ width: 440, height: 900 });
+  await page.goto(BASE_URL, { waitUntil: "domcontentloaded" });
+  await waitForFilterState(page, "lease");
+  await page.locator("#lease-filter-open-button").click();
+  await page
+    .getByRole("button", { name: "Internet Service Provider (ISP) Speed", exact: true })
+    .click();
+
+  const ispFilter = page.locator("#isp_speed_div");
+  await expect(ispFilter).toBeVisible();
+
+  const geometry = await page.evaluate(() => {
+    const ranges = Array.from(
+      document.querySelectorAll("#isp_speed_div .isp-speed-filter__range"),
+    );
+    const tooltipBottom = (range) => Math.max(
+      ...Array.from(
+        range.querySelectorAll(".rc-slider-tooltip"),
+        (tooltip) => tooltip.getBoundingClientRect().bottom,
+      ),
+    );
+    const uploadHeadingTop = ranges[1]
+      .querySelector("h6")
+      .getBoundingClientRect().top;
+    const switchTop = document
+      .getElementById("isp_speed_missing_switch")
+      .closest(".mantine-Switch-root")
+      .getBoundingClientRect().top;
+    return {
+      downloadTooltipBottom: tooltipBottom(ranges[0]),
+      uploadHeadingTop,
+      uploadTooltipBottom: tooltipBottom(ranges[1]),
+      switchTop,
+    };
+  });
+
+  expect(geometry.uploadHeadingTop).toBeGreaterThanOrEqual(
+    geometry.downloadTooltipBottom + 8,
+  );
+  expect(geometry.switchTop).toBeGreaterThanOrEqual(
+    geometry.uploadTooltipBottom + 8,
+  );
+});

tests/test_component_smoke.py

@@ -3,7 +3,9 @@
 from dash import dcc, html
 
 from pages.component_factories import (
+    build_isp_speed_components,
     build_location_filter_components,
+    build_range_filter,
     build_subtype_filter,
     build_title_card,
 )
@@ -64,6 +66,39 @@ def test_subtype_filter_defaults_to_include_all_state(self) -> None:
         self.assertIsInstance(dropdown, dcc.Dropdown)
         self.assertEqual(dropdown.value, [])
 
+    def test_range_filter_reserves_tooltip_space_before_switch(self) -> None:
+        component = build_range_filter(
+            slider_id="test-slider",
+            min_value=0,
+            max_value=100,
+            value=[0, 100],
+            component_id="test-range-filter",
+            dynamic_id="test-range-filter-controls",
+            include_missing_switch_id="test-missing-switch",
+            include_missing_switch_label="Include unknown values",
+        )
+
+        controls = component.children[1]
+        slider_wrapper, missing_switch = controls.children
+
+        self.assertEqual(controls.className, "range-filter__controls")
+        self.assertEqual(
+            slider_wrapper.className,
+            "range-filter__slider-with-switch",
+        )
+        self.assertIsInstance(slider_wrapper.children, dcc.RangeSlider)
+        self.assertEqual(missing_switch.id, "test-missing-switch")
+
+    def test_isp_speed_filter_reserves_space_below_both_sliders(self) -> None:
+        component = build_isp_speed_components(10_000, 10_000)
+
+        download_range, upload_range, missing_switch = component.children
+
+        self.assertEqual(component.className, "isp-speed-filter")
+        self.assertEqual(download_range.className, "isp-speed-filter__range")
+        self.assertEqual(upload_range.className, "isp-speed-filter__range")
+        self.assertEqual(missing_switch.id, "isp_speed_missing_switch")
+
     def test_title_card_links_to_mcp_setup_page(self) -> None:
         title_card = build_title_card(
             title="WhereToLive.LA",