feat(xo-6): update table container

vatesfr · Dec 11, 2024 · b8b60a4 · b8b60a4
1 parent c670c8a
commit b8b60a4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git 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
@@ -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;