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,7 +36,9 @@ export function NetDHCPHostReservations(p: {
 
   return (
     <>
+      <Grid container>
         {p.dhcp.hosts.map((h, num) => (
+          <Grid key={num} sm={12} md={6} item style={{ padding: "10px" }}>
             <HostReservationWidget
               key={num}
               {...p}
@@ -48,8 +51,9 @@ export function NetDHCPHostReservations(p: {
                 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}