@omnitend/dashboard-for-laravel 0.16.3 → 0.17.0

package/resources/js/components/extended/DXForm.vue

@@ -24,99 +24,197 @@
         </DAlert>
 
         <!-- Tabbed layout. BTabs exposes the active *index* via v-model:index
-             (plain v-model is the active tab id), which is what we track. -->
-        <DTabs v-if="hasTabs" v-model:index="activeTab">
-            <DTab
-                v-for="(tab, index) in visibleTabs"
-                :key="tab.key"
-                :title="resolveTabLabel(tab)"
-                :lazy="tab.lazy"
-                :active="index === 0"
-            >
-                <!--
-                  @slot Replaces the entire body of a tab, keyed by tab (slot name `tab-content(<tabKey>)`).
-                  @binding {FormTab} tab The tab definition being rendered.
-                  @binding {object} model Live form data merged with `context`, for predicates.
-                -->
-                <slot
-                    v-if="$slots[`tab-content(${tab.key})`]"
-                    :name="`tab-content(${tab.key})`"
-                    :tab="tab"
-                    :model="model"
-                />
-
-                <div v-else class="pt-3">
+             (plain v-model is the active tab id), which is what we track.
+             `card` needs BOTH: DTabs' own `card` prop (adds `card-header`/
+             `card-body` classes to its nav/content internally) AND an outer
+             `.card` element wrapping it (BVN's `card` prop does not add the
+             outer wrapper itself — the consumer supplies it, per BVN's docs
+             pattern). `no-body` stops DCard from adding its own
+             `.card-body` wrapper — DTabs already provides `.card-header`/
+             `.card-body` internally via its own `card` prop, so wrapping
+             that in another `.card-body` would double up. -->
+        <component :is="card ? DCard : 'div'" v-if="hasTabs" v-bind="card ? { noBody: true } : {}">
+            <DTabs v-model:index="activeTab" :card="card">
+                <DTab
+                    v-for="(tab, index) in visibleTabs"
+                    :key="tab.key"
+                    :title="resolveTabLabel(tab)"
+                    :lazy="tab.lazy"
+                    :active="index === 0"
+                >
                     <!--
-                      @slot Content inserted above a tab's fields, keyed by tab (slot name `tab-before(<tabKey>)`).
+                      @slot Replaces the entire body of a tab, keyed by tab (slot name `tab-content(<tabKey>)`).
                       @binding {FormTab} tab The tab definition being rendered.
                       @binding {object} model Live form data merged with `context`, for predicates.
                     -->
-                    <slot :name="`tab-before(${tab.key})`" :tab="tab" :model="model" />
-
-                    <DXField
-                        v-for="field in visibleFieldsFor(tab)"
-                        :key="field.key"
-                        :field="field"
-                        :form="resolvedForm"
+                    <slot
+                        v-if="$slots[`tab-content(${tab.key})`]"
+                        :name="`tab-content(${tab.key})`"
+                        :tab="tab"
                         :model="model"
