fix: prevent VM detail page hang when static IP assigned (#1072)

Make syncStaticIpAnnotations idempotent so it no longer mutates VM
annotations when already in sync, breaking a reactive update loop that
froze the browser on the VM detail page. Also stack multiple IP
addresses vertically in the IP Address column.

Signed-off-by: Andy Lee <andy.lee@suse.com>

pkg/harvester/formatters/HarvesterIpAddress.vue

@@ -132,16 +132,28 @@ export default {
 </script>
 
 <template>
-  <div v-if="showIP">
-    <span
+  <div
+    v-if="showIP"
+    class="ip-list"
+  >
+    <div
       v-for="{ ip, name, isCustom } in ips"
       :key="`${ip}-${name}`"
+      class="ip-item"
     >
       <CopyToClipboardText
         v-clean-tooltip="isCustom ? t('harvester.formatters.harvesterIpAddress.customIpTooltip') : name"
         :text="ip"
         :plain="isCustom"
       />
-    </span>
+    </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.ip-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+</style>

pkg/harvester/mixins/harvester-vm/index.js

@@ -791,18 +791,41 @@ export default {
       }
 
       const staticIpPrefix = `${ HCI_ANNOTATIONS.STATIC_IP }/`;
+      const annotations = vm.metadata.annotations;
 
-      Object.keys(vm.metadata.annotations).forEach((key) => {
-        if (key.startsWith(staticIpPrefix)) {
-          delete vm.metadata.annotations[key];
-        }
-      });
+      const desired = {};
 
       this.networkRows.forEach((row) => {
         if (row.name && row.staticIp) {
-          vm.metadata.annotations[`${ staticIpPrefix }${ row.name }`] = row.staticIp;
+          desired[`${ staticIpPrefix }${ row.name }`] = row.staticIp;
         }
       });
+
+      const current = {};
+
+      Object.keys(annotations).forEach((key) => {
+        if (key.startsWith(staticIpPrefix)) {
+          current[key] = annotations[key];
+        }
+      });
+
+      // Skip mutation when already in sync to avoid triggering a reactive update loop.
+      const desiredKeys = Object.keys(desired);
+      const currentKeys = Object.keys(current);
+      const isSame = desiredKeys.length === currentKeys.length &&
+        desiredKeys.every((key) => current[key] === desired[key]);
+
+      if (isSame) {
+        return;
+      }
+
+      currentKeys.forEach((key) => {
+        delete annotations[key];
+      });
+
+      Object.entries(desired).forEach(([key, value]) => {
+        annotations[key] = value;
+      });
     },
 
     setCPUAndMemory() {