From 71e22bc32882cdc9ba095044b702b9b209855ce0 Mon Sep 17 00:00:00 2001
From: Pierre HUBERT <pierre.git@communiquons.org>
Date: Tue, 9 Jan 2024 18:28:26 +0100
Subject: [PATCH] Make DHCP hosts reservation be full width

---
 .../src/widgets/forms/EditSection.tsx         |  8 +++--
 .../widgets/forms/NetDHCPHostReservations.tsx | 34 +++++++++++--------
 .../src/widgets/net/NetworkDetails.tsx        |  2 +-
 3 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/virtweb_frontend/src/widgets/forms/EditSection.tsx b/virtweb_frontend/src/widgets/forms/EditSection.tsx
index 03ead13..b8a7d31 100644
--- a/virtweb_frontend/src/widgets/forms/EditSection.tsx
+++ b/virtweb_frontend/src/widgets/forms/EditSection.tsx
@@ -2,10 +2,14 @@ import { Grid, Paper, Typography } from "@mui/material";
 import React, { PropsWithChildren } from "react";
 
 export function EditSection(
-  p: { title?: string; actions?: React.ReactElement } & PropsWithChildren
+  p: {
+    title?: string;
+    actions?: React.ReactElement;
+    fullWidth?: boolean;
+  } & PropsWithChildren
 ): React.ReactElement {
   return (
-    <Grid item sm={12} md={6}>
+    <Grid item sm={12} md={p.fullWidth ? 12 : 6}>
       <Paper style={{ margin: "10px", padding: "10px" }}>
         {(p.title || p.actions) && (
           <span
diff --git a/virtweb_frontend/src/widgets/forms/NetDHCPHostReservations.tsx b/virtweb_frontend/src/widgets/forms/NetDHCPHostReservations.tsx
index d2749cc..ba0bb37 100644
--- a/virtweb_frontend/src/widgets/forms/NetDHCPHostReservations.tsx
+++ b/virtweb_frontend/src/widgets/forms/NetDHCPHostReservations.tsx
@@ -4,6 +4,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import {
   Avatar,
   Button,
+  Grid,
   IconButton,
   ListItem,
   ListItemAvatar,
@@ -35,21 +36,24 @@ export function NetDHCPHostReservations(p: {
 
   return (
     <>
-      {p.dhcp.hosts.map((h, num) => (
-        <HostReservationWidget
-          key={num}
-          {...p}
-          onChange={() => {
-            p.onChange?.(p.dhcp);
-          }}
-          host={h}
-          onRemove={() => {
-            p.dhcp.hosts.splice(num, 1);
-            p.onChange?.(p.dhcp);
-          }}
-        />
-      ))}
-
+      <Grid container>
+        {p.dhcp.hosts.map((h, num) => (
+          <Grid key={num} sm={12} md={6} item style={{ padding: "10px" }}>
+            <HostReservationWidget
+              key={num}
+              {...p}
+              onChange={() => {
+                p.onChange?.(p.dhcp);
+              }}
+              host={h}
+              onRemove={() => {
+                p.dhcp.hosts.splice(num, 1);
+                p.onChange?.(p.dhcp);
+              }}
+            />
+          </Grid>
+        ))}
+      </Grid>
       {p.editable && (
         <Button onClick={addHost}>Add new host reservation</Button>
       )}
diff --git a/virtweb_frontend/src/widgets/net/NetworkDetails.tsx b/virtweb_frontend/src/widgets/net/NetworkDetails.tsx
index 531fd6e..10fa087 100644
--- a/virtweb_frontend/src/widgets/net/NetworkDetails.tsx
+++ b/virtweb_frontend/src/widgets/net/NetworkDetails.tsx
@@ -373,7 +373,7 @@ function IPSection(p: {
       )}
 
       {p.config?.dhcp && (p.editable || p.config.dhcp.hosts.length > 0) && (
-        <EditSection title="DHCP hosts reservations">
+        <EditSection title="DHCP hosts reservations" fullWidth>
           <NetDHCPHostReservations
             {...p}
             dhcp={p.config.dhcp}