-                    >
-                        <template
-                            v-for="(slotName, target) in fieldSlotMap(field.key)"
-                            :key="target"
-                            #[target]="slotProps"
-                        >
-                            <!-- @slot Per-field overrides forwarded to DXField, keyed by field key: `value(<key>)`, `span(<key>)`, `info(<key>)`, `hint(<key>)`, `repeater-row(<key>)`. -->
-                            <slot :name="slotName" v-bind="slotProps" />
+                    />
+
+                    <div v-else class="pt-3">
+                        <!--
+                          @slot Content inserted above a tab's fields, keyed by tab (slot name `tab-before(<tabKey>)`).
+                          @binding {FormTab} tab The tab definition being rendered.
+                          @binding {object} model Live form data merged with `context`, for predicates.
+                        -->
+                        <slot :name="`tab-before(${tab.key})`" :tab="tab" :model="model" />
+
+                        <template v-for="field in visibleFieldsFor(tab)" :key="field.key">
+                            <!--
+                              @slot Fully replaces a field's rendering (including its label), keyed by field key: `field(<key>)`. Unlike `value(<key>)`, bypasses DXField entirely — like `tab-content`, this also supersedes `field-before(<key>)`/`field-after(<key>)` for the same key.
+                              @binding {FieldDefinition} field The field definition being replaced.
+                              @binding {object} model Live form data merged with `context`, for predicates.
+                            -->
+                            <slot
+                                v-if="$slots[`field(${field.key})`]"
+                                :name="`field(${field.key})`"
+                                :field="field"
+                                :model="model"
+                            />
+                            <template v-else>
+                                <!--
+                                  @slot Content inserted directly above a field, keyed by field key: `field-before(<key>)`. Not rendered when `field(<key>)` replaces the same field.
+                                  @binding {FieldDefinition} field The field about to be rendered.
+                                  @binding {object} model Live form data merged with `context`, for predicates.
+                                -->
+                                <slot :name="`field-before(${field.key})`" :field="field" :model="model" />
+
+                                <DXField
+                                    :field="field"
+                                    :form="resolvedForm"
+                                    :model="model"
+                                    :layout="field.layout ?? layout"
+                                    :label-cols="field.labelCols ?? labelCols"
+                                >
+                                    <template
+                                        v-for="(slotName, target) in fieldSlotMap(field.key)"
+                                        :key="target"
+                                        #[target]="slotProps"
+                                    >
+                                        <!-- @slot Per-field overrides forwarded to DXField, keyed by field key: `value(<key>)`, `span(<key>)`, `info(<key>)`, `hint(<key>)`, `repeater-row(<key>)`. -->
+                                        <slot :name="slotName" v-bind="slotProps" />
+                                    </template>
+                                </DXField>
+
+                                <!--
+                                  @slot Content inserted directly below a field, keyed by field key: `field-after(<key>)`. Not rendered when `field(<key>)` replaces the same field.
+                                  @binding {FieldDefinition} field The field that was just rendered.
+                                  @binding {object} model Live form data merged with `context`, for predicates.
+                                -->
+                                <slot :name="`field-after(${field.key})`" :field="field" :model="model" />
+                            </template>
                         </template>
-                    </DXField>
 
+                        <!--
+                          @slot Content inserted below a tab's fields, keyed by tab (slot name `tab-after(<tabKey>)`).
+                          @binding {FormTab} tab The tab definition being rendered.
+                          @binding {object} model Live form data merged with `context`, for predicates.
+                        -->
+                        <slot :name="`tab-after(${tab.key})`" :tab="tab" :model="model" />
+                    </div>
+                </DTab>
+            </DTabs>
+        </component>
+
+        <!-- Flat layout (no tabs). When `card` is set, the fields + submit
+             button + footer render inside a DCard, giving the form a visual
+             boundary (the tabbed case gets this from DTabs' own `card` prop
+             instead, above). -->
+        <template v-if="!hasTabs">
+            <component :is="card ? DCard : 'div'">
+                <template v-for="field in visibleFlatFields" :key="field.key">
                     <!--
-                      @slot Content inserted below a tab's fields, keyed by tab (slot name `tab-after(<tabKey>)`).
-                      @binding {FormTab} tab The tab definition being rendered.
+                      @slot Fully replaces a field's rendering (including its label), keyed by field key: `field(<key>)`. Unlike `value(<key>)`, bypasses DXField entirely — like `tab-content`, this also supersedes `field-before(<key>)`/`field-after(<key>)` for the same key.
+                      @binding {FieldDefinition} field The field definition being replaced.
                       @binding {object} model Live form data merged with `context`, for predicates.
                     -->
-                    <slot :name="`tab-after(${tab.key})`" :tab="tab" :model="model" />
-                </div>
-            </DTab>
-        </DTabs>
+                    <slot
+                        v-if="$slots[`field(${field.key})`]"
+                        :name="`field(${field.key})`"
+                        :field="field"
+                        :model="model"
+                    />
+                    <template v-else>
+                        <!--
+                          @slot Content inserted directly above a field, keyed by field key: `field-before(<key>)`. Not rendered when `field(<key>)` replaces the same field.
+                          @binding {FieldDefinition} field The field about to be rendered.
+                          @binding {object} model Live form data merged with `context`, for predicates.
+                        -->
+                        <slot :name="`field-before(${field.key})`" :field="field" :model="model" />
+
+                        <DXField
+                            :field="field"
+                            :form="resolvedForm"
+                            :model="model"
+                            :layout="field.layout ?? layout"
+                            :label-cols="field.labelCols ?? labelCols"
+                        >
+                            <template
+                                v-for="(slotName, target) in fieldSlotMap(field.key)"
+                                :key="target"
+                                #[target]="slotProps"
+                            >
+                                <!-- @slot Per-field overrides forwarded to DXField, keyed by field key: `value(<key>)`, `span(<key>)`, `info(<key>)`, `hint(<key>)`, `repeater-row(<key>)`. -->
+                                <slot :name="slotName" v-bind="slotProps" />
+                            </template>
+                        </DXField>
+
+                        <!--
+                          @slot Content inserted directly below a field, keyed by field key: `field-after(<key>)`. Not rendered when `field(<key>)` replaces the same field.
+                          @binding {FieldDefinition} field The field that was just rendered.
+                          @binding {object} model Live form data merged with `context`, for predicates.
+                        -->
+                        <slot :name="`field-after(${field.key})`" :field="field" :model="model" />
+                    </template>
+                </template>
 
