diff --git a/web/src/assets/styles/blocks.scss b/web/src/assets/styles/blocks.scss index effe852e42..43b336bf31 100644 --- a/web/src/assets/styles/blocks.scss +++ b/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 { diff --git a/web/src/components/storage/ProposalPage.test.jsx b/web/src/components/storage/ProposalPage.test.jsx index 3ab0ea09ec..7bd4f44a31 100644 --- a/web/src/components/storage/ProposalPage.test.jsx +++ b/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: { diff --git a/web/src/components/storage/ProposalResultSection.jsx b/web/src/components/storage/ProposalResultSection.jsx index fd07fc41eb..5def2aecb9 100644 --- a/web/src/components/storage/ProposalResultSection.jsx +++ b/web/src/components/storage/ProposalResultSection.jsx @@ -66,7 +66,7 @@ const DeletionsInfo = ({ actions, systems }) => { condition={systems.length > 0} then={

- {_("Including the deletion of")} {systems.join(", ")} + {_("Affecting %s")} {systems.join(", ")}

} /> @@ -160,7 +160,11 @@ const DevicesTreeTable = ({ devicesManager }) => { return ( - {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))) + } ); }; @@ -180,7 +184,7 @@ const DevicesTreeTable = ({ devicesManager }) => {