Fixing dev timeline icons

README.md

@@ -86,6 +86,7 @@ curl -H "Authorization: Bearer <admin-token>" https://your-host/api/metrics
    - `FRONTEND_URL`
    - `BACKEND_URL`
    - `VITE_API_BASE_URL`
+   - `MAPBOX_ACCESS_TOKEN`
    - `REDIS_URL`
    - `IMAGE_STORAGE_PROVIDER`
    - `S3_ENDPOINT`

frontend/src/App.tsx

@@ -1310,6 +1310,18 @@ const formatBirdTimelineGraphTitle = (event: BirdTimelineGraphEvent) =>
 
 const formatBirdTimelineGraphMeta = (event: BirdTimelineGraphEvent) => formatShortDate(getBirdTimelineGraphEventDate(event));
 
+const getBirdTimelineGraphIconX = (x: number, textAnchor: string) => {
+  if (textAnchor === 'start') {
+    return x;
+  }
+
+  if (textAnchor === 'end') {
+    return x - 24;
+  }
+
+  return x - 12;
+};
+
 const getBirdTimelineEventDate = (event: BirdTimelineEvent) => event.eventDate || event.createdAt.slice(0, 10);
 const getBirdTimelineGraphEventDate = (event: BirdTimelineGraphEvent) => event.eventDate || event.createdAt.slice(0, 10);
 
@@ -8142,13 +8154,29 @@ function App() {
 		                                          />
 		                                        )}
 		                                        {timelineEvent.eventType === 'location_updated' ? (
-		                                          <text x={x} y={labelY} textAnchor={textAnchor} className="bird-timeline-graph-event-icon">
-		                                            move
-		                                          </text>
+		                                          <foreignObject
+		                                            x={getBirdTimelineGraphIconX(x, textAnchor)}
+		                                            y={labelY - 18}
+		                                            width="24"
+		                                            height="24"
+		                                            className="bird-timeline-graph-event-icon"
+		                                          >
+		                                            <span className="material-symbols-outlined" aria-label="Move">
+		                                              move
+		                                            </span>
+		                                          </foreignObject>
 		                                        ) : timelineEvent.eventType === 'owner_changed' ? (
-		                                          <text x={x} y={labelY} textAnchor={textAnchor} className="bird-timeline-graph-event-icon">
-		                                            move_location
-		                                          </text>
+		                                          <foreignObject
+		                                            x={getBirdTimelineGraphIconX(x, textAnchor)}
+		                                            y={labelY - 18}
+		                                            width="24"
+		                                            height="24"
+		                                            className="bird-timeline-graph-event-icon"
+		                                          >
+		                                            <span className="material-symbols-outlined" aria-label="Move location">
+		                                              move_location
+		                                            </span>
+		                                          </foreignObject>
 		                                        ) : timelineEvent.eventType === 'hatch_date' ? (
 		                                          <text x={x} y={labelY} textAnchor={textAnchor} className="bird-timeline-graph-label">
 		                                            Hatch date

frontend/src/index.css

@@ -1397,16 +1397,28 @@ textarea {
 }
 
 .bird-timeline-graph-event-icon {
-  fill: #1f1f1f;
+  overflow: visible;
+}
+
+.bird-timeline-graph-event-icon .material-symbols-outlined {
+  align-items: center;
+  color: #1f1f1f;
+  direction: ltr;
+  display: inline-flex;
   font-family: "Material Symbols Outlined";
-  font-size: 18px;
+  font-size: 22px;
   font-style: normal;
   font-weight: 400;
   font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
   font-feature-settings: "liga";
   -webkit-font-feature-settings: "liga";
+  height: 24px;
+  justify-content: center;
   letter-spacing: 0;
+  line-height: 1;
   text-transform: none;
+  white-space: nowrap;
+  width: 24px;
 }
 
 .bird-timeline-graph-hatch-dot {