Improve ISO list route UI

virtweb_frontend/src/dialogs/IsoCatalogDialog.tsx

@@ -1,5 +1,4 @@
 import {
-  Avatar,
   Button,
   Dialog,
   DialogActions,
@@ -27,7 +26,7 @@ export function IsoCatalogDialog(p: {
 
   return (
     <Dialog open={p.open} onClose={p.onClose}>
-      <DialogTitle>Iso catalog</DialogTitle>
+      <DialogTitle>ISO catalog</DialogTitle>
       <DialogContent>
         <AsyncWidget
           loadKey={1}
@@ -52,12 +51,13 @@ export function IsoCatalogDialogInner(p: {
     <List dense>
       {p.catalog.map((entry) => (
         <a
+          key={entry.name}
           href={entry.url}
           target="_blank"
           rel="noopener"
           style={{ color: "inherit", textDecoration: "none" }}
         >
-          <ListItem key={entry.name}>
+          <ListItem>
             <ListItemButton>
               <ListItemAvatar>
                 <img

virtweb_frontend/src/routes/IsoFilesRoute.tsx

@@ -1,5 +1,7 @@
 import DeleteIcon from "@mui/icons-material/Delete";
 import DownloadIcon from "@mui/icons-material/Download";
+import MenuBookIcon from "@mui/icons-material/MenuBook";
+import RefreshIcon from "@mui/icons-material/Refresh";
 import {
   Alert,
   Button,
@@ -15,6 +17,7 @@ import { filesize } from "filesize";
 import React from "react";
 import { IsoFile, IsoFilesApi } from "../api/IsoFilesApi";
 import { ServerApi } from "../api/ServerApi";
+import { IsoCatalogDialog } from "../dialogs/IsoCatalogDialog";
 import { useAlert } from "../hooks/providers/AlertDialogProvider";
 import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
 import { useLoadingMessage } from "../hooks/providers/LoadingMessageProvider";
@@ -24,8 +27,6 @@ import { AsyncWidget } from "../widgets/AsyncWidget";
 import { FileInput } from "../widgets/forms/FileInput";
 import { VirtWebPaper } from "../widgets/VirtWebPaper";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
-import MenuBookIcon from "@mui/icons-material/MenuBook";
-import { IsoCatalogDialog } from "../dialogs/IsoCatalogDialog";
 
 export function IsoFilesRoute(): React.ReactElement {
   const [list, setList] = React.useState<IsoFile[] | undefined>();
@@ -53,11 +54,18 @@ export function IsoFilesRoute(): React.ReactElement {
           <VirtWebRouteContainer
             label="ISO files management"
             actions={
-              <Tooltip title="Open the ISO catalog">
+              <span>
-                <IconButton onClick={() => setIsoCatalog(true)}>
+                <Tooltip title="Open the ISO catalog">
-                  <MenuBookIcon />
+                  <IconButton onClick={() => { setIsoCatalog(true); }}>
-                </IconButton>
+                    <MenuBookIcon />
-              </Tooltip>
+                  </IconButton>
+                </Tooltip>
+                <Tooltip title="Refresh ISO list">
+                  <IconButton onClick={reload}>
+                    <RefreshIcon />
+                  </IconButton>
+                </Tooltip>
+              </span>
             }
           >
             <UploadIsoFileCard onFileUploaded={reload} />
@@ -68,7 +76,7 @@ export function IsoFilesRoute(): React.ReactElement {
       />
       <IsoCatalogDialog
         open={isoCatalog}
-        onClose={() => setIsoCatalog(false)}
+        onClose={() => { setIsoCatalog(false); }}
       />
     </>
   );
@@ -122,7 +130,7 @@ function UploadIsoFileCard(p: {
 
   if (uploadProgress !== null) {
     return (
-      <VirtWebPaper label="File upload">
+      <VirtWebPaper label="File upload" noHorizontalMargin>
         <Typography variant="body1">
           Upload in progress ({Math.floor(uploadProgress * 100)}%)...
         </Typography>
@@ -132,7 +140,7 @@ function UploadIsoFileCard(p: {
   }
 
   return (
-    <VirtWebPaper label="File upload">
+    <VirtWebPaper label="File upload" noHorizontalMargin>
       <div style={{ display: "flex", alignItems: "center" }}>
         <FileInput
           value={value}
@@ -180,7 +188,7 @@ function UploadIsoFileFromUrlCard(p: {
   };
 
   return (
-    <VirtWebPaper label="File upload from URL">
+    <VirtWebPaper label="File upload from URL" noHorizontalMargin>
       <div style={{ display: "flex", alignItems: "center" }}>
         <TextField
           label="URL"
@@ -297,38 +305,31 @@ function IsoFilesList(p: {
 
   return (
     <>
-      <VirtWebPaper label="Files list">
+      {/* Download notification */}
-        {/* Download notification */}
+      {dlProgress !== undefined && (
-        {dlProgress !== undefined && (
+        <Alert severity="info">
-          <Alert severity="info">
+          <div
-            <div
+            style={{
-              style={{
+              display: "flex",
-                display: "flex",
+              flexDirection: "row",
-                flexDirection: "row",
+              alignItems: "center",
-                alignItems: "center",
+              overflow: "hidden",
-                overflow: "hidden",
+            }}
-              }}
+          >
-            >
+            <Typography variant="body1">
-              <Typography variant="body1">
+              Downloading... {dlProgress}%
-                Downloading... {dlProgress}%
+            </Typography>
-              </Typography>
+            <CircularProgress
-              <CircularProgress
+              variant="determinate"
-                variant="determinate"
+              size={"1.5rem"}
-                size={"1.5rem"}
+              style={{ marginLeft: "10px" }}
-                style={{ marginLeft: "10px" }}
+              value={dlProgress}
-                value={dlProgress}
+            />
-              />
+          </div>
-            </div>
+        </Alert>
-          </Alert>
+      )}
-        )}
+      {/* ISO files list table */}
-
+      <DataGrid getRowId={(c) => c.filename} rows={p.list} columns={columns} />
-        {/* Files list table */}
-        <DataGrid
-          getRowId={(c) => c.filename}
-          rows={p.list}
-          columns={columns}
-        />
-      </VirtWebPaper>
     </>
   );
 }

virtweb_frontend/src/widgets/BaseAuthenticatedPage.tsx

@@ -13,7 +13,7 @@ import {
   List,
   ListItemButton,
   ListItemIcon,
-  ListItemText
+  ListItemText,
 } from "@mui/material";
 import { Outlet, useLocation } from "react-router-dom";
 import { RouterLink } from "./RouterLink";
@@ -82,7 +82,15 @@ export function BaseAuthenticatedPage(): React.ReactElement {
             icon={<Icon path={mdiInformation} size={1} />}
           />
         </List>
-        <div style={{ flex: 1 }}>
+        <div
+          style={{
+            flexGrow: 1,
+            flexShrink: 0,
+            flexBasis: 0,
+            minWidth: 0,
+            display: "flex",
+          }}
+        >
           <Outlet />
         </div>
       </Box>

virtweb_frontend/src/widgets/VirtWebPaper.tsx

@@ -2,10 +2,19 @@ import { Paper, Typography } from "@mui/material";
 import React, { PropsWithChildren } from "react";
 
 export function VirtWebPaper(
-  p: { label: string | React.ReactElement } & PropsWithChildren
+  p: {
+    label: string | React.ReactElement;
+    noHorizontalMargin?: boolean;
+  } & PropsWithChildren
 ): React.ReactElement {
   return (
-    <Paper elevation={2} style={{ padding: "10px", margin: "20px" }}>
+    <Paper
+      elevation={2}
+      style={{
+        padding: "10px",
+        margin: p.noHorizontalMargin ? "20px 0px" : "20px",
+      }}
+    >
       <Typography
         variant="subtitle1"
         style={{ marginBottom: "10px", fontWeight: "bold" }}

virtweb_frontend/src/widgets/VirtWebRouteContainer.tsx

@@ -8,7 +8,18 @@ export function VirtWebRouteContainer(
   } & PropsWithChildren
 ): React.ReactElement {
   return (
-    <div style={{ margin: "50px" }}>
+    <div
+      style={{
+        margin: "50px",
+        flex: "1",
+        flexGrow: 1,
+        flexShrink: 0,
+        flexBasis: 0,
+        minWidth: 0,
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
       <div
         style={{
           display: "flex",