fix(web): prevent table overflow issue causing hidden actions column

web/package/agama-web-ui.changes

@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Mon Feb 24 12:44:15 UTC 2025 - David Diaz <dgonzalez@suse.com>
+
+- Prevented table overflow to avoid hiding the actions column
+  (gh#agama-project/agama#2044).
+
 -------------------------------------------------------------------
 Mon Feb 24 08:50:54 UTC 2025 - Ancor Gonzalez Sosa <ancor@suse.com>
 

web/src/components/network/ConnectionsTable.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2023-2024] SUSE LLC
+ * Copyright (c) [2023-2025] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -30,13 +30,29 @@ import { NETWORK as PATHS } from "~/routes/paths";
 import { formatIp } from "~/utils/network";
 import { sprintf } from "sprintf-js";
 import { _ } from "~/i18n";
+import { Stack, StackItem } from "@patternfly/react-core";
 
 type ConnectionsTableProps = {
   connections: Connection[];
   devices: Device[];
   onForget?: (connection: Connection) => void;
 };
 
+const IPAddresses = ({ devices, connection }: { devices: Device[]; connection: Connection }) => {
+  const device = devices.find(
+    ({ connection: deviceConnectionId }) => deviceConnectionId === connection.id,
+  );
+  const addresses = device ? device.addresses : connection.addresses;
+
+  return (
+    <Stack>
+      {addresses.map((address, index) => (
+        <StackItem key={index}>{formatIp(address)}</StackItem>
+      ))}
+    </Stack>
+  );
+};
+
 /**
  *
  * Displays given connections in a table
@@ -50,14 +66,6 @@ const ConnectionsTable = ({
   const navigate = useNavigate();
   if (connections.length === 0) return null;
 
-  const connectionDevice = ({ id }) => devices.find(({ connection }) => id === connection);
-  const connectionAddresses = (connection: Connection) => {
-    const device = connectionDevice(connection);
-    const addresses = device ? device.addresses : connection.addresses;
-
-    return addresses?.map(formatIp).join(", ");
-  };
-
   return (
     <Table variant="compact">
       <Thead>
@@ -93,7 +101,9 @@ const ConnectionsTable = ({
           return (
             <Tr key={connection.id}>
               <Td dataLabel={_("Name")}>{connection.id}</Td>
-              <Td dataLabel={_("IP addresses")}>{connectionAddresses(connection)}</Td>
+              <Td dataLabel={_("IP addresses")} modifier="breakWord">
+                <IPAddresses devices={devices} connection={connection} />
+              </Td>
               <Td isActionCell>
                 <RowActions
                   id={`actions-for-connection-${connection.id}`}

web/src/components/storage/iscsi/InitiatorPresenter.tsx

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2023] SUSE LLC
+ * Copyright (c) [2023-2025] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -51,7 +51,9 @@ export default function InitiatorPresenter({ initiator }) {
   const Content = () => {
     return (
       <Tr>
-        <Td dataLabel={_("Name")}>{initiator.name}</Td>
+        <Td dataLabel={_("Name")} modifier="breakWord">
+          {initiator.name}
+        </Td>
         {/* TRANSLATORS: usually just keep the original text */}
         {/* iBFT = iSCSI Boot Firmware Table, HW support for booting from iSCSI */}
         <Td dataLabel={_("iBFT")}>{initiator.ibft ? _("Yes") : _("No")}</Td>
@@ -70,7 +72,7 @@ export default function InitiatorPresenter({ initiator }) {
           <Tr>
             <Th width={50}>{_("Name")}</Th>
             <Th>{_("iBFT")}</Th>
-            <Th>{_("Offload card")}</Th>
+            <Th modifier="nowrap">{_("Offload card")}</Th>
             <Th />
           </Tr>
         </Thead>