From 0138398168007c5ae433fec5f67f49f9490359c7 Mon Sep 17 00:00:00 2001
From: Joris-k <joris.kosacki@vates.tech>
Date: Tue, 3 Dec 2024 14:07:36 +0100
Subject: [PATCH] feat(xo-lite): adding pif status component, some improvement
 and css

---
 .../network/PoolHostInternalNetworkTable.vue  | 184 +++++++++-------
 .../pool/network/PoolNetworksPifStatus.vue    |  24 +++
 .../pool/network/PoolNetworksTable.vue        | 203 ++++++++++--------
 @xen-orchestra/lite/src/locales/en.json       |   3 +-
 @xen-orchestra/lite/src/locales/fr.json       |   3 +-
 .../lite/src/stores/xen-api/network.store.ts  |   2 +-
 .../lite/src/views/pool/PoolNetworkView.vue   |  28 ++-
 .../lib/components/ui/info/UiInfo.vue         |   1 -
 .../lib/components/ui/input/UiInput.vue       |   1 +
 9 files changed, 272 insertions(+), 177 deletions(-)
 create mode 100644 @xen-orchestra/lite/src/components/pool/network/PoolNetworksPifStatus.vue

diff --git a/@xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworkTable.vue b/@xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworkTable.vue
index e90f35af179..b8b508aace6 100644
--- a/@xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworkTable.vue
+++ b/@xen-orchestra/lite/src/components/pool/network/PoolHostInternalNetworkTable.vue
@@ -1,73 +1,81 @@
 <template>