-        <!-- Flat layout (no tabs) -->
-        <template v-else>
-            <DXField
-                v-for="field in visibleFlatFields"
-                :key="field.key"
-                :field="field"
-                :form="resolvedForm"
-                :model="model"
-            >
-                <template
-                    v-for="(slotName, target) in fieldSlotMap(field.key)"
-                    :key="target"
-                    #[target]="slotProps"
+                <!-- Submit button -->
+                <DButton
+                    v-if="showSubmit"
+                    type="submit"
+                    variant="primary"
+                    :disabled="resolvedForm.processing"
+                    class="w-100 mt-3"
                 >
-                    <!-- @slot Per-field overrides forwarded to DXField, keyed by field key: `value(<key>)`, `span(<key>)`, `info(<key>)`, `hint(<key>)`, `repeater-row(<key>)`. -->
-                    <slot :name="slotName" v-bind="slotProps" />
-                </template>
-            </DXField>
+                    <span v-if="resolvedForm.processing">{{ submitLoadingText }}</span>
+                    <span v-else>{{ submitText }}</span>
+                </DButton>
+
+                <!--
+                  @slot Content rendered below the submit button (e.g. a cancel link or secondary actions).
+                  @binding {UseFormReturn} form The resolved form instance (state, errors, submit helpers).
+                -->
+                <slot name="footer" :form="resolvedForm" />
+            </component>
         </template>
 
-        <!-- Submit button -->
-        <DButton
-            v-if="showSubmit"
-            type="submit"
-            variant="primary"
-            :disabled="resolvedForm.processing"
-            class="w-100 mt-3"
-        >
-            <span v-if="resolvedForm.processing">{{ submitLoadingText }}</span>
-            <span v-else>{{ submitText }}</span>
-        </DButton>
-
-        <!--
-          @slot Content rendered below the submit button (e.g. a cancel link or secondary actions).
-          @binding {UseFormReturn} form The resolved form instance (state, errors, submit helpers).
-        -->
-        <slot name="footer" :form="resolvedForm" />
+        <!-- Tabbed layout: submit button + footer always render as siblings
+             below DTabs (outside the card, when `card` is set) — unlike the
+             flat layout, they aren't pulled inside the card here, since
+             DTabs' own card-body padding belongs to its tab content, not to
+             trailing form-level actions. -->
+        <template v-else>
+            <!-- Submit button -->
+            <DButton
+                v-if="showSubmit"
+                type="submit"
+                variant="primary"
+                :disabled="resolvedForm.processing"
+                class="w-100 mt-3"
+            >
+                <span v-if="resolvedForm.processing">{{ submitLoadingText }}</span>
+                <span v-else>{{ submitText }}</span>
+            </DButton>
+
+            <!--
+              @slot Content rendered below the submit button (e.g. a cancel link or secondary actions).
+              @binding {UseFormReturn} form The resolved form instance (state, errors, submit helpers).
+            -->
+            <slot name="footer" :form="resolvedForm" />
+        </template>
     </BForm>
 </template>
 
@@ -125,12 +223,13 @@ import { computed, watch } from "vue";
 import { BForm } from "bootstrap-vue-next";
 import DAlert from "../base/DAlert.vue";
 import DButton from "../base/DButton.vue";
+import DCard from "../base/DCard.vue";
 import DTabs from "../base/DTabs.vue";
 import DTab from "../base/DTab.vue";
 import DXField from "./DXField.vue";
 import type { UseFormReturn } from "../../composables/useForm";
 import type { DefineFormReturn } from "../../composables/defineForm";
