fix(xo-lite/dashboard): add min-width to hosts patches container (#8108)

Set a minimum width for the "Patches" and "Status" cards to align with the design system and allocate enough space for displaying data when it is being loaded.

@xen-orchestra/lite/CHANGELOG.md

@@ -1,5 +1,9 @@
 # ChangeLog
 
+## **next**
+
+- [Pool/Dashboard] `Patches` and `Status` cards are displayed with a greater minimum width (PR [#8108](https://github.com/vatesfr/xen-orchestra/pull/8108))
+
 ## **0.5.0** (2024-10-31)
 
 - Handle IPv6 hosts (PR [#8044](https://github.com/vatesfr/xen-orchestra/pull/8044))

@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardHostsPatches.vue

@@ -1,5 +1,5 @@
 <template>
-  <UiCard>
+  <UiCard class="pool-dashboard-hosts-patches">
     <UiCardTitle class="patches-title">
       {{ $t('patches') }}
       <template v-if="areAllLoaded && count > 0" #right>
@@ -30,6 +30,10 @@ const { count, patches, areSomeLoaded, areAllLoaded } = useHostPatches(hosts)
 </script>
 
 <style lang="postcss" scoped>
+.pool-dashboard-hosts-patches {
+  min-width: 43.8rem;
+}
+
 .patches-title {
   --section-title-right-color: var(--color-danger-txt-base);
 }

@xen-orchestra/lite/src/components/pool/dashboard/PoolDashboardStatus.vue

@@ -1,5 +1,5 @@
 <template>
-  <UiCard :color="hasError ? 'error' : undefined">
+  <UiCard class="pool-dashboard-status" :color="hasError ? 'error' : undefined">
     <UiCardTitle>{{ $t('status') }}</UiCardTitle>
     <NoDataError v-if="hasError" />
     <UiCardSpinner v-else-if="!isReady" />
@@ -54,3 +54,9 @@ const totalVmsCount = computed(() => vms.value.length)
 
 const activeVmsCount = computed(() => vms.value.filter(vm => vm.power_state === 'Running').length)
 </script>
+
+<style lang="postcss" scoped>
+.pool-dashboard-status {
+  min-width: 32rem;
+}
+</style>