-  <UiTitle>
-    {{ $t('host-internal-network') }}
-    <template #actions>
-      <UiButton :left-icon="faPlus" variant="secondary" accent="info" size="medium">{{ $t('new') }}</UiButton>
-    </template>
-  </UiTitle>
-  <UiQuerySearchBar class="table-query" @search="(value: string) => (searchQuery = value)" />
-  <UiTableActions title="Table actions">
-    <UiButton :left-icon="faEdit" variant="tertiary" accent="info" size="medium">{{ $t('edit') }}</UiButton>
-    <UiButton :left-icon="faTrash" variant="tertiary" accent="danger" size="medium">{{ $t('delete') }}</UiButton>
-  </UiTableActions>
-  <div>
-    <UiTopBottomTable
-      :selected-items="selected.length"
-      :total-items="usableRefs.length"
-      @toggle-select-all="toggleSelect"
-    />
-    <VtsTable>
-      <thead>
-        <tr>
-          <template v-for="column of visibleColumns" :key="column.id">
-            <th v-if="column.id === 'checkbox'" class="checkbox">
-              <UiCheckbox :v-model="areAllSelected" accent="info" @update:model-value="toggleSelect" />
-            </th>
-            <th v-else-if="column.id === 'more'" class="more">
-              <UiButtonIcon size="small" accent="info" :icon="getHeaderIcon(column.id)" />
-              {{ column.label }}
-            </th>
-            <ColumnTitle v-else id="networks" :icon="getHeaderIcon(column.id)"> {{ column.label }}</ColumnTitle>
-          </template>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="row of rows" :key="row.id">
-          <td v-for="column of row.visibleColumns" :key="column.id" class="typo p2-regular">
-            <UiCheckbox v-if="column.id === 'checkbox'" v-model="selected" accent="info" :value="row.id" />
-            <!--             NEED TO REMOVE `as XenApiNetwork` -->
-            <div
-              v-if="column.id === 'name_label' && (row.value as XenApiNetwork).name_label"
-              v-tooltip="{ placement: 'bottom-end' }"
-              class="text-ellipsis"
-            >
-              {{ (row.value as XenApiNetwork).name_label }}
-            </div>
-            <div v-if="column.id === 'name_description'" v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
-              {{ (row.value as XenApiNetwork).name_description }}
-            </div>
-            <div v-if="column.id === 'MTU'" v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
-              {{ (row.value as XenApiNetwork).MTU }}
-            </div>
-            <div
-              v-if="column.id === 'default_locking_mode'"
-              v-tooltip="{ placement: 'bottom-end' }"
-              class="text-ellipsis"
-            >
-              {{ (row.value as XenApiNetwork).default_locking_mode }}
-            </div>
-            <div v-if="column.id === 'more'">
-              <VtsIcon accent="info" :icon="faEllipsis" />
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </VtsTable>
-    <UiTopBottomTable
-      :selected-items="selected.length"
-      :total-items="usableRefs.length"
-      @toggle-select-all="toggleSelect"
-    />
+  <div class="container">
+    <UiTitle>
+      {{ $t('host-internal-networks') }}
+      <template #actions>
+        <UiButton :left-icon="faPlus" variant="secondary" accent="info" size="medium">{{ $t('new') }}</UiButton>
+      </template>
+    </UiTitle>
+    <div class="content">
+      <UiQuerySearchBar class="table-query" @search="(value: string) => (searchQuery = value)" />
+      <UiTableActions title="Table actions">
+        <UiButton :left-icon="faEdit" variant="tertiary" accent="info" size="medium">{{ $t('edit') }}</UiButton>
+        <UiButton :left-icon="faTrash" variant="tertiary" accent="danger" size="medium">{{ $t('delete') }}</UiButton>
+      </UiTableActions>
+      <UiTopBottomTable
+        :selected-items="selected.length"
+        :total-items="usableRefs.length"
+        @toggle-select-all="toggleSelect"
+      />
+      <div class="table">
+        <VtsTable vertical-border>
+          <thead>
+            <tr>
+              <template v-for="column of visibleColumns" :key="column.id">
+                <th v-if="column.id === 'checkbox'" class="checkbox">
+                  <UiCheckbox :v-model="areAllSelected" accent="info" @update:model-value="toggleSelect" />
+                </th>
+                <th v-else-if="column.id === 'more'" class="more">
+                  <UiButtonIcon size="small" accent="info" :icon="getHeaderIcon(column.id)" />
+                  {{ column.label }}
+                </th>
+                <ColumnTitle v-else id="networks" :icon="getHeaderIcon(column.id)"> {{ column.label }}</ColumnTitle>
+              </template>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row of rows" :key="row.id">
+              <td v-for="column of row.visibleColumns" :key="column.id" class="typo p2-regular">
+                <UiCheckbox v-if="column.id === 'checkbox'" v-model="selected" accent="info" :value="row.id" />
+                <!--             NEED TO REMOVE `as XenApiNetwork` -->
+                <div
+                  v-if="column.id === 'name_label' && (row.value as XenApiNetwork).name_label"
+                  v-tooltip="{ placement: 'bottom-end' }"
+                  class="text-ellipsis"
+                >
+                  {{ (row.value as XenApiNetwork).name_label }}
+                </div>
+                <div
+                  v-if="column.id === 'name_description'"
+                  v-tooltip="{ placement: 'bottom-end' }"
+                  class="text-ellipsis"
+                >
+                  {{ (row.value as XenApiNetwork).name_description }}
+                </div>
+                <div v-if="column.id === 'MTU'" v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
+                  {{ (row.value as XenApiNetwork).MTU }}
+                </div>
+                <div
+                  v-if="column.id === 'default_locking_mode'"
+                  v-tooltip="{ placement: 'bottom-end' }"
+                  class="text-ellipsis"
+                >
+                  {{ (row.value as XenApiNetwork).default_locking_mode }}
+                </div>
+                <div v-if="column.id === 'more'">
+                  <VtsIcon accent="info" :icon="faEllipsis" />
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </VtsTable>
+      </div>
+      <UiTopBottomTable
+        :selected-items="selected.length"
+        :total-items="usableRefs.length"
+        @toggle-select-all="toggleSelect"
+      />
+    </div>
   </div>
   <UiCardSpinner v-if="!isReady" />
 </template>
@@ -138,6 +146,7 @@ const { visibleColumns, rows } = useTable('networks', filteredNetworks, {
 })
 
 type networkHeader = 'name_label' | 'name_description' | 'MTU' | 'default_locking_mode' | 'more'
