diff --git a/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters--dark.png b/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters--dark.png index 3b88892e2f777f..cb3ec3cc2a1e5e 100644 Binary files a/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters--dark.png and b/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters--dark.png differ diff --git a/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters--light.png b/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters--light.png index a4b00dfcfc6a96..755ff05f59291c 100644 Binary files a/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters--light.png and b/frontend/__snapshots__/filters-propertyfilters--comparing-property-filters--light.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--dark--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--dark--webkit.png index d2e3a0fee61e2c..ae36016a26fa06 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--dark--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--dark--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--dark--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--dark--webkit.png index 03113bd793ae48..be59bd0e897773 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--dark--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-breakdown-edit--dark--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png index 39f23e4aab8d14..b1d3efa1e8128c 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png and b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-edit--dark--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--dark--webkit.png index 55ce5803c1e5a0..8ad6cc01bbbfd4 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table-edit--dark--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--dark--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-edit--dark.png b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--dark.png index ca3b12730bbc8e..4b855a26b57dc1 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table-edit--dark.png and b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--dark.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--trends-table-edit--light--webkit.png b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--light--webkit.png index 7ad8f1f31d1199..ff7285b4223c49 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--trends-table-edit--light--webkit.png and b/frontend/__snapshots__/scenes-app-insights--trends-table-edit--light--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--dark.png b/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--dark.png index c546432b97564c..7014e3ecd40069 100644 Binary files a/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--dark.png and b/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--dark.png differ diff --git a/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--light.png b/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--light.png index 7e5c58eea92e26..2417834796783a 100644 Binary files a/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--light.png and b/frontend/__snapshots__/scenes-app-surveys--new-survey-targeting-section--light.png differ diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss b/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss index 49521aef36ec6f..936acf346f9593 100644 --- a/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss +++ b/frontend/src/lib/components/PropertyFilters/PropertyFilters.scss @@ -12,7 +12,7 @@ .PropertyFilters__prefix { padding: 0 5px; font-size: 18px; - color: #c4c4c4; + color: var(--border-bold-3000); user-select: none; } diff --git a/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx b/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx index 1961a74cd46150..2e759269694555 100644 --- a/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx +++ b/frontend/src/lib/components/PropertyFilters/components/OperatorValueSelect.tsx @@ -133,7 +133,13 @@ export function OperatorValueSelect({ /> {!isOperatorFlag(currentOperator || PropertyOperator.Exact) && type && propkey && ( -
+
:first-child { width: 10rem; } } } +} - .TaxonomicPropertyFilter__row { - display: flex; - gap: 0.5rem; - overflow: hidden; - - .TaxonomicPropertyFilter__row__operator { - display: flex; - flex-shrink: 0; - align-items: center; - justify-content: flex-end; - width: 4.5rem; - height: 40px; // Matches typical row height - - .arrow { - position: relative; - font-size: 18px; - font-weight: bold; - color: #c4c4c4; - user-select: none; - } - } - - .TaxonomicPropertyFilter__row__items { - display: flex; - flex: 1; - flex-wrap: wrap; - gap: 0.5rem; - align-items: flex-start; - overflow: hidden; +.TaxonomicPropertyFilter__row { + display: flex; + gap: 0.5rem; + overflow: hidden; +} - > * { - max-width: 100%; - overflow: hidden; - } - } +.TaxonomicPropertyFilter__row-operator { + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: flex-end; + width: 4.5rem; + height: 40px; // Matches typical row height - &.TaxonomicPropertyFilter__row--showing-operators { - // Mobile screen - columns - &.width-tiny { - .TaxonomicPropertyFilter__row__items { - flex-direction: column; - align-items: stretch; - } - } + .TaxonomicPropertyFilter__row--or-filtering & { + width: 2rem; + } +} - // small size - force wrapping - &.width-small { - .TaxonomicPropertyFilter__row__items { - > :first-child { - flex: 1; - min-width: 10rem; - } +.TaxonomicPropertyFilter__row-arrow { + position: relative; + font-size: 18px; + font-weight: bold; + color: var(--border-bold-3000); + user-select: none; +} - > :last-child { - width: 100%; - } - } - } +.TaxonomicPropertyFilter__row-items { + display: flex; + flex: 1; + flex-wrap: wrap; + gap: 0.5rem; + align-items: center; + overflow: hidden; - &.width-medium { - .TaxonomicPropertyFilter__row__items { - > :first-child { - width: 30%; - min-width: 10rem; - } - } - } - } + > * { + max-width: 100%; + overflow: hidden; + } - &.TaxonomicPropertyFilter__row--or-filtering { - .TaxonomicPropertyFilter__row__operator { - width: 2rem; - } + .TaxonomicPropertyFilter__row--showing-operators & { + > :first-child { + flex-grow: 1; + width: 30%; + min-width: 10rem; } } } diff --git a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx index 9b70870f2426f4..00409a5e899989 100644 --- a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx +++ b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx @@ -19,7 +19,6 @@ import { TaxonomicFilterGroupType, TaxonomicFilterValue, } from 'lib/components/TaxonomicFilter/types' -import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver' import { isOperatorMulti, isOperatorRegex } from 'lib/utils' import { useMemo } from 'react' @@ -118,31 +117,23 @@ export function TaxonomicPropertyFilter({ /> ) - const { ref: wrapperRef, size } = useResizeBreakpoints({ - 0: 'tiny', - 350: 'small', - 550: 'medium', - }) - return (
{showInitialSearchInline ? ( taxonomicFilter ) : (
{hasRowOperator && ( -
+
{orFiltering ? ( <> {propertyGroupType && index !== 0 && filter?.key && ( @@ -155,7 +146,7 @@ export function TaxonomicPropertyFilter({
{index === 0 ? ( <> - + where ) : ( @@ -165,7 +156,7 @@ export function TaxonomicPropertyFilter({ )}
)} -
+
{ } NewSurveyTargetingSection.parameters = { testOptions: { - waitForSelector: ['.LemonBanner .LemonIcon', '.TaxonomicPropertyFilter__row.width-small'], + waitForSelector: ['.LemonBanner .LemonIcon', '.TaxonomicPropertyFilter__row'], }, }