style: Fix filter color and alert icon alignment (#1369)

## Before

<img width="493" height="105" alt="Screenshot 2025-11-14 at 2 46 59 PM" src="https://github.com/user-attachments/assets/412ce6ce-7c62-484b-a6d8-b4fd71b8980a" />

## After

<img width="510" height="103" alt="Screenshot 2025-11-14 at 2 46 20 PM" src="https://github.com/user-attachments/assets/a39d7406-c032-4ea3-9508-1e18c9aa18a6" />
This commit is contained in:
Drew Davis 2025-11-17 10:09:59 -05:00 committed by GitHub
parent 44a6a08a29
commit 4d1eaf1073
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 13 additions and 4 deletions

View file

@ -0,0 +1,5 @@
---
"@hyperdx/app": patch
---
style: Fix filter color and alert icon alignment

View file

@ -483,12 +483,12 @@ export default function AppNav({ fixed = false }: { fixed?: boolean }) {
{Array.isArray(savedSearch.alerts) && savedSearch.alerts.length > 0 ? (
savedSearch.alerts.some(a => a.state === AlertState.ALERT) ? (
<i
className="bi bi-bell float-end text-danger"
className="bi bi-bell float-end text-danger ms-1"
title="Has Alerts and is in ALERT state"
></i>
) : (
<i
className="bi bi-bell float-end"
className="bi bi-bell float-end ms-1"
title="Has Alerts and is in OK state"
></i>
)

View file

@ -1034,7 +1034,7 @@ const DBSearchPageFiltersComponent = ({
withArrow
label="Only show root spans (spans with no parent span)."
>
<Text size="xs" c="gray.3" mt="-1px">
<Text size="xs" mt="-1px">
<i className="bi bi-diagram-3"></i> Root Spans Only
</Text>
</Tooltip>

View file

@ -104,7 +104,7 @@
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
&:hover {
color: var(--color-text-success);
}
@ -112,6 +112,10 @@
outline: none;
background: var(--color-bg-muted);
}
i {
vertical-align: top;
}
}
.nestedLinkActive {