Fix Superuser invoicing registration field layout (#236)

## Summary
- Fixes Superuser invoicing period object-tree registration rows so
`reg_1`, `reg_2`, and `reg_3` labels/values no longer overlap in compact
rows.
- Lets composite registration fields auto-size, wraps long plate values
safely, and spans the full compact grid width on small containers.
- Adds a focused source-level regression contract and committed visual
before/after previews.

## Tests
- `npm run test:unit:single --
tests/unit/superuser-invoices-view.spec.js`
- `npm run build`

## Visual change previews

### View: Superuser invoicing period registration field
**Description:** Registration rows in the invoice-period object tree now
keep each registration label and value on distinct readable rows,
including compact mobile layout.

#### Mobile (390x844)
**Before:**
![Before mobile registration
overlap](https://raw.githubusercontent.com/copenhagentruckwash/pleno-vue/6a733a0023430929a3c130191c8015694f951a86/visual-previews/workboard-4505b9ab-registration-overlap/mobile-before.png)

**After:**
![After mobile registration
layout](https://raw.githubusercontent.com/copenhagentruckwash/pleno-vue/6a733a0023430929a3c130191c8015694f951a86/visual-previews/workboard-4505b9ab-registration-overlap/mobile-after.png)

#### Tablet (768x1024)
**Before:**
![Before tablet registration
overlap](https://raw.githubusercontent.com/copenhagentruckwash/pleno-vue/6a733a0023430929a3c130191c8015694f951a86/visual-previews/workboard-4505b9ab-registration-overlap/tablet-before.png)

**After:**
![After tablet registration
layout](https://raw.githubusercontent.com/copenhagentruckwash/pleno-vue/6a733a0023430929a3c130191c8015694f951a86/visual-previews/workboard-4505b9ab-registration-overlap/tablet-after.png)

#### Desktop (1440x900)
**Before:**
![Before desktop registration
overlap](https://raw.githubusercontent.com/copenhagentruckwash/pleno-vue/6a733a0023430929a3c130191c8015694f951a86/visual-previews/workboard-4505b9ab-registration-overlap/desktop-before.png)

**After:**
![After desktop registration
layout](https://raw.githubusercontent.com/copenhagentruckwash/pleno-vue/6a733a0023430929a3c130191c8015694f951a86/visual-previews/workboard-4505b9ab-registration-overlap/desktop-after.png)

Co-authored-by: Jeppe Bundgaard <jb@truckwash.dk>

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);
+  grid-template-columns: minmax(3rem, max-content) minmax(0, 1fr);
-  line-height: 1.15;
+  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;

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",