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" />

Author: pulpdrew

.changeset/cuddly-dots-fry.md

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

packages/app/src/AppNav.tsx

@@ -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>
           )

packages/app/src/components/DBSearchPageFilters.tsx

@@ -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>

packages/app/styles/AppNav.module.scss

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