Fix vertical spacing in nested CmkList

We handle margins in CmkListItem via a css variant. These variants were
also being applied to nested CmkListItem even if they shouldn't have
that variant. This is due to VueJS allowing scoped descendant rules to
break out of scope for recursive components.

cmklist
   cmklistitem - has `only` class
       cmklist
          cmklistitem - thinks it's the `only` variant

Reference (second bullet point)
https://vuejs.org/api/sfc-css-features.html#scoped-style-tips

Visible in quick setup step 2 -> host filter on multiple tags.

Change-Id: Ib3552c426a59c9ceedf219cf031e62de228b5d0a

packages/cmk-frontend-vue/src/components/CmkList/CmkListItem.vue

@@ -84,34 +84,34 @@ const { buttonPadding = '16px' } = defineProps<{
     padding-top: calc(var(--spacing) - var(--button-padding-top));
     padding-left: v-bind(buttonPadding);
   }
-}
 
-.cmk-list-item--first {
-  .cmk-list-item__button-container {
-    padding-top: var(--button-padding-top);
-  }
+  &.cmk-list-item--first {
+    > .cmk-list-item__button-container {
+      padding-top: var(--button-padding-top);
+    }
 
-  .cmk-list-item__content {
-    padding-top: 0;
+    > .cmk-list-item__content {
+      padding-top: 0;
+    }
   }
-}
 
-.cmk-list-item--last {
-  .cmk-list-item__button-container,
-  .cmk-list-item__content {
-    padding-bottom: 0;
+  &.cmk-list-item--last {
+    > .cmk-list-item__button-container,
+    > .cmk-list-item__content {
+      padding-bottom: 0;
+    }
   }
-}
 
-.cmk-list-item--only {
-  .cmk-list-item__button-container {
-    padding-top: var(--button-padding-top);
-    padding-bottom: var(--button-padding-top);
-  }
+  &.cmk-list-item--only {
+    > .cmk-list-item__button-container {
+      padding-top: var(--button-padding-top);
+      padding-bottom: var(--button-padding-top);
+    }
 
-  .cmk-list-item__content {
-    padding-top: 0;
-    padding-bottom: 0;
+    > .cmk-list-item__content {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
   }
 }
 </style>