fix: render builds status filter dashes correctly in Safari (#459)

Fixes [ENG-4333](https://linear.app/e2b/issue/ENG-4333). The builds
Status filter drew its dashed status rings with a CSS `border-dashed` on
rounded elements, which Safari renders with uneven, sparse dashes
(Chrome was fine).

- Render the rings via the registry `StatusIcon` SVG instead of a CSS
dashed border, keeping a `bg-bg` backdrop so the front ring masks the
one behind it in the overlap.
- Sync `StatusIcon` from the e2b registry to pick up `pathLength`, which
evenly distributes the dash pattern around the circle.

| Before | After |
| ------- | ------- |
| <img width="200" alt="CleanShot 2026-06-25 at 09 41 38"
src="https://github.com/user-attachments/assets/76e68ef2-5b61-47d0-9e03-be13f9341d6e"
/> | <img width="200" alt="CleanShot 2026-06-25 at 09 42 32"
src="https://github.com/user-attachments/assets/c86023fa-4e81-4bcc-a410-1e0c8636af2c"
/> |

| Before | After |
| ------- | ------- |
| <img width="368" height="116" alt="CleanShot 2026-06-25 at 09 40
20@2x"
src="https://github.com/user-attachments/assets/eed646a8-9d9b-446e-a743-43e01253d1ca"
/> | <img width="364" height="118" alt="CleanShot 2026-06-25 at 09 40
06@2x"
src="https://github.com/user-attachments/assets/b5871d8e-02bc-47d2-9029-20708ae2c647"
/> |
  
  
🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: drankou

src/features/dashboard/common/log-level-filter.tsx

@@ -8,6 +8,7 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from '@/ui/primitives/dropdown-menu'
+import { StatusIcon } from '@/ui/primitives/icons'
 import type { LogLevelValue } from './log-cells'
 
 const DEFAULT_OPTIONS: Array<{ value: LogLevelValue; label: string }> = [
@@ -63,16 +64,13 @@ export function LogLevelFilter({
 
 function LevelIndicator({ level }: { level: LogLevelValue }) {
   return (
-    <div
-      className={cn(
-        'size-3.5 rounded-full bg-bg border-[1.5px] border-dashed',
-        {
-          'border-fg-tertiary': level === 'debug',
-          'border-accent-info-highlight': level === 'info',
-          'border-accent-warning-highlight': level === 'warn',
-          'border-accent-error-highlight': level === 'error',
-        }
-      )}
+    <StatusIcon
+      className={cn({
+        'text-fg-tertiary!': level === 'debug',
+        'text-accent-info-highlight!': level === 'info',
+        'text-accent-warning-highlight!': level === 'warn',
+        'text-accent-error-highlight!': level === 'error',
+      })}
     />
   )
 }

src/features/dashboard/templates/builds/status-filter.tsx

@@ -10,6 +10,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/ui/primitives/dropdown-menu'
+import { StatusIcon } from '@/ui/primitives/icons'
 import { Status } from './table-cells'
 
 const STATUS_OPTIONS: Array<{ value: BuildStatus; label: string }> = [
@@ -83,14 +84,15 @@ interface StatusIconsProps {
 }
 
 function StatusIcons({ selectedStatuses }: StatusIconsProps) {
-  const sortedStatuses = STATUS_DISPLAY_ORDER.filter((s) =>
-    selectedStatuses.includes(s)
-  )
-
   return (
-    <div className="flex -space-x-1.5">
-      {sortedStatuses.map((status, i) => (
-        <DashedStatusCircleIcon key={status} status={status} index={i} />
+    <div className="flex -space-x-2">
+      {STATUS_DISPLAY_ORDER.map((status, i) => (
+        <DashedStatusCircleIcon
+          key={status}
+          status={status}
+          index={i}
+          selected={selectedStatuses.includes(status)}
+        />
       ))}
     </div>
   )
@@ -99,23 +101,28 @@ function StatusIcons({ selectedStatuses }: StatusIconsProps) {
 interface DashedStatusCircleIconProps {
   status: BuildStatus
   index: number
+  selected: boolean
 }
 
 function DashedStatusCircleIcon({
   status,
   index,
+  selected,
 }: DashedStatusCircleIconProps) {
   return (
-    <div
-      className={cn(
-        'size-3.5 rounded-full bg-bg border-[1.5px] border-dashed',
-        {
-          'border-fg-tertiary': status === 'building',
-          'border-accent-positive-highlight': status === 'success',
-          'border-accent-error-highlight': status === 'failed',
-        }
-      )}
+    <span
+      className="relative grid shrink-0 place-items-center"
       style={{ rotate: `${index * 50}deg`, zIndex: index + 1 }}
-    />
+    >
+      <span className="col-start-1 row-start-1 size-3.5 rounded-full bg-bg" />
+      <StatusIcon
+        className={cn('col-start-1 row-start-1', {
+          'text-fill!': !selected,
+          'text-fg-tertiary!': selected && status === 'building',
+          'text-accent-positive-highlight!': selected && status === 'success',
+          'text-accent-error-highlight!': selected && status === 'failed',
+        })}
+      />
+    </span>
   )
 }

src/ui/primitives/icons/status-icon.tsx

@@ -1,7 +1,7 @@
 import { Icon, type IconProps } from './icon'
 
 /**
- * ![StatusIcon](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuMTY2IDhDMTQuMTY2IDExLjMxMzcgMTEuNDc5NyAxNCA4LjE2NjAyIDE0QzQuODUyMzEgMTQgMi4xNjYwMiAxMS4zMTM3IDIuMTY2MDIgOEMyLjE2NjAyIDQuNjg2MjkgNC44NTIzMSAyIDguMTY2MDIgMkMxMS40Nzk3IDIgMTQuMTY2IDQuNjg2MjkgMTQuMTY2IDhaIiBzdHJva2U9IiM4ODg4ODgiIHN0cm9rZS13aWR0aD0iMS4zMzMzMyIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWRhc2hhcnJheT0iMS4zMyAyLjY3Ii8+PC9zdmc+)
+ * ![StatusIcon](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuMTY2IDhDMTQuMTY2IDExLjMxMzcgMTEuNDc5NyAxNCA4LjE2NjAyIDE0QzQuODUyMzEgMTQgMi4xNjYwMiAxMS4zMTM3IDIuMTY2MDIgOEMyLjE2NjAyIDQuNjg2MjkgNC44NTIzMSAyIDguMTY2MDIgMkMxMS40Nzk3IDIgMTQuMTY2IDQuNjg2MjkgMTQuMTY2IDhaIiBzdHJva2U9IiM4ODg4ODgiIHN0cm9rZS13aWR0aD0iMS4zMzMzMyIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWRhc2hhcnJheT0iMS4zMyAyLjY3IiBwYXRoTGVuZ3RoPSIzMiIvPjwvc3ZnPg==)
  *
  * Synced from Figma `Icon/16px/Status`.
  */
@@ -14,6 +14,7 @@ export const StatusIcon = (props: IconProps) => (
       strokeLinejoin="round"
       strokeWidth="1.33333"
       strokeDasharray="1.33 2.67"
+      pathLength={32}
     />
   </Icon>
 )