fix(web): more UI adjustments

web/src/SimpleLayout.jsx

@@ -33,7 +33,7 @@ import { _ } from "~/i18n";
  * Simple layout for displaying content that comes before product configuration
  * TODO: improve documentation
  */
-export default function SimpleLayout({ showOutlet = true, children }) {
+export default function SimpleLayout({ showOutlet = true, showInstallerOptions = true, children }) {
   return (
     <Page>
       <Masthead backgroundColor="light200">
@@ -42,7 +42,7 @@ export default function SimpleLayout({ showOutlet = true, children }) {
             <ToolbarContent>
               <ToolbarGroup align={{ default: "alignRight" }}>
                 <ToolbarItem>
-                  <InstallerOptions />
+                  {showInstallerOptions && <InstallerOptions />}
                 </ToolbarItem>
               </ToolbarGroup>
             </ToolbarContent>

web/src/assets/styles/global.scss

@@ -39,6 +39,11 @@ button.pf-m-link {
   }
 }
 
+// Do not reserve space for empty nodes.
+div:empty {
+  display: none;
+}
+
 fieldset {
   padding: var(--fs-base);
   border: 0;

web/src/assets/styles/patternfly-overrides.scss

@@ -309,3 +309,12 @@ table td > .pf-v5-c-empty-state {
     color: white;
   }
 }
+
+// Force sidebar to only use needed width plus an extra padding at the end.
+.pf-v5-c-page__sidebar.pf-m-expanded {
+  --pf-v5-c-page__sidebar--Width: fit-content;
+
+  .pf-v5-c-nav__link {
+    padding-inline-end: calc(var(--pf-v5-global--spacer--xl) * 1.2);
+  }
+}

web/src/components/core/IssuesHint.jsx

@@ -31,7 +31,7 @@ export default function IssuesHint({ issues }) {
       <HintBody>
         <Stack hasGutter>
           <p>
-            {_("Please, pay attention to the following tasks:")}
+            {_("Before starting the installation, you need to address the following problems:")}
           </p>
           <List>
             {issues.map((i, idx) => <ListItem key={idx}>{i.description}</ListItem>)}

web/src/components/layout/Icon.jsx

@@ -84,9 +84,6 @@ import WifiFind from "@icons/wifi_find.svg?component";
 
 import { SiLinux, SiWindows } from "@icons-pack/react-simple-icons";
 
-// Icons from SVG
-import Loading from "./three-dots-loader-icon.svg?component";
-
 /**
  * @typedef {string|number} IconSize
  * @typedef {keyof icons} IconName
@@ -120,7 +117,6 @@ const icons = {
   inventory_2: Inventory,
   keyboard: Keyboard,
   lan: Lan,
-  loading: Loading,
   list_alt: ListAlt,
   lock: Lock,
   manage_accounts: ManageAccounts,

web/src/components/layout/Loading.jsx

@@ -20,24 +20,27 @@
  */
 
 import React from "react";
-import { EmptyState, EmptyStateIcon, EmptyStateHeader } from "@patternfly/react-core";
+import { EmptyState, EmptyStateIcon, EmptyStateHeader, Spinner } from "@patternfly/react-core";
 
+import SimpleLayout from "~/SimpleLayout";
 import { Center, Icon } from "~/components/layout";
 import { _ } from "~/i18n";
 
-const LoadingIcon = () => <Icon name="loading" size="xxxl" />;
+const LoadingIcon = () => <Spinner size="xl" />;
 
 function Loading({ text = _("Loading installation environment, please wait.") }) {
   return (
-    <Center>
-      <EmptyState variant="xl">
-        <EmptyStateHeader
-          titleText={text}
-          headingLevel="h2"
-          icon={<EmptyStateIcon icon={LoadingIcon} />}
-        />
-      </EmptyState>
-    </Center>
+    <SimpleLayout showOutlet={false} showInstallerOptions={false}>
+      <Center>
+        <EmptyState variant="xl">
+          <EmptyStateHeader
+            titleText={text}
+            headingLevel="h1"
+            icon={<EmptyStateIcon icon={LoadingIcon} />}
+          />
+        </EmptyState>
+      </Center>
+    </SimpleLayout>
   );
 }
 

web/src/components/network/AddressesDataList.jsx

@@ -29,7 +29,8 @@ import React from "react";
 import {
   Button,
   DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell, DataListAction,
-  Flex
+  Flex,
+  Stack
 } from "@patternfly/react-core";
 
 import { FormLabel } from "~/components/core";
@@ -115,16 +116,18 @@ export default function AddressesDataList({
   const newAddressButtonText = addresses.length ? _("Add another address") : _("Add an address");
 
   return (
-    <>
+    <Stack hasGutter>
       <Flex justifyContent={{ default: "justifyContentSpaceBetween" }}>
         <FormLabel isRequired={!allowEmpty}>{_("Addresses")}</FormLabel>
-        <Button size="sm" variant="secondary" onClick={addAddress}>
-          {newAddressButtonText}
-        </Button>
       </Flex>
       <DataList isCompact gridBreakpoint="none" title={_("Addresses data list")}>
         {addresses.map(address => renderAddress(address))}
       </DataList>
-    </>
+      <Flex>
+        <Button size="sm" variant="secondary" onClick={addAddress}>
+          {newAddressButtonText}
+        </Button>
+      </Flex>
+    </Stack>
   );
 }

web/src/components/network/DnsDataList.jsx

@@ -29,7 +29,8 @@ import React from "react";
 import {
   Button,
   DataList, DataListItem, DataListItemRow, DataListItemCells, DataListCell, DataListAction,
-  Flex
+  Flex,
+  Stack
 } from "@patternfly/react-core";
 
 import { FormLabel } from "~/components/core";
@@ -92,16 +93,18 @@ export default function DnsDataList({ servers: originalServers, updateDnsServers
   const newDnsButtonText = servers.length ? _("Add another DNS") : _("Add DNS");
 
   return (
-    <>
+    <Stack hasGutter>
       <Flex justifyContent={{ default: "justifyContentSpaceBetween" }}>
         <FormLabel>{_("DNS")}</FormLabel>
+      </Flex>
+      <DataList isCompact title="Addresses data list">
+        {servers.map(server => renderDns(server))}
+      </DataList>
+      <Flex>
         <Button size="sm" variant="secondary" onClick={addServer}>
           {newDnsButtonText}
         </Button>
       </Flex>
-      <DataList isCompact gridBreakpoint="none" title="Addresses data list">
-        {servers.map(server => renderDns(server))}
-      </DataList>
-    </>
+    </Stack>
   );
 }

web/src/components/overview/OverviewPage.jsx

@@ -21,14 +21,11 @@
 
 import React, { useEffect, useState } from "react";
 import {
+  Alert,
   CardBody,
-  Grid,
-  GridItem,
-  Hint,
-  HintBody,
-  List,
-  ListItem,
-  Stack
+  Grid, GridItem,
+  Hint, HintBody,
+  Stack,
 } from "@patternfly/react-core";
 import { useProduct } from "~/context/product";
 import { useInstallerClient } from "~/context/installer";
@@ -52,21 +49,24 @@ const IssuesList = ({ issues }) => {
   Object.entries(scopes).forEach(([scope, issues]) => {
     issues.forEach((issue, idx) => {
       const link = (
-        <ListItem key={idx}>
-          <Link to={`/${scope}`}>{issue.description}</Link>
-        </ListItem>
+        <Alert
+          key={idx}
+          isInline
+          variant={issue.severity === "error" ? "warning" : "info"}
+          title={<Link to={`/${scope}`}>{issue.description}</Link>}
+        />
       );
       list.push(link);
     });
   });
 
   return (
     <EmptyState
-      title={_("Before installing the system, you need to pay attention to the following tasks:")}
+      title={_("Before starting the installation, you need to address the following problems:")}
       icon="error"
       color="danger-color-100"
     >
-      <List isPlain>{list}</List>
+      <Stack hasGutter>{list}</Stack>
     </EmptyState>
   );
 };