Make DHCP hosts reservation be full width

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