diff --git a/.changeset/kind-flies-rush.md b/.changeset/kind-flies-rush.md
new file mode 100644
index 000000000..3cfe0a632
--- /dev/null
+++ b/.changeset/kind-flies-rush.md
@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+Minor UI Improvements in Search Filters UI
diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
index 624b497c3..74ecdc7ed 100644
--- a/packages/app/src/components/DBSearchPageFilters.tsx
+++ b/packages/app/src/components/DBSearchPageFilters.tsx
@@ -35,6 +35,7 @@ import {
IconChevronDown,
IconChevronRight,
IconChevronUp,
+ IconFilterOff,
IconPin,
IconPinFilled,
IconRefresh,
@@ -199,7 +200,7 @@ export const FilterCheckbox = ({
gap="xs"
wrap="nowrap"
justify="space-between"
- pe={'11px'}
+ pe={'4px'}
miw={0}
>
)}
- : }
+ size="xs"
+ variant="subtle"
+ color="gray"
+ aria-label={pinned ? 'Unpin field' : 'Pin field'}
+ role="checkbox"
+ aria-checked={pinned}
data-testid={`filter-pin-${label}`}
- />
+ >
+ {pinned ? : }
+
{pinned && (
-
+
-
+
)}
);
@@ -578,6 +586,7 @@ export const FilterGroup = ({
p="0"
pr="xxxs"
data-testid="filter-group-control"
+ style={{ overflow: 'hidden' }}
classNames={{
chevron: 'm-0',
label: 'p-0',
@@ -592,62 +601,87 @@ export const FilterGroup = ({
fz="xxs"
color="gray"
>
-
+
{name}
-
+
{!hasRange && (
<>
-
- {isFetchingDistribution ? (
-
- ) : showDistributions ? (
-
- ) : (
-
- )}
-
- {onFieldPinClick && (
- {isFieldPinned ? (
-
+ {isFetchingDistribution ? (
+
+ ) : showDistributions ? (
+
) : (
-
+
)}
+
+ {onFieldPinClick && (
+
+
+ {isFieldPinned ? (
+
+ ) : (
+
+ )}
+
+
)}
>
)}
{totalAppliedFiltersSize > 0 && (
- {
- onClearClick();
- setSearch('');
- }}
- />
+
+ {
+ onClearClick();
+ setSearch('');
+ }}
+ >
+
+
+
)}