web: Fixes and adjustments

web/src/assets/styles/blocks.scss

@@ -426,15 +426,58 @@ ul[data-type="agama/list"][role="grid"] {
 
 table[data-type="agama/tree-table"] {
   th:first-child {
-    width: 1%;
+    block-size: fit-content;
     padding-inline-end: var(--spacer-normal);
   }
 
+  th.fit-content {
+    block-size: fit-content;
+    overflow: visible;
+    text-overflow: unset;
+  }
+
+  /**
+   * Temporary PF/Table overrides for small devices
+   **/
   @media (width <= 768px) {
-    td:empty,
-    td div:empty {
+    &.pf-m-tree-view-grid-md.pf-v5-c-table tr[aria-level="1"] td {
+      padding-inline-start: var(--spacer-medium);
+    }
+
+    &.pf-m-tree-view-grid-md.pf-v5-c-table tr[aria-level="2"] th {
+      padding-inline-start: calc(var(--spacer-large) * 1.1);
+    }
+
+    &.pf-m-tree-view-grid-md.pf-v5-c-table tr[aria-level="2"] td {
+      padding-inline-start: calc(var(--spacer-large) * 1.4);
+    }
+
+    &.pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-tree-view-details-expanded {
+      padding-block-end: var(--spacer-smaller);
+    }
+
+    &.pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr) td:empty,
+    &.pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr) td *:empty,
+    &.pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr) td:has(> *:empty) {
       display: none;
     }
+
+    &.pf-m-tree-view-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr) td:has(> *:not(:empty)) {
+      display: inherit;
+    }
+
+    &.pf-m-tree-view-grid-md.pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) tr:where(.pf-v5-c-table__tr)::before {
+      inset-inline-start: 0;
+    }
+
+    &.pf-v5-c-table.pf-m-compact tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) > *:last-child {
+      padding-inline-end: 8px;
+    }
+
+    tbody th:first-child {
+      font-size: var(--fs-large);
+      padding-block-start: var(--spacer-small);
+    }
   }
 }
 
@@ -451,45 +494,51 @@ table.proposal-result {
 
   }
 
-  /** Temporary hack because the collapse/expand callback was not given to the
-   * tree table **/
-th button {
-  background: red;
-  display: none;
-}
+  /**
+   * Temporary hack because the collapse/expand callback was not given to the
+   * tree table
+   **/
+  th button {
+    display: none;
+  }
 
-tbody th .pf-v5-c-table__tree-view-main {
-  padding-inline-start: var(--spacer-normal);
-  flex-direction: row-reverse;
-  cursor: auto;
-}
-/** End of temporary hack */
+  tbody th .pf-v5-c-table__tree-view-main {
+    padding-inline-start: var(--pf-v5-c-table--m-compact--cell--first-last-child--PaddingLeft);
+    cursor: auto;
+  }
 
-@media (width > 768px) {
-  th.details-column {
-    padding-inline-start: calc(60px + var(--spacer-smaller) * 2);
+  tbody tr[aria-level="2"] th .pf-v5-c-table__tree-view-main {
+    padding-inline-start: calc(
+       var(--pf-v5-c-table--m-compact--cell--first-last-child--PaddingLeft) + var(--spacer-large)
+    );
   }
+  /** End of temporary hack */
 
-  td.details-column {
-    display: grid;
-    gap: var(--spacer-smaller);
-    grid-template-columns: 60px 1fr;
+  @media (width > 768px) {
+    th.details-column {
+      padding-inline-start: calc(60px + var(--spacer-smaller) * 2);
+    }
 
-    :first-child {
-      text-align: end;
+    td.details-column {
+      display: grid;
+      gap: var(--spacer-smaller);
+      grid-template-columns: 60px 1fr;
+
+      :first-child {
+        text-align: end;
+      }
     }
-  }
 
-  th.sizes-column,
-  td.sizes-column {
-    text-align: end;
+    th.sizes-column,
+    td.sizes-column {
+      text-align: end;
 
-    div.split {
-      justify-content: flex-end;
+      div.split {
+        justify-content: flex-end;
+      }
     }
   }
 }
-}
 
 // compact lists in popover
 .pf-v5-c-popover li + li {

web/src/components/storage/ProposalPage.test.jsx

@@ -76,7 +76,6 @@ const vdb = {
   size: 1e+6
 };
 
-// FIXME: needed to be reviewed/adapted after latest changes
 const storageMock = {
   probe: jest.fn().mockResolvedValue(0),
   proposal: {

web/src/components/storage/ProposalResultSection.jsx

@@ -66,7 +66,7 @@ const DeletionsInfo = ({ actions, systems }) => {
         condition={systems.length > 0}
         then={
           <p>
-            {_("Including the deletion of")} <strong>{systems.join(", ")}</strong>
+            {_("Affecting %s")} <strong>{systems.join(", ")}</strong>
           </p>
         }
       />
@@ -160,7 +160,11 @@ const DevicesTreeTable = ({ devicesManager }) => {
 
     return (
       <Tag variant="orange">
-        {sprintf(_("Resized %s"), deviceSize(devicesManager.shrinkSize(item)))}
+        {
+          // TRANSLATORS: a label to show how much a device was resized. %s will be
+          // replaced with such a size, including the unit. E.g., 508 MiB
+          sprintf(_("Resized %s"), deviceSize(devicesManager.shrinkSize(item)))
+        }
       </Tag>
     );
   };
@@ -180,7 +184,7 @@ const DevicesTreeTable = ({ devicesManager }) => {
     <TreeTable
       columns={[
         { title: _("Device"), content: renderDeviceName },
-        { title: _("Mount Point"), content: renderMountPoint },
+        { title: _("Mount Point"), content: renderMountPoint, classNames: "fit-content" },
         { title: _("Details"), content: renderDetails, classNames: "details-column" },
         { title: _("Size"), content: renderSize, classNames: "sizes-column" }
       ]}
@@ -253,18 +257,20 @@ export default function ProposalResultSection({
   isLoading = false
 }) {
   if (isLoading) errors = [];
+  const totalActions = actions.length;
 
-  const description = sprintf(
-    // TRANSLATORS: %d will be replaced by the amount actions
-    _("During installation, %d actions will be performed to configure the system as displayed below"),
-    actions.length
-  );
+  // TRANSLATORS: The description for the Result section in storage proposal
+  // page. %d will be replaced by the number of proposal actions.
+  const description = sprintf(n_(
+    "During installation, %d action will be performed to configure the system as displayed below",
+    "During installation, %d actions will be performed to configure the system as displayed below",
+    totalActions
+  ), totalActions);
 
   return (
     <Section
       // TRANSLATORS: The storage "Result" section's title
       title={_("Result")}
-      // TRANSLATORS: The storage "Result" section's description
       description={!isLoading && errors.length === 0 && description}
       id="storage-result"
       errors={errors}