diff --git a/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/components/InvoicingPeriodObjectTree.vue b/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/components/InvoicingPeriodObjectTree.vue index 2f7150f1..d9e921f1 100644 --- a/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/components/InvoicingPeriodObjectTree.vue +++ b/src/views/dashboards/superUserDashboard/InvoicingBillingPeriod/components/InvoicingPeriodObjectTree.vue @@ -3055,6 +3055,14 @@ const nodeActionWheelProps = (node: TreeNode) => { padding: 0.16rem 0.32rem; } +.invoice-period-tree-node-field.is-composite { + gap: 0.18rem; + grid-template-rows: auto auto; + min-height: 0; + padding-bottom: 0.28rem; + padding-top: 0.22rem; +} + .invoice-period-tree-node-field.is-empty { background: #fbfcfe; border-color: #edf1f6; @@ -3091,6 +3099,10 @@ const nodeActionWheelProps = (node: TreeNode) => { .invoice-period-tree-node-field { grid-column: auto !important; } + + .invoice-period-tree-node-field.is-composite { + grid-column: 1 / -1 !important; + } } @container (max-width: 24rem) { @@ -3138,17 +3150,17 @@ const nodeActionWheelProps = (node: TreeNode) => { .invoice-period-tree-node-field__lines { display: grid; - gap: 0.12rem; + gap: 0.18rem; min-width: 0; } .invoice-period-tree-node-field__line { - align-items: baseline; + align-items: start; display: grid; font-size: 0.74rem; gap: 0.3rem; - grid-template-columns: 2.8rem minmax(0, 1fr); - line-height: 1.15; + grid-template-columns: minmax(3rem, max-content) minmax(0, 1fr); + line-height: 1.25; min-width: 0; } @@ -3156,9 +3168,16 @@ const nodeActionWheelProps = (node: TreeNode) => { color: #7a8492; font-size: 0.64rem; font-weight: 700; + line-height: 1.25; white-space: nowrap; } +.invoice-period-tree-node-field__line > span:last-child { + min-width: 0; + overflow-wrap: anywhere; + white-space: normal; +} + .invoice-period-tree-node-field__line :deep(.hover-illustration) { overflow-wrap: anywhere; white-space: normal; diff --git a/tests/unit/superuser-invoices-view.spec.js b/tests/unit/superuser-invoices-view.spec.js index 25183147..67906cae 100644 --- a/tests/unit/superuser-invoices-view.spec.js +++ b/tests/unit/superuser-invoices-view.spec.js @@ -670,6 +670,17 @@ describe("Periode tab contract", () => { expect(periodObjectTreeSource).toContain("`invoice-period-tree-actions-dropdown-${group.type}`"); }); + it("keeps registration labels and values from overlapping in compact invoice rows", () => { + expect(periodObjectTreeSource).toContain('key: "registrations"'); + expect(periodObjectTreeSource).toContain('class="invoice-period-tree-node-field__line-label"'); + expect(periodObjectTreeSource).toContain(".invoice-period-tree-node-field.is-composite"); + expect(periodObjectTreeSource).toContain("grid-template-rows: auto auto;"); + expect(periodObjectTreeSource).toContain("grid-template-columns: minmax(3rem, max-content) minmax(0, 1fr);"); + expect(periodObjectTreeSource).toContain("grid-column: 1 / -1 !important;"); + expect(periodObjectTreeSource).toContain(".invoice-period-tree-node-field__line > span:last-child"); + expect(periodObjectTreeSource).toContain("overflow-wrap: anywhere;"); + }); + it("exposes object-specific lazy child categories and multi-select operations", () => { [ "COLLECTION_ORDERS", diff --git a/visual-previews/workboard-4505b9ab-registration-overlap/desktop-after.png b/visual-previews/workboard-4505b9ab-registration-overlap/desktop-after.png new file mode 100644 index 00000000..4f7580e8 Binary files /dev/null and b/visual-previews/workboard-4505b9ab-registration-overlap/desktop-after.png differ diff --git a/visual-previews/workboard-4505b9ab-registration-overlap/desktop-before.png b/visual-previews/workboard-4505b9ab-registration-overlap/desktop-before.png new file mode 100644 index 00000000..55a37ceb Binary files /dev/null and b/visual-previews/workboard-4505b9ab-registration-overlap/desktop-before.png differ diff --git a/visual-previews/workboard-4505b9ab-registration-overlap/mobile-after.png b/visual-previews/workboard-4505b9ab-registration-overlap/mobile-after.png new file mode 100644 index 00000000..d6279ac0 Binary files /dev/null and b/visual-previews/workboard-4505b9ab-registration-overlap/mobile-after.png differ diff --git a/visual-previews/workboard-4505b9ab-registration-overlap/mobile-before.png b/visual-previews/workboard-4505b9ab-registration-overlap/mobile-before.png new file mode 100644 index 00000000..9bd16ed3 Binary files /dev/null and b/visual-previews/workboard-4505b9ab-registration-overlap/mobile-before.png differ diff --git a/visual-previews/workboard-4505b9ab-registration-overlap/tablet-after.png b/visual-previews/workboard-4505b9ab-registration-overlap/tablet-after.png new file mode 100644 index 00000000..b4609e7d Binary files /dev/null and b/visual-previews/workboard-4505b9ab-registration-overlap/tablet-after.png differ diff --git a/visual-previews/workboard-4505b9ab-registration-overlap/tablet-before.png b/visual-previews/workboard-4505b9ab-registration-overlap/tablet-before.png new file mode 100644 index 00000000..d9c431f4 Binary files /dev/null and b/visual-previews/workboard-4505b9ab-registration-overlap/tablet-before.png differ