Make DHCP hosts reservation be full width

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

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>
       )}

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}