From b8b60a4065340f69dc274da7bcd48d58ba8d5b5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Wed, 11 Dec 2024 10:19:36 +0100
Subject: [PATCH] feat(xo-6): update table container

---
 .../web/src/components/pif/PifTable.vue          |  8 --------
 .../web/src/pages/host/[id]/network.vue          | 16 +++++++++++++++-
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/@xen-orchestra/web/src/components/pif/PifTable.vue b/@xen-orchestra/web/src/components/pif/PifTable.vue
index 45375a773fe..44d05d21a2c 100644
--- a/@xen-orchestra/web/src/components/pif/PifTable.vue
+++ b/@xen-orchestra/web/src/components/pif/PifTable.vue
@@ -202,14 +202,6 @@ const selectRow = (rowId: XoPif['id']) => {
 
 <style scoped lang="postcss">
 .pif-table {
-  height: fit-content;
-  padding: 1.6rem;
-  margin: 0.8rem;
-  border: solid 0.1rem var(--color-neutral-border);
-  border-radius: 0.8rem;
-  background-color: var(--color-neutral-background-primary);
-  overflow-x: hidden;
-
   .table-actions {
     margin-top: 2.4rem;
     display: flex;
diff --git a/@xen-orchestra/web/src/pages/host/[id]/network.vue b/@xen-orchestra/web/src/pages/host/[id]/network.vue
index 8b6a0f6e77d..b7b7be8afbb 100644
--- a/@xen-orchestra/web/src/pages/host/[id]/network.vue
+++ b/@xen-orchestra/web/src/pages/host/[id]/network.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="host-network-view">
-    <PifTable :pifs @row-select="selectPif" />
+    <UiCard class="card">
+      <PifTable :pifs @row-select="selectPif" />
+    </UiCard>
+
     <PifPanel v-if="selectedPif" :pif="selectedPif" />
     <UiPanel v-else class="panel">
       <VtsNoSelectionHero type="panel" />
@@ -14,6 +17,7 @@ import PifTable from '@/components/pif/PifTable.vue'
 import { usePifStore } from '@/stores/xo-rest-api/pif.store'
 import type { XoPif } from '@/types/xo/pif.type'
 import VtsNoSelectionHero from '@core/components/state-hero/VtsNoSelectionHero.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
 import UiPanel from '@core/components/ui/panel/UiPanel.vue'
 import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
@@ -35,6 +39,16 @@ const selectPif = (id: XoPif['id']) => {
   display: flex;
   height: 100%;
 
+  .card {
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+    margin: 0.8rem;
+    border: solid 0.1rem var(--color-neutral-border);
+    border-radius: 0.8rem;
+    overflow: hidden;
+  }
+
   .panel {
     width: 40rem;
     border-top: none;