frontend: fix health body-battery activity bands not rendering (inline ReferenceArea so recharts recognizes them)

frontend/src/pages/HealthPage.jsx

@@ -199,30 +199,6 @@ function ActivityRefLabel({ viewBox, icon }) {
 // *below* the battery bars (the negative Y region) so they don't obscure the data.
 const ACTIVITY_BAND_BOTTOM = -18
 
-function ActivityBands({ activities, nearestT, sportColor, sportIcon }) {
-  return (activities || []).map(a => {
-    const start = new Date(a.start_time).getTime()
-    const end = a.duration_s ? start + a.duration_s * 1000 : start
-    const x1 = nearestT(start), x2 = nearestT(end)
-    if (x1 == null || x2 == null) return null
-    const color = sportColor(a.sport_type)
-    return (
-      <ReferenceArea
-        key={`area-${a.id}`}
-        x1={x1}
-        x2={x2}
-        y1={0}
-        y2={ACTIVITY_BAND_BOTTOM}
-        fill={color}
-        fillOpacity={0.9}
-        stroke={color}
-        strokeOpacity={1}
-        label={<ActivityRefLabel icon={sportIcon(a.sport_type)} />}
-      />
-    )
-  })
-}
-
 function BodyBatteryChart({ bb, hiresValues, sleepStart, sleepEnd, activities }) {
   if (!bb) return null
   const { charged, drained, start_level, end_level } = bb
@@ -292,7 +268,18 @@ function BodyBatteryChart({ bb, hiresValues, sleepStart, sleepEnd, activities })
                 <Cell key={i} fill={BB_INFERRED_COLOR[d.type]} />
               ))}
             </Bar>
-            <ActivityBands activities={activities} nearestT={nearestT} sportColor={sportColor} sportIcon={sportIcon} />
+            {(activities || []).map(a => {
+              const start = new Date(a.start_time).getTime()
+              const end = a.duration_s ? start + a.duration_s * 1000 : start
+              const x1 = nearestT(start), x2 = nearestT(end)
+              if (x1 == null || x2 == null) return null
+              const color = sportColor(a.sport_type)
+              return (
+                <ReferenceArea key={`area-${a.id}`} x1={x1} x2={x2} y1={0} y2={ACTIVITY_BAND_BOTTOM}
+                  fill={color} fillOpacity={0.9} stroke={color} strokeOpacity={1}
+                  label={<ActivityRefLabel icon={sportIcon(a.sport_type)} />} />
+              )
+            })}
           </BarChart>
         </ResponsiveContainer>
       </div>