+
 const headerIcon: Record<networkHeader, { icon: IconDefinition }> = {
   name_label: { icon: faAlignLeft },
   name_description: { icon: faAlignLeft },
@@ -145,6 +154,7 @@ const headerIcon: Record<networkHeader, { icon: IconDefinition }> = {
   default_locking_mode: { icon: faCaretDown },
   more: { icon: faEllipsis },
 }
+
 const getHeaderIcon = (status: networkHeader) => headerIcon[status].icon
 
 watchEffect(() => {
@@ -155,8 +165,38 @@ watchEffect(() => {
 </script>
 
 <style scoped lang="postcss">
-.checkbox,
-.more {
-  width: 4.8rem;
+.container,
+.content {
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  gap: 2.4rem;
+
+  .content {
+    gap: 0.8rem;
+
+    .table {
+      overflow-x: auto;
+
+      tr:last-child {
+        border-bottom: 1px solid var(--color-neutral-border);
+      }
+    }
+
+    .checkbox,
+    .more {
+      width: 4.8rem;
+    }
+  }
+
+  @media (max-width: 1440px) {
+    .table {
+      table {
+        width: 160rem;
+      }
+    }
+  }
 }
 </style>
diff --git a/@xen-orchestra/lite/src/components/pool/network/PoolNetworksPifStatus.vue b/@xen-orchestra/lite/src/components/pool/network/PoolNetworksPifStatus.vue
new file mode 100644
index 00000000000..e26d69e5dd8
--- /dev/null
+++ b/@xen-orchestra/lite/src/components/pool/network/PoolNetworksPifStatus.vue
@@ -0,0 +1,24 @@
+<template>
+  <UiInfo class="text-ellipsis" :accent="statusProps.accent">
+    <span class="text-ellipsis">{{ statusProps.text }}</span>
+  </UiInfo>
+</template>
+
+<script setup lang="ts">
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
+import { computed } from 'vue'
+
+const { pif } = defineProps<{
+  pif: { status: 'connected' | 'disconnected' | 'partially_connected' }
+}>()
+
+type NetworkAccent = 'success' | 'warning' | 'danger'
+
+const statusMap: Record<string, { text: string; accent: NetworkAccent }> = {
+  connected: { text: 'Connected', accent: 'success' },
+  disconnected: { text: 'Disconnected', accent: 'danger' },
+  partially_connected: { text: 'Partially Connected', accent: 'warning' },
+}
+
+const statusProps = computed(() => statusMap[pif.status])
+</script>
diff --git a/@xen-orchestra/lite/src/components/pool/network/PoolNetworksTable.vue b/@xen-orchestra/lite/src/components/pool/network/PoolNetworksTable.vue
index ed11ae771d1..6b7982f903a 100644
--- a/@xen-orchestra/lite/src/components/pool/network/PoolNetworksTable.vue
+++ b/@xen-orchestra/lite/src/components/pool/network/PoolNetworksTable.vue
@@ -1,90 +1,94 @@
 <template>
-  <UiTitle>
-    {{ $t('network') }}
-    <template #actions>
-      <UiButton :left-icon="faPlus" variant="secondary" accent="info" size="medium">{{ $t('new') }}</UiButton>
-    </template>
-  </UiTitle>
-  <UiQuerySearchBar class="table-query" @search="(value: string) => (searchQuery = value)" />
-  <UiTableActions title="Table actions">
-    <UiButton :left-icon="faEdit" variant="tertiary" accent="info" size="medium">{{ $t('edit') }}</UiButton>
-    <UiButton :left-icon="faCopy" variant="tertiary" accent="info" size="medium">{{ $t('copy-info-json') }}</UiButton>
-    <UiButton :left-icon="faTrash" variant="tertiary" accent="danger" size="medium">{{ $t('delete') }}</UiButton>
-  </UiTableActions>
-  <div>
-    <UiTopBottomTable
-      :selected-items="selected.length"
-      :total-items="usableRefs.length"
-      @toggle-select-all="toggleSelect"
-    />
-    <VtsTable>
-      <thead>
-        <tr>
-          <template v-for="column of visibleColumns" :key="column.id">
-            <th v-if="column.id === 'checkbox'" class="checkbox">
-              <UiCheckbox :v-model="areAllSelected" accent="info" @update:model-value="toggleSelect" />
-            </th>
-            <th v-else-if="column.id === 'more'" class="more">
-              <UiButtonIcon size="small" accent="info" :icon="getHeaderIcon(column.id)" />
-              {{ column.label }}
-            </th>
-            <ColumnTitle v-else id="networks" :icon="getHeaderIcon(column.id)"> {{ column.label }}</ColumnTitle>
-          </template>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="row of rows" :key="row.id">
-          <td v-for="column of row.visibleColumns" :key="column.id" class="typo p2-regular">
-            <div>
-              <UiCheckbox v-if="column.id === 'checkbox'" v-model="selected" accent="info" :value="row.id" />
-            </div>
-            <!--             NEED TO REMOVE `as any` -->
-            <div v-if="column.id === 'name_label'" v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
-              {{ (row.value as any).network.name_label }}
-            </div>
-            <div v-if="column.id === 'name_description'" v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
-              {{ (row.value as any).network.name_description }}
-            </div>
-            <div v-if="column.id === 'status'" class="status">
-              <!-- <PifsStatus :pif="row.value" /> -->
-              <UiInfo v-if="(row.value as any).status === 'connected'" accent="success">
-                {{ (row.value as any).status }}
-              </UiInfo>
-              <UiInfo v-else-if="(row.value as any).status === 'disconnected'" accent="danger">
-                {{ (row.value as any).status }}
-              </UiInfo>
-              <UiInfo v-else accent="warning"> {{ (row.value as any).status }}</UiInfo>
-            </div>
-            <div v-if="column.id === 'vlan'" v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
-              {{ (row.value as any).vlan }}
-            </div>
-            <div v-if="column.id === 'MTU'" v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
-              {{ (row.value as any).network.MTU }}
-            </div>
-            <div
-              v-if="column.id === 'default_locking_mode'"
-              v-tooltip="{ placement: 'bottom-end' }"
-              class="text-ellipsis"
-            >
-              {{ (row.value as any).network.default_locking_mode }}
-            </div>
-            <div v-if="column.id === 'more'">
-              <VtsIcon accent="info" :icon="faEllipsis" />
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </VtsTable>
-    <UiTopBottomTable
-      :selected-items="selected.length"
-      :total-items="usableRefs.length"
-      @toggle-select-all="toggleSelect"
-    />
+  <div class="container">
+    <UiTitle>
+      {{ $t('networks') }}
+      <template #actions>
+        <UiButton :left-icon="faPlus" variant="secondary" accent="info" size="medium">{{ $t('new') }}</UiButton>
+      </template>
+    </UiTitle>
+    <div class="content">
+      <UiQuerySearchBar class="table-query" @search="(value: string) => (searchQuery = value)" />
+      <UiTableActions title="Table actions">
+        <UiButton :left-icon="faEdit" variant="tertiary" accent="info" size="medium">{{ $t('edit') }}</UiButton>
+        <UiButton :left-icon="faCopy" variant="tertiary" accent="info" size="medium">
+          {{ $t('copy-info-json') }}
+        </UiButton>
+        <UiButton :left-icon="faTrash" variant="tertiary" accent="danger" size="medium">{{ $t('delete') }}</UiButton>
+      </UiTableActions>
+      <UiTopBottomTable
+        :selected-items="selected.length"
+        :total-items="usableRefs.length"
+        @toggle-select-all="toggleSelect"
+      />
+      <div class="table">
+        <VtsTable vertical-border>
+          <thead>
+            <tr>
+              <template v-for="column of visibleColumns" :key="column.id">
+                <th v-if="column.id === 'checkbox'" class="checkbox">
+                  <UiCheckbox :v-model="areAllSelected" accent="info" @update:model-value="toggleSelect" />
+                </th>
+                <th v-else-if="column.id === 'more'" class="more">
+                  <UiButtonIcon size="small" accent="info" :icon="getHeaderIcon(column.id)" />
+                  {{ column.label }}
+                </th>
+                <ColumnTitle v-else id="networks" :icon="getHeaderIcon(column.id)"> {{ column.label }}</ColumnTitle>
+              </template>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row of rows" :key="row.id">
+              <td v-for="column of row.visibleColumns" :key="column.id" class="typo p2-regular">
+                <div>
+                  <UiCheckbox v-if="column.id === 'checkbox'" v-model="selected" accent="info" :value="row.id" />
+                </div>
+                <!--             NEED TO REMOVE `as any` -->
+                <div v-if="column.id === 'name_label'" v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
+                  {{ (row.value as any).network.name_label }}
+                </div>
+                <div
+                  v-if="column.id === 'name_description'"
+                  v-tooltip="{ placement: 'bottom-end' }"
+                  class="text-ellipsis"
+                >
+                  {{ (row.value as any).network.name_description }}
+                </div>
+                <div v-if="column.id === 'status'" class="status">
+                  <PoolNetworksPifStatus :pif="row.value" />
+                </div>
+                <div v-if="column.id === 'vlan'" v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
+                  {{ (row.value as any).vlan }}
+                </div>
+                <div v-if="column.id === 'MTU'" v-tooltip="{ placement: 'bottom-end' }" class="text-ellipsis">
+                  {{ (row.value as any).network.MTU }}
+                </div>
+                <div
+                  v-if="column.id === 'default_locking_mode'"
+                  v-tooltip="{ placement: 'bottom-end' }"
+                  class="text-ellipsis"
+                >
+                  {{ (row.value as any).network.default_locking_mode }}
+                </div>
+                <div v-if="column.id === 'more'">
+                  <VtsIcon accent="info" :icon="faEllipsis" />
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </VtsTable>
+      </div>
+      <UiTopBottomTable
+        :selected-items="selected.length"
+        :total-items="usableRefs.length"
+        @toggle-select-all="toggleSelect"
+      />
+    </div>
   </div>
   <UiCardSpinner v-if="!isReady" />
 </template>
 
 <script setup lang="ts">
+import PoolNetworksPifStatus from '@/components/pool/network/PoolNetworksPifStatus.vue'
 import UiCardSpinner from '@/components/ui/UiCardSpinner.vue'
 import useMultiSelect from '@/composables/multi-select.composable'
 import type { XenApiNetwork } from '@/libs/xen-api/xen-api.types'
@@ -94,7 +98,6 @@ import VtsTable from '@core/components/table/VtsTable.vue'
 import UiButton from '@core/components/ui/button/UiButton.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
-import UiInfo from '@core/components/ui/info/UiInfo.vue'
 import UiQuerySearchBar from '@core/components/ui/query-search-bar/UiQuerySearchBar.vue'
 import UiTableActions from '@core/components/ui/table-actions/UiTableActions.vue'
 import UiTitle from '@core/components/ui/title/UiTitle.vue'
@@ -190,8 +193,38 @@ watchEffect(() => {
 </script>
 
 <style scoped lang="postcss">
-.checkbox,
-.more {
-  width: 4.8rem;
+.container,
+.content {
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  gap: 2.4rem;
+
+  .content {
+    gap: 0.8rem;
+
+    .table {
+      overflow-x: auto;
+
+      tr:last-child {
+        border-bottom: 1px solid var(--color-neutral-border);
+      }
+    }
+
+    .checkbox,
+    .more {
+      width: 4.8rem;
+    }
+  }
+
+  @media (max-width: 1440px) {
+    .table {
+      table {
+        width: 160rem;
+      }
+    }
+  }
 }
 </style>
diff --git a/@xen-orchestra/lite/src/locales/en.json b/@xen-orchestra/lite/src/locales/en.json
index 74c0713d4d9..637bd240df8 100644
--- a/@xen-orchestra/lite/src/locales/en.json
+++ b/@xen-orchestra/lite/src/locales/en.json
@@ -99,7 +99,7 @@
   "here": "Here",
   "host.active": "Active",
   "host.inactive": "Inactive",
-  "host-internal-network": "Host internal network",
+  "host-internal-networks": "Host internal networks",
   "invalid-field": "Invalid field",
 
   "job.vm-copy.bad-power-state": "VM must be halted",
@@ -178,6 +178,7 @@
   "n-missing": "{n} missing",
   "name": "Name",
   "netmask": "Netmask",
+  "networks": "Networks",
   "network-download": "Download",
   "network-throughput": "Network throughput",
   "network-upload": "Upload",
diff --git a/@xen-orchestra/lite/src/locales/fr.json b/@xen-orchestra/lite/src/locales/fr.json
index b1355bc6332..bec38f35785 100644
--- a/@xen-orchestra/lite/src/locales/fr.json
+++ b/@xen-orchestra/lite/src/locales/fr.json
@@ -99,7 +99,7 @@
   "here": "Ici",
   "host.active": "Actif | Actif | Actifs",
   "host.inactive": "Inactif | Inactif | Inactifs",
-  "host-internal-network": "Réseau interne de l'hôte",
+  "host-internal-networks": "Réseaux interne de l'hôte",
   "invalid-field": "Champ invalide",
 
   "job.vm-copy.bad-power-state": "La VM doit être arrêtée",
@@ -178,6 +178,7 @@
   "n-missing": "{n} manquant | {n} manquants",
   "name": "Nom",
   "netmask": "Masque réseau",
+  "networks": "Réseaux",
   "network-download": "Descendant",
   "network-throughput": "Débit du réseau",
   "network-upload": "Montant",
diff --git a/@xen-orchestra/lite/src/stores/xen-api/network.store.ts b/@xen-orchestra/lite/src/stores/xen-api/network.store.ts
index e41119d9a6c..b1d4be5e37c 100644
--- a/@xen-orchestra/lite/src/stores/xen-api/network.store.ts
+++ b/@xen-orchestra/lite/src/stores/xen-api/network.store.ts
@@ -93,7 +93,7 @@ function determineStatus(PIFs: XenApiPif[]): string {
     return 'connected'
   }
   if (currentlyAttached.some(Boolean)) {
-    return 'partially connected'
+    return 'partially_connected'
   }
   return 'disconnected'
 }
diff --git a/@xen-orchestra/lite/src/views/pool/PoolNetworkView.vue b/@xen-orchestra/lite/src/views/pool/PoolNetworkView.vue
index 2d776f8fc92..3c3cb0df877 100644
--- a/@xen-orchestra/lite/src/views/pool/PoolNetworkView.vue
+++ b/@xen-orchestra/lite/src/views/pool/PoolNetworkView.vue
@@ -1,12 +1,10 @@
 <template>
-  <div class="pool-network-view">
-    <UiCard class="card">
-      <div class="networks-content">
-        <PoolNetworksTable :networks="reactiveNetworksWithVLANs" :is-ready />
-        <PoolHostInternalNetworkTable :host-internal-network="reactiveHostInternalNetworks" :is-ready />
-      </div>
-    </UiCard>
-  </div>
+  <UiCard class="pool-network-view">
+    <div class="content">
+      <PoolNetworksTable :networks="reactiveNetworksWithVLANs" :is-ready />
+      <PoolHostInternalNetworkTable :host-internal-network="reactiveHostInternalNetworks" :is-ready />
+    </div>
+  </UiCard>
 </template>
 
 <script lang="ts" setup>
@@ -37,15 +35,13 @@ watchEffect(() => {
 
 <style lang="postcss" scoped>
 .pool-network-view {
-  .card {
-    border: solid 0.1rem var(--color-neutral-border);
-    margin: 0.8rem;
+  border: solid 0.1rem var(--color-neutral-border);
+  margin: 0.8rem;
 
-    .networks-content {
-      display: flex;
-      flex-direction: column;
-      gap: 2.4rem;
-    }
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
   }
 }
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/info/UiInfo.vue b/@xen-orchestra/web-core/lib/components/ui/info/UiInfo.vue
index 1a42b2e673f..4ac9cf557f7 100644
--- a/@xen-orchestra/web-core/lib/components/ui/info/UiInfo.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/info/UiInfo.vue
@@ -42,7 +42,6 @@ const icon = computed(() => iconByAccent[props.accent])
 
 <style lang="postcss" scoped>
 .ui-info {
-  align-items: start;
   display: flex;
   gap: 0.8rem;
 
diff --git a/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
index 03b1c8cb5d5..d72eed42c28 100644
--- a/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
@@ -88,6 +88,7 @@ const id = computed(() => uniqueId('input-'))
 /* IMPLEMENTATION */
 .ui-input {
   position: relative;
+  flex: 1;
 
   .before + .input {
     padding-inline-start: 4.8rem;