fix(xo6): add separator between label and hint in table actions (#10143)

@xen-orchestra/web-core/lib/assets/css/base.pcss

@@ -90,3 +90,8 @@ pre {
     --scrollbar-border: 0.2rem;
   }
 }
+
+.em-dash-prefix::before {
+  content: '\2014'; /* em dash — */
+  margin-inline-end: 0.8rem;
+}

@xen-orchestra/web-core/lib/components/menu/VtsActionsMenu.vue

@@ -22,7 +22,7 @@
         :on-click="action.onClick"
       >
         {{ action.label }}
-        <i v-if="action.hint">{{ action.hint }}</i>
+        <i v-if="action.hint" class="em-dash-prefix">{{ action.hint }}</i>
         <template v-if="isGroupAction(action)" #submenu>
           <MenuItem
             v-for="(child, childIndex) of action.children"
@@ -33,7 +33,7 @@
             :on-click="child.onClick"
           >
             {{ child.label }}
-            <i v-if="child.hint">{{ child.hint }}</i>
+            <i v-if="child.hint" class="em-dash-prefix">{{ child.hint }}</i>
           </MenuItem>
         </template>
       </MenuItem>

@xen-orchestra/web/src/modules/traffic-rules/components/form/new/NewTrafficRuleForm.vue

@@ -31,7 +31,7 @@
             <span class="option-content">
               <VtsIcon v-if="option.properties.icon" :name="option.properties.icon" size="medium" />
               {{ option.properties.label }}
-              <span v-if="option.properties.disabled" class="no-vif typo-body-regular-small">{{
+              <span v-if="option.properties.disabled" class="em-dash-prefix typo-body-regular-small">{{
                 t('no-vif-detected')
               }}</span>
             </span>
@@ -112,13 +112,6 @@ async function onSubmit() {
   display: inline-flex;
   align-items: center;
   gap: 0.8rem;
-
-  .no-vif {
-    &::before {
-      content: '\2014';
-      margin-inline-end: 0.8rem;
-    }
-  }
 }
 
 .new-traffic-rule-form {

@xen-orchestra/web/src/modules/vm/components/actions/reboot/VmRebootButton.vue

@@ -1,7 +1,7 @@
 <template>
   <MenuItem v-if="canDisplay" :disabled="!canReboot" icon="action:reboot" :busy="isRunning" @click="openModal()">
     {{ t('action:reboot') }}
-    <i v-if="!canReboot">{{ t('vm-tools-missing') }}</i>
+    <i v-if="!canReboot" class="em-dash-prefix">{{ t('vm-tools-missing') }}</i>
   </MenuItem>
 </template>
 

@xen-orchestra/web/src/modules/vm/components/actions/shutdown/VmShutdownButton.vue

@@ -1,7 +1,7 @@
 <template>
   <MenuItem v-if="canDisplay" :disabled="!canShutdown" icon="action:shutdown" :busy="isRunning" @click="openModal()">
     {{ t('action:shutdown') }}
-    <i v-if="!canShutdown" class="typo">{{ t('vm-tools-missing') }}</i>
+    <i v-if="!canShutdown" class="em-dash-prefix">{{ t('vm-tools-missing') }}</i>
   </MenuItem>
 </template>
 

@xen-orchestra/web/src/modules/vm/components/actions/suspend/VmSuspendButton.vue

@@ -1,7 +1,7 @@
 <template>
   <MenuItem v-if="canDisplay" :disabled="!canSuspend" icon="fa:moon" :busy="isRunning" @click="openModal()">
     {{ t('action:suspend') }}
-    <i v-if="!canSuspend">{{ t('vm-tools-missing') }}</i>
+    <i v-if="!canSuspend" class="em-dash-prefix">{{ t('vm-tools-missing') }}</i>
   </MenuItem>
 </template>