-import type { FieldDefinition, FormTab, MaybeFn } from "../../types";
+import type { FieldDefinition, FormTab, LabelCols, MaybeFn } from "../../types";
 
 interface Props {
     /**
@@ -164,6 +263,29 @@ interface Props {
 
     /** Auto-switch to the first tab containing a validation error. */
     autoErrorTab?: boolean;
+
+    /**
+     * Wrap the form in a card for a visual boundary (mirrors DXTable's
+     * `card` prop). Tabbed forms render the tab nav as a BS5
+     * card-header-tabs instead of double-wrapping. Off by default since
+     * DXForm is commonly embedded in a page card or modal already.
+     */
+    card?: boolean;
+
+    /**
+     * Form-wide field layout: "vertical" (default, label above input) or
+     * "horizontal" (label left, input right). Overridable per-field via
+     * `field.layout`. A field with `span: true` always renders full-width,
+     * regardless of layout.
+     */
+    layout?: "vertical" | "horizontal";
+
+    /**
+     * Label column width for horizontal layout (mirrors BFormGroup's
+     * `labelCols`/`labelCols*` props). Overridable per-field via
+     * `field.labelCols`. Ignored when `layout` is "vertical".
+     */
+    labelCols?: LabelCols;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -171,6 +293,8 @@ const props = withDefaults(defineProps<Props>(), {
     submitLoadingText: "Submitting...",
     showSubmit: true,
     autoErrorTab: true,
+    card: false,
+    layout: "vertical",
 });
 
 const emit = defineEmits<{

package/resources/js/components/extended/DXRepeater.vue

@@ -5,7 +5,157 @@
   field's `minItems`/`maxItems` limits.
 -->
 <template>
-    <div class="dx-repeater">
+    <!-- `repeaterLayout: "table"` is a PREFERENCE, not a guarantee: the table
+         needs real horizontal room for its columns, and the same viewport
+         width can put this repeater in a wide standalone form or a narrow
+         sidebar column — a viewport breakpoint can't tell those apart. A
+         ResizeObserver on THIS OUTER wrapper measures the space actually
+         available and falls back to the cards layout when it's not enough,
+         scaling to this repeater's own column count (see
+         `neededTableWidth`/`showTable` below). This outer wrapper is never
+         hidden (an element measures 0×0 once `display:none`, which would
+         leave a hidden table with no way to detect regained space and
+         un-hide itself) — but its two children below ARE mutually exclusive
+         via `v-if`/`v-else`, not `v-show`: only ever ONE of table/cards is
+         actually mounted, so a field with side effects (e.g. an async
+         `optionsLoader`) doesn't run twice forever just because table mode
+         is configured. -->
+    <div v-if="wantsTableLayout" ref="containerRef" class="dx-repeater-container">
+        <div v-if="showTable" class="dx-repeater-table-wrapper">
+            <table class="dx-repeater-table table">
+                <thead>
+                    <tr>
+                        <th v-for="subField in subFields" :key="subField.key">
+                            {{ headerLabel(subField) }}
+                        </th>
+                        <th class="dx-repeater-table-remove-col"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr
+                        v-for="(entry, position) in visibleRows"
+                        :key="rowKey(entry.row, position)"
+                    >
+                        <!--
+                          @slot Custom layout for a single repeater row, replacing the default sub-field stack (including the built-in Remove control — call `remove()` yourself). In table layout, rendered as the `<tr>`'s children: supply one `<td>` per sub-field plus a trailing `<td>` to match the header's column count (the header always includes an empty column for the built-in remove button).
+                          @binding {object} row The current row's data object.
+                          @binding {number} index The row's zero-based position among visible rows.
+                          @binding {FieldDefinition[]} fields The sub-field definitions for the row.
+                          @binding {function} remove Removes this row (respects `minItems`; soft-deletes instead of splicing when `field.softDeleteKey` is set and the row has an `id`).
+                          @binding {string} path The dot path into `form.data` for this row (e.g. `lines.0`).
+                        -->
+                        <slot
+                            v-if="$slots.row"
+                            name="row"
+                            :row="entry.row"
+                            :index="position"
+                            :fields="subFields"
+                            :remove="() => removeRow(entry.index)"
+                            :path="rowPath(entry.index)"
+                        />
+
+                        <template v-else>
+                            <td v-for="subField in subFields" :key="subField.key">
+                                <DXField
+                                    :field="subField"
+                                    :form="form"
+                                    :model="entry.row"
+                                    :key-path="`${rowPath(entry.index)}.${subField.key}`"
+                                    :error-key="`${rowPath(entry.index)}.${subField.key}`"
+                                    hide-label
+                                />
+                            </td>
+                            <td class="dx-repeater-table-remove-col">
+                                <DButton
+                                    variant="outline-danger"
+                                    class="dx-repeater-table-remove-btn"
+                                    :disabled="visibleRows.length <= minItems"
+                                    :aria-label="`Remove row ${position + 1}`"
+                                    @click="removeRow(entry.index)"
+                                >
+                                    <i-lucide-trash-2 aria-hidden="true" />
+                                </DButton>
+                            </td>
+                        </template>
+                    </tr>
+                </tbody>
+            </table>
+
+            <DButton
+                variant="outline-primary"
+                size="sm"
+                :disabled="maxItems !== undefined && visibleRows.length >= maxItems"
+                @click="addRow"
+            >
+                {{ field.addLabel || "Add" }}
+            </DButton>
+        </div>
+
+        <!-- Cards fallback: identical to the default cards markup below,
+             shown instead of the table when there isn't enough room for it.
+             `v-else` (not `v-show`) — only the OUTER wrapper above needs to
+             stay mounted for measurement; unmounting whichever of these two
+             isn't current avoids permanently double-running every DXField
+             in both layouts at once (double async optionsLoader fetches,
+             double watchers, double everything else a field might do). -->
+        <div v-else class="dx-repeater">
+            <div
+                v-for="(entry, position) in visibleRows"
+                :key="rowKey(entry.row, position)"
+                class="dx-repeater-row"
+            >
+                <slot
+                    v-if="$slots.row"
+                    name="row"
+                    :row="entry.row"
+                    :index="position"
+                    :fields="subFields"
+                    :remove="() => removeRow(entry.index)"
+                    :path="rowPath(entry.index)"
+                />
+
+                <template v-else>
+                    <div class="dx-repeater-row-header">
+                        <span v-if="field.showRowIndex" class="dx-repeater-row-index">{{ position + 1 }}</span>
+                        <DButton
+                            variant="outline-danger"
+                            size="sm"
+                            :disabled="visibleRows.length <= minItems"
+                            @click="removeRow(entry.index)"
+                        >
+                            Remove
+                        </DButton>
+                    </div>
+                    <DXField
+                        v-for="subField in subFields"
+                        :key="subField.key"
+                        :field="subField"
+                        :form="form"
+                        :model="entry.row"
+                        :key-path="`${rowPath(entry.index)}.${subField.key}`"
+                        :error-key="`${rowPath(entry.index)}.${subField.key}`"
+                    />
+                </template>
+            </div>
+
+            <DButton
+                variant="outline-primary"
+                size="sm"
+                :disabled="maxItems !== undefined && visibleRows.length >= maxItems"
+                @click="addRow"
+            >
+                {{ field.addLabel || "Add" }}
+            </DButton>
+        </div>
+    </div>
+
+    <!-- Cards layout (default, `repeaterLayout: "cards"` or unset): each row
+         is its own bordered card with sub-fields stacked vertically. Kept as
+         a separate, unconditional branch (rather than reusing the fallback
+         above) so this — the overwhelmingly common case — never pays for a
+         ResizeObserver or the extra wrapper div; its markup is byte-for-byte
+         what cards mode has always rendered. -->
+    <div v-else class="dx-repeater">
         <div
             v-for="(entry, position) in visibleRows"
             :key="rowKey(entry.row, position)"
@@ -32,7 +182,7 @@
             <!-- Default row: stack each sub-field -->
             <template v-else>
                 <div class="dx-repeater-row-header">
-                    <span class="dx-repeater-row-index">{{ position + 1 }}</span>
+                    <span v-if="field.showRowIndex" class="dx-repeater-row-index">{{ position + 1 }}</span>
                     <DButton
                         variant="outline-danger"
                         size="sm"
@@ -66,7 +216,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, onBeforeUnmount, ref, watch } from "vue";
 import DButton from "../base/DButton.vue";
 import DXField from "./DXField.vue";
 import type { UseFormReturn } from "../../composables/useForm";
