fix(health-details): separate depth (recursion guard) from index (row alternation)

index + 1 was passed to all siblings, giving every child the same index and
therefore the same background colour. Introduced a separate 'depth' prop for
the recursion guard (depth < 10) and pass ':index="idx"' to children so each
sibling gets its own position-based index, producing correct even/odd alternation
at every level of the health component tree.

Author: SteKoe

spring-boot-admin-server-ui/src/main/frontend/views/instances/details/health-details.vue

@@ -96,12 +96,13 @@
       </dl>
     </dd>
   </dl>
-  <template v-if="index < 10">
+  <template v-if="depth < 10">
     <health-details
       v-for="(child, idx) in childHealth"
       :key="`${child.name}_${idx}`"
       :instance="instance"
-      :index="index + 1"
+      :index="idx"
+      :depth="depth + 1"
       :name="child.name"
       :health="child.value"
     />
@@ -124,12 +125,15 @@ import autolink from '@/utils/autolink';
 const { t } = useI18n();
 const id = useId();
 
-const { health, name, instance, index = 0 } = defineProps<{
+const { health, name, instance, index = 0, depth = 0 } = defineProps<{
   instance: Instance;
   name: string;
   health: Record<string, any>;
+  /** Row position within siblings — drives even/odd background alternation. */
   index?: number;
-}>();
+  /** Recursion depth — used to prevent infinite nesting. */
+  depth?: number;
+}>(); 
 
 // Sanitised name safe for use in HTML id attributes
 const safeNameId = computed(() => (name ?? '').replace(/[^a-zA-Z0-9_-]/g, '_'));