@@ -99,6 +249,79 @@ const minItems = computed(() => props.field.minItems ?? 0);
 const maxItems = computed(() => props.field.maxItems);
 const softDeleteKey = computed(() => props.field.softDeleteKey);
 
+/** Column header text for a sub-field. No specific row context exists for a
+ *  header, so a function-valued label resolves against the outer model. */
+function headerLabel(subField: FieldDefinition): string {
+    const label = subField.label;
+    if (typeof label === "function") return label(props.model ?? {});
+    return label || subField.key;
+}
+
+// ————————————————— table/cards responsive fallback (#68 follow-up)
+
+const wantsTableLayout = computed(() => props.field.repeaterLayout === "table");
+
+const containerRef = ref<HTMLElement | null>(null);
+const containerWidth = ref<number | null>(null);
+
+// Heuristic minimum width for the table to stay legible: per-sub-field
+// column widths (not a pixel-measured fit, just a reasonable estimate —
+// `currency`/`percentage` get extra room for their `£`/`%` affix, which
+// otherwise crowds out the number itself) plus the trailing icon-only
+// remove column. Scales with this repeater's own column count/types,
+// unlike a single fixed viewport breakpoint.
+const DEFAULT_COLUMN_WIDTH = 130;
+const AFFIX_COLUMN_WIDTH = 160;
+const REMOVE_COLUMN_WIDTH = 70;
+
+function columnWidthFor(subField: FieldDefinition): number {
+    if (subField.type === "currency" || subField.type === "percentage") {
+        return AFFIX_COLUMN_WIDTH;
+    }
+    return DEFAULT_COLUMN_WIDTH;
+}
+
+const neededTableWidth = computed(
+    () =>
+        subFields.value.reduce((total, subField) => total + columnWidthFor(subField), 0) +
+        REMOVE_COLUMN_WIDTH,
+);
+
+// `null` (not yet measured) defaults to showing the table — the configured
+// preference — rather than flashing cards first. Resolves as soon as the
+// watcher below fires (see its comment for why that isn't simply onMounted).
+const showTable = computed(
+    () => containerWidth.value === null || containerWidth.value >= neededTableWidth.value,
+);
+
+let resizeObserver: ResizeObserver | null = null;
+
+// A `watch` on the ref itself, not `onMounted`: DXRepeater is loaded via
+// `defineAsyncComponent` (DXField imports it lazily to break a circular
+// import), and for an async-resolved component whose root element also
+// carries `v-if`, the template ref is not always populated yet by the time
+// `onMounted` fires — observed live as `containerRef.value === null` inside
+// `onMounted` despite the element existing in the DOM at that point. `watch`
+// instead reacts whenever the ref actually receives (or loses, e.g. if
+// `wantsTableLayout` ever toggles false) its element, regardless of when
+// that happens relative to lifecycle hooks.
+watch(containerRef, (el) => {
+    resizeObserver?.disconnect();
+    resizeObserver = null;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    containerWidth.value = el.getBoundingClientRect().width;
+    resizeObserver = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry) containerWidth.value = entry.contentRect.width;
+    });
+    resizeObserver.observe(el);
+});
+
+onBeforeUnmount(() => {
+    resizeObserver?.disconnect();
+    resizeObserver = null;
+});
+
 function isSoftDeleted(row: any): boolean {
     return Boolean(
         softDeleteKey.value &&
@@ -254,12 +477,55 @@ function removeRow(index: number): void {
 .dx-repeater-row-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     margin-bottom: 0.75rem;
 }
 
+/* The Remove control is always this header's last child, whether or not the
+   (opt-in) row-index span is also present — push it to the end explicitly
+   rather than relying on `justify-content: space-between`, which centres a
+   single remaining child at the *start* once the index is off (the default). */
+.dx-repeater-row-header > :last-child {
+    margin-inline-start: auto;
+}
+
 .dx-repeater-row-index {
     font-weight: 600;
     color: var(--bs-secondary-color);
 }
+
+.dx-repeater-table td {
+    vertical-align: middle;
+}
+
+/* Sub-fields render with their default mb-3 (matching the standalone-field
+   default), which is unwanted spacing inside an already-compact table cell —
+   and leaves the field vertically off-centre against the trailing remove
+   button, since that residual margin-bottom is inside the td's own
+   vertical-align:middle box. Bootstrap's spacing utilities are `!important`
+   by design (same as the toast-variant override elsewhere in this project),
+   so overriding one requires `!important` too — a plain declaration silently
+   loses and the margin survives. */
+.dx-repeater-table td :deep(.mb-3) {
+    margin-bottom: 0 !important;
+}
+
+.dx-repeater-table-remove-col {
+    width: 1%;
+    white-space: nowrap;
+    text-align: center;
+}
+
+/* Match the row's text-input height (same var the switch field uses).
+   `--dx-input-height`'s `em` term resolves against the CONSUMING element's
+   own font-size, not the input's — so this only lines up if the button's
+   font-size equals .form-control's (both derive from Bootstrap's base
+   font-size var, but a `size="sm"` DButton sets a smaller one). The button
+   is deliberately NOT `size="sm"` here for that reason; min-height still
+   keeps it visually compact regardless. */
+.dx-repeater-table-remove-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--dx-input-height, calc(1.5em + 0.75rem + 2px));
+}
 </style>