From b22ab9d3c2f78bddfa69f703fa923f462e6330a4 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 14 Aug 2026 18:15:25 +0100
Subject: [PATCH 01/21] Configure table widths

---
 src/Sites/Sites.php | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/Sites/Sites.php b/src/Sites/Sites.php
index ac11c2af1b8..074e5609687 100644
--- a/src/Sites/Sites.php
+++ b/src/Sites/Sites.php
@@ -254,6 +254,15 @@ public function blueprint()
 
         // If multisite, nest fields in a grid
         if ($this->multiEnabled()) {
+            $tableWidths = [
+                'name' => 14,
+                'handle' => 14,
+                'url' => 14,
+                'locale' => 12,
+                'lang' => 16,
+                'attributes' => 30,
+            ];
+
             $siteFields = [
                 [
                     'handle' => 'sites',
@@ -264,7 +273,11 @@ public function blueprint()
                         'fullscreen' => false,
                         'mode' => 'stacked',
                         'add_row' => __('Add Site'),
-                        'fields' => $siteFields,
+                        'fields' => collect($siteFields)->map(function ($field) use ($tableWidths) {
+                            $field['field']['width'] = $tableWidths[$field['handle']] ?? 16;
+
+                            return $field;
+                        })->all(),
                         'required' => true,
                     ],
                 ],

From d55958b72421ad7dc2c781221f5707aec1f6d8ec Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 14 Aug 2026 20:12:19 +0100
Subject: [PATCH 02/21] Tweak max-widths

---
 src/Sites/Sites.php | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/Sites/Sites.php b/src/Sites/Sites.php
index 074e5609687..6c49d665e09 100644
--- a/src/Sites/Sites.php
+++ b/src/Sites/Sites.php
@@ -258,8 +258,8 @@ public function blueprint()
                 'name' => 14,
                 'handle' => 14,
                 'url' => 14,
-                'locale' => 12,
-                'lang' => 16,
+                'locale' => 14,
+                'lang' => 14,
                 'attributes' => 30,
             ];
 
@@ -271,11 +271,20 @@ public function blueprint()
                         'hide_display' => true,
                         'actions' => false,
                         'fullscreen' => false,
-                        'mode' => 'stacked',
+                        'mode' => 'table',
                         'add_row' => __('Add Site'),
                         'fields' => collect($siteFields)->map(function ($field) use ($tableWidths) {
                             $field['field']['width'] = $tableWidths[$field['handle']] ?? 16;
 
+                            if ($field['handle'] === 'attributes') {
+                                $field['field']['compact'] = true;
+                                $field['field']['classes'] = 'max-w-48 min-w-0 overflow-hidden';
+                            }
+
+                            if ($field['handle'] === 'lang') {
+                                $field['field']['classes'] = 'max-w-48 min-w-0 overflow-hidden';
+                            }
+
                             return $field;
                         })->all(),
                         'required' => true,

From 79771d6f3e830aa072c78d9695a8de9879ea75d9 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 14 Aug 2026 20:32:58 +0100
Subject: [PATCH 03/21] Adjust stack breakpoint for /sites

---
 resources/js/components/fieldtypes/grid/Grid.vue | 3 ++-
 src/Sites/Sites.php                              | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index b1b5ec93db3..1b1a8de1622 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -86,7 +86,8 @@ export default {
 
     computed: {
         component() {
-            const isNarrow = this.fields.length > 1 && this.containerWidth < 550;
+            const stackAt = this.config.stack_at ?? 550;
+            const isNarrow = this.fields.length > 1 && this.containerWidth < stackAt;
 
             return this.config.mode === 'stacked' || isNarrow ? 'GridStacked' : 'GridTable';
         },
diff --git a/src/Sites/Sites.php b/src/Sites/Sites.php
index 6c49d665e09..cf8d17f1eeb 100644
--- a/src/Sites/Sites.php
+++ b/src/Sites/Sites.php
@@ -272,6 +272,7 @@ public function blueprint()
                         'actions' => false,
                         'fullscreen' => false,
                         'mode' => 'table',
+                        'stack_at' => 925,
                         'add_row' => __('Add Site'),
                         'fields' => collect($siteFields)->map(function ($field) use ($tableWidths) {
                             $field['field']['width'] = $tableWidths[$field['handle']] ?? 16;

From b376454b3eb870833f30624d37b5406bad59e720 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 17 Aug 2026 14:19:56 +0100
Subject: [PATCH 04/21] Prevent all fields from blowing out

---
 src/Sites/Sites.php | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/Sites/Sites.php b/src/Sites/Sites.php
index cf8d17f1eeb..57a86c9346f 100644
--- a/src/Sites/Sites.php
+++ b/src/Sites/Sites.php
@@ -276,14 +276,10 @@ public function blueprint()
                         'add_row' => __('Add Site'),
                         'fields' => collect($siteFields)->map(function ($field) use ($tableWidths) {
                             $field['field']['width'] = $tableWidths[$field['handle']] ?? 16;
+                            $field['field']['classes'] = 'max-w-48 min-w-0 overflow-hidden';
 
                             if ($field['handle'] === 'attributes') {
                                 $field['field']['compact'] = true;
-                                $field['field']['classes'] = 'max-w-48 min-w-0 overflow-hidden';
-                            }
-
-                            if ($field['handle'] === 'lang') {
-                                $field['field']['classes'] = 'max-w-48 min-w-0 overflow-hidden';
                             }
 
                             return $field;

From 56cd82b9d33be0065775a616ecb88d6b625c9879 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 17 Aug 2026 14:25:29 +0100
Subject: [PATCH 05/21] Improve

---
 src/Sites/Sites.php | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/Sites/Sites.php b/src/Sites/Sites.php
index 57a86c9346f..1aa1d903743 100644
--- a/src/Sites/Sites.php
+++ b/src/Sites/Sites.php
@@ -255,11 +255,6 @@ public function blueprint()
         // If multisite, nest fields in a grid
         if ($this->multiEnabled()) {
             $tableWidths = [
-                'name' => 14,
-                'handle' => 14,
-                'url' => 14,
-                'locale' => 14,
-                'lang' => 14,
                 'attributes' => 30,
             ];
 
@@ -275,13 +270,8 @@ public function blueprint()
                         'stack_at' => 925,
                         'add_row' => __('Add Site'),
                         'fields' => collect($siteFields)->map(function ($field) use ($tableWidths) {
-                            $field['field']['width'] = $tableWidths[$field['handle']] ?? 16;
+                            $field['field']['width'] = $tableWidths[$field['handle']] ?? 14;
                             $field['field']['classes'] = 'max-w-48 min-w-0 overflow-hidden';
-
-                            if ($field['handle'] === 'attributes') {
-                                $field['field']['compact'] = true;
-                            }
-
                             return $field;
                         })->all(),
                         'required' => true,

From 323fe1bf295d4ac0fada0eb3be8e44a9be6e8494 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 17 Aug 2026 14:43:57 +0100
Subject: [PATCH 06/21] Fix Pint formatting in Sites blueprint

---
 src/Sites/Sites.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Sites/Sites.php b/src/Sites/Sites.php
index 1aa1d903743..d7fc9498b80 100644
--- a/src/Sites/Sites.php
+++ b/src/Sites/Sites.php
@@ -272,6 +272,7 @@ public function blueprint()
                         'fields' => collect($siteFields)->map(function ($field) use ($tableWidths) {
                             $field['field']['width'] = $tableWidths[$field['handle']] ?? 14;
                             $field['field']['classes'] = 'max-w-48 min-w-0 overflow-hidden';
+
                             return $field;
                         })->all(),
                         'required' => true,

From 4f200c8e1c4f58a8e6e7f18c4f460e3dc01b49f2 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 14 Aug 2026 19:17:59 +0100
Subject: [PATCH 07/21] Prototype custom attribute popover

---
 .../components/fieldtypes/ArrayFieldtype.vue  | 248 +++++++++++-------
 src/Sites/Sites.php                           |   4 +
 2 files changed, 160 insertions(+), 92 deletions(-)

diff --git a/resources/js/components/fieldtypes/ArrayFieldtype.vue b/resources/js/components/fieldtypes/ArrayFieldtype.vue
index 5c4184576d1..4ca1ed04aaa 100644
--- a/resources/js/components/fieldtypes/ArrayFieldtype.vue
+++ b/resources/js/components/fieldtypes/ArrayFieldtype.vue
@@ -1,99 +1,119 @@
 <template>
-    <div>
-        <ui-input-group v-if="isSingle">
-            <ui-input-group-prepend>
-                <select
-                    class="appearance-none border-0 bg-transparent text-sm shadow-none outline-hidden"
-                    @input="setKey($event.target.value)"
+    <div :class="{ 'w-full min-w-0': isCompact }">
+        <component :is="wrapperComponent" v-bind="wrapperBinds">
+            <template v-if="isCompact" #trigger>
+                <button
+                    type="button"
+                    class="w-full min-w-0 flex items-center justify-between antialiased cursor-pointer bg-linear-to-b from-white to-gray-50 text-gray-925 border border-gray-300 with-contrast:border-gray-500 shadow-ui-sm focus-within:focus-outline dark:from-gray-850 dark:to-gray-900 dark:border-gray-700 dark:text-gray-300 dark:shadow-ui-md px-4 h-10 text-base rounded-lg"
+                    :class="{ 'border-dashed': isReadOnly }"
                 >
-                    <option
-                        v-for="(element, index) in keyedData"
-                        v-text="keys[element.key] || element.key"
-                        :key="element._id"
-                        :value="element.key"
-                        :selected="element.key === selectedKey"
-                    />
-                </select>
-                <ui-icon name="chevron-down" class="size-3 ms-1" />
-            </ui-input-group-prepend>
-            <template v-for="(element, index) in keyedData">
-                <ui-input
-                    v-if="element.key === selectedKey"
-                    v-model="data[index].value"
-                    input-class="border-l-0"
-                    :key="element._id"
-                    :id="fieldId + '__' + element.key"
-                    :readonly="isReadOnly"
-                    :input-attrs="{ dir: contentDirection }"
-                />
+                    <span
+                        class="block min-w-0 flex-1 truncate text-start"
+                        :class="{ 'text-gray-500 dark:text-gray-400': !hasCompactValues }"
+                    >
+                        {{ compactTriggerText }}
+                    </span>
+                    <ui-icon name="chevron-down" class="text-gray-400 dark:text-white/40 size-4 ms-1.5 -me-1 shrink-0" />
+                </button>
             </template>
-        </ui-input-group>
-
-        <table class="table-contained" v-else-if="isKeyed">
-            <tbody>
-                <tr v-if="data" v-for="(element, index) in keyedData" :key="element._id">
-                    <th class="w-1/4">
-                        <label :for="fieldId + '__' + element.key">{{ keys[element.key] || element.key }}</label>
-                    </th>
-                    <td>
-                        <input
-                            type="text"
-                            class="w-full input-text"
-                            :id="fieldId + '__' + element.key"
+
+            <div ref="editor">
+                <ui-input-group v-if="isSingle">
+                    <ui-input-group-prepend>
+                        <select
+                            class="appearance-none border-0 bg-transparent text-sm shadow-none outline-hidden"
+                            @input="setKey($event.target.value)"
+                        >
+                            <option
+                                v-for="(element, index) in keyedData"
+                                v-text="keys[element.key] || element.key"
+                                :key="element._id"
+                                :value="element.key"
+                                :selected="element.key === selectedKey"
+                            />
+                        </select>
+                        <ui-icon name="chevron-down" class="size-3 ms-1" />
+                    </ui-input-group-prepend>
+                    <template v-for="(element, index) in keyedData">
+                        <ui-input
+                            v-if="element.key === selectedKey"
                             v-model="data[index].value"
+                            input-class="border-l-0"
+                            :key="element._id"
+                            :id="fieldId + '__' + element.key"
                             :readonly="isReadOnly"
-                            :dir="contentDirection"
+                            :input-attrs="{ dir: contentDirection }"
                         />
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-
-        <table class="table-contained" v-if="isDynamic && valueCount">
-            <thead>
-                <tr>
-                    <th class="grid-drag-handle-header" v-if="!isReadOnly"></th>
-                    <th class="w-1/4">{{ keyHeader }}</th>
-                    <th class="">{{ valueHeader }}</th>
-                    <th class="row-controls" v-if="!isReadOnly"></th>
-                </tr>
-            </thead>
-
-            <sortable-list
-                v-model="data"
-                :vertical="true"
-                item-class="sortable-row"
-                handle-class="sortable-handle"
-                :mirror="false"
-            >
-                <tbody>
-                    <tr class="sortable-row" v-for="(element, index) in data" :key="element._id">
-                        <td class="sortable-handle table-drag-handle" v-if="!isReadOnly"></td>
-                        <td>
-                            <ui-input
-                                v-model="element.key"
-                                :readonly="isReadOnly"
-                                :input-attrs="{ dir: contentDirection }"
-                            />
-                        </td>
-                        <td>
-                            <ui-input
-                                v-model="element.value"
-                                :readonly="isReadOnly"
-                                :input-attrs="{ dir: contentDirection }"
-                            />
-                        </td>
-                        <td class="row-controls" v-if="!isReadOnly">
-                            <ui-button icon="x" variant="subtle" size="xs" round delete-action @click="deleteOrConfirm(index)" :aria-label="__('Delete Row')" v-tooltip="__('Delete Row')" />
-                        </td>
-                    </tr>
-                </tbody>
-            </sortable-list>
-        </table>
-
-        <div class="flex gap-2">
-            <ui-button @click="addValue" :disabled="atMax" v-if="!isReadOnly && !isSingle && !isKeyed" :text="addButton" size="sm" />
-        </div>
+                    </template>
+                </ui-input-group>
+
+                <table class="table-contained" :class="{ 'mb-0': isCompact }" v-else-if="isKeyed">
+                    <tbody>
+                        <tr v-if="data" v-for="(element, index) in keyedData" :key="element._id">
+                            <th class="w-1/4">
+                                <label :for="fieldId + '__' + element.key">{{ keys[element.key] || element.key }}</label>
+                            </th>
+                            <td>
+                                <input
+                                    type="text"
+                                    class="w-full input-text"
+                                    :id="fieldId + '__' + element.key"
+                                    v-model="data[index].value"
+                                    :readonly="isReadOnly"
+                                    :dir="contentDirection"
+                                />
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+
+                <table class="table-contained" :class="{ 'mb-0': isCompact }" v-if="isDynamic && valueCount">
+                    <thead>
+                        <tr>
+                            <th class="grid-drag-handle-header" v-if="!isReadOnly"></th>
+                            <th class="w-1/4">{{ keyHeader }}</th>
+                            <th class="">{{ valueHeader }}</th>
+                            <th class="row-controls" v-if="!isReadOnly"></th>
+                        </tr>
+                    </thead>
+
+                    <sortable-list
+                        v-model="data"
+                        :vertical="true"
+                        item-class="sortable-row"
+                        handle-class="sortable-handle"
+                        :mirror="false"
+                    >
+                        <tbody>
+                            <tr class="sortable-row" v-for="(element, index) in data" :key="element._id">
+                                <td class="sortable-handle table-drag-handle" v-if="!isReadOnly"></td>
+                                <td>
+                                    <ui-input
+                                        v-model="element.key"
+                                        :readonly="isReadOnly"
+                                        :input-attrs="{ dir: contentDirection }"
+                                    />
+                                </td>
+                                <td>
+                                    <ui-input
+                                        v-model="element.value"
+                                        :readonly="isReadOnly"
+                                        :input-attrs="{ dir: contentDirection }"
+                                    />
+                                </td>
+                                <td class="row-controls" v-if="!isReadOnly">
+                                    <ui-button icon="x" variant="subtle" size="xs" round delete-action @click="deleteOrConfirm(index)" :aria-label="__('Delete Row')" v-tooltip="__('Delete Row')" />
+                                </td>
+                            </tr>
+                        </tbody>
+                    </sortable-list>
+                </table>
+
+                <div class="flex gap-2" :class="{ 'mt-2': isCompact && valueCount }">
+                    <ui-button @click="addValue" :disabled="atMax" v-if="!isReadOnly && !isSingle && !isKeyed" :text="addButton" size="sm" />
+                </div>
+            </div>
+        </component>
 
         <confirmation-modal
             :open="deleting !== false"
@@ -110,7 +130,7 @@
 <script>
 import Fieldtype from './Fieldtype.vue';
 import { SortableList, SortableHelpers } from '../sortable/Sortable';
-import { Button } from '@/components/ui';
+import { Button, Popover } from '@/components/ui';
 import { useContentDirection } from '@/composables/content-direction';
 
 export default {
@@ -119,6 +139,7 @@ export default {
     components: {
         SortableList,
         Button,
+        Popover,
     },
 
     setup() {
@@ -135,6 +156,7 @@ export default {
             data: this.objectToSortable(this.value || []),
             selectedKey,
             deleting: false,
+            compactOpen: false,
         };
     },
 
@@ -169,6 +191,27 @@ export default {
             return this.config.mode === 'single';
         },
 
+        isCompact() {
+            return this.config.compact === true;
+        },
+
+        wrapperComponent() {
+            return this.isCompact ? Popover : 'div';
+        },
+
+        wrapperBinds() {
+            if (!this.isCompact) return {};
+
+            return {
+                align: 'end',
+                side: 'bottom',
+                class: 'w-[32rem]',
+                dismissible: this.deleting === false,
+                open: this.compactOpen,
+                'onUpdate:open': this.setCompactOpen,
+            };
+        },
+
         keyedData() {
             return this.data.filter((element) => this.keys.hasOwnProperty(element.key));
         },
@@ -197,6 +240,19 @@ export default {
             return __(this.config.value_header || 'Value');
         },
 
+        hasCompactValues() {
+            return this.data.some((element) => element.key || element.value);
+        },
+
+        compactTriggerText() {
+            if (!this.hasCompactValues) return this.addButton;
+
+            return this.data
+                .filter((element) => element.key || element.value)
+                .map((element) => element.key || this.valueHeader)
+                .join(', ');
+        },
+
         replicatorPreview() {
             if (!this.showFieldPreviews) return;
             if (!this.value) return '';
@@ -209,10 +265,18 @@ export default {
     },
 
     methods: {
+        setCompactOpen(open) {
+            this.compactOpen = open;
+
+            if (open && !this.valueCount && !this.isReadOnly) {
+                this.addValue();
+            }
+        },
+
         addValue() {
             this.data.push(this.newSortableValue());
             this.$nextTick(() => {
-                this.$el.querySelector('tr:last-child input').focus();
+                this.$refs.editor?.querySelector('tr:last-child input')?.focus();
             });
         },
 
diff --git a/src/Sites/Sites.php b/src/Sites/Sites.php
index d7fc9498b80..2e8ca2176d6 100644
--- a/src/Sites/Sites.php
+++ b/src/Sites/Sites.php
@@ -273,6 +273,10 @@ public function blueprint()
                             $field['field']['width'] = $tableWidths[$field['handle']] ?? 14;
                             $field['field']['classes'] = 'max-w-48 min-w-0 overflow-hidden';
 
+                            if ($field['handle'] === 'attributes') {
+                                $field['field']['compact'] = true;
+                            }
+
                             return $field;
                         })->all(),
                         'required' => true,

From 2ad5342959b7c47d87a82646ab739ffa1a809b5f Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Mon, 17 Aug 2026 15:13:35 +0100
Subject: [PATCH 08/21] Simplify

---
 lang/en/fieldtypes.php                        |  1 +
 .../components/fieldtypes/ArrayFieldtype.vue  | 24 ++++++++++++-------
 src/Fieldtypes/Arr.php                        |  5 ++++
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/lang/en/fieldtypes.php b/lang/en/fieldtypes.php
index fa5ec422d0d..4bf16f33aaf 100644
--- a/lang/en/fieldtypes.php
+++ b/lang/en/fieldtypes.php
@@ -4,6 +4,7 @@
     'any.config.antlers' => 'Enable Antlers parsing in this field\'s content.',
     'any.config.cast_booleans' => 'Options with values of true and false will be saved as booleans.',
     'any.config.mode' => 'Choose your preferred UI style.',
+    'array.config.compact' => 'Show a trigger and edit values in a popover. Useful in tables and other tight layouts.',
     'array.config.expand' => 'Whether to save the array in the expanded format. Use this if you intend to have numeric values.',
     'array.config.keys' => 'Set the array keys (variables) and their optional labels.',
     'array.config.mode' => 'The **dynamic** mode gives the user free control of the data, while **keyed** and **single** modes enforce strict keys.',
diff --git a/resources/js/components/fieldtypes/ArrayFieldtype.vue b/resources/js/components/fieldtypes/ArrayFieldtype.vue
index 4ca1ed04aaa..71796c88658 100644
--- a/resources/js/components/fieldtypes/ArrayFieldtype.vue
+++ b/resources/js/components/fieldtypes/ArrayFieldtype.vue
@@ -2,22 +2,23 @@
     <div :class="{ 'w-full min-w-0': isCompact }">
         <component :is="wrapperComponent" v-bind="wrapperBinds">
             <template v-if="isCompact" #trigger>
-                <button
-                    type="button"
-                    class="w-full min-w-0 flex items-center justify-between antialiased cursor-pointer bg-linear-to-b from-white to-gray-50 text-gray-925 border border-gray-300 with-contrast:border-gray-500 shadow-ui-sm focus-within:focus-outline dark:from-gray-850 dark:to-gray-900 dark:border-gray-700 dark:text-gray-300 dark:shadow-ui-md px-4 h-10 text-base rounded-lg"
-                    :class="{ 'border-dashed': isReadOnly }"
+                <ui-button
+                    class="w-full min-w-0 shrink justify-between"
+                    icon-append="chevron-down"
+                    :read-only="isReadOnly"
+                    :aria-expanded="compactOpen"
+                    aria-haspopup="dialog"
                 >
                     <span
-                        class="block min-w-0 flex-1 truncate text-start"
+                        class="block min-w-0 flex-1 truncate text-start font-normal"
                         :class="{ 'text-gray-500 dark:text-gray-400': !hasCompactValues }"
                     >
                         {{ compactTriggerText }}
                     </span>
-                    <ui-icon name="chevron-down" class="text-gray-400 dark:text-white/40 size-4 ms-1.5 -me-1 shrink-0" />
-                </button>
+                </ui-button>
             </template>
 
-            <div ref="editor">
+            <div ref="editor" @keydown.enter="closeCompactOnEnter">
                 <ui-input-group v-if="isSingle">
                     <ui-input-group-prepend>
                         <select
@@ -273,6 +274,13 @@ export default {
             }
         },
 
+        closeCompactOnEnter(event) {
+            if (!this.isCompact || event.target.tagName !== 'INPUT') return;
+
+            event.preventDefault();
+            this.setCompactOpen(false);
+        },
+
         addValue() {
             this.data.push(this.newSortableValue());
             this.$nextTick(() => {
diff --git a/src/Fieldtypes/Arr.php b/src/Fieldtypes/Arr.php
index 0720ada66d5..1dbbffe43f6 100644
--- a/src/Fieldtypes/Arr.php
+++ b/src/Fieldtypes/Arr.php
@@ -42,6 +42,11 @@ protected function configFieldItems(): array
                         'display' => __('Expanded format'),
                         'instructions' => __('statamic::fieldtypes.array.config.expand'),
                     ],
+                    'compact' => [
+                        'type' => 'toggle',
+                        'display' => __('Compact'),
+                        'instructions' => __('statamic::fieldtypes.array.config.compact'),
+                    ],
                 ],
             ],
             [

From e0848c29190a28cdff0958f5010aefeac3f47ffc Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 19 Aug 2026 11:22:08 +0100
Subject: [PATCH 09/21] Bring back the compact array field for sites

---
 src/Sites/Sites.php | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/Sites/Sites.php b/src/Sites/Sites.php
index d7fc9498b80..2e8ca2176d6 100644
--- a/src/Sites/Sites.php
+++ b/src/Sites/Sites.php
@@ -273,6 +273,10 @@ public function blueprint()
                             $field['field']['width'] = $tableWidths[$field['handle']] ?? 14;
                             $field['field']['classes'] = 'max-w-48 min-w-0 overflow-hidden';
 
+                            if ($field['handle'] === 'attributes') {
+                                $field['field']['compact'] = true;
+                            }
+
                             return $field;
                         })->all(),
                         'required' => true,

From cf957e86cd42cb1506d17c0a4022b7d8b81478e9 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 19 Aug 2026 11:27:15 +0100
Subject: [PATCH 10/21] Tidy compact attribute

---
 src/Sites/Sites.php | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/Sites/Sites.php b/src/Sites/Sites.php
index 2e8ca2176d6..66e58072e97 100644
--- a/src/Sites/Sites.php
+++ b/src/Sites/Sites.php
@@ -248,6 +248,7 @@ public function blueprint()
                     'instructions' => __('statamic::messages.site_configure_attributes_instructions'),
                     'type' => 'array',
                     'add_button' => __('Add Attribute'),
+                    'compact' => true,
                 ],
             ],
         ];
@@ -273,10 +274,6 @@ public function blueprint()
                             $field['field']['width'] = $tableWidths[$field['handle']] ?? 14;
                             $field['field']['classes'] = 'max-w-48 min-w-0 overflow-hidden';
 
-                            if ($field['handle'] === 'attributes') {
-                                $field['field']['compact'] = true;
-                            }
-
                             return $field;
                         })->all(),
                         'required' => true,

From 78b410f66a71113b6927d31074a3780b0ced839d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 19 Aug 2026 12:12:10 +0100
Subject: [PATCH 11/21] Remove enter escaping the popover, we'll do something
 different

---
 resources/js/components/fieldtypes/ArrayFieldtype.vue | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/resources/js/components/fieldtypes/ArrayFieldtype.vue b/resources/js/components/fieldtypes/ArrayFieldtype.vue
index 71796c88658..07000dc13fc 100644
--- a/resources/js/components/fieldtypes/ArrayFieldtype.vue
+++ b/resources/js/components/fieldtypes/ArrayFieldtype.vue
@@ -18,7 +18,7 @@
                 </ui-button>
             </template>
 
-            <div ref="editor" @keydown.enter="closeCompactOnEnter">
+            <div ref="editor">
                 <ui-input-group v-if="isSingle">
                     <ui-input-group-prepend>
                         <select
@@ -274,13 +274,6 @@ export default {
             }
         },
 
-        closeCompactOnEnter(event) {
-            if (!this.isCompact || event.target.tagName !== 'INPUT') return;
-
-            event.preventDefault();
-            this.setCompactOpen(false);
-        },
-
         addValue() {
             this.data.push(this.newSortableValue());
             this.$nextTick(() => {

From 3e59d446464a96f74127fd912624dc70750cb0ac Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 19 Aug 2026 12:22:07 +0100
Subject: [PATCH 12/21] Enter should create a new row

---
 .../components/fieldtypes/ArrayFieldtype.vue  | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/fieldtypes/ArrayFieldtype.vue b/resources/js/components/fieldtypes/ArrayFieldtype.vue
index 07000dc13fc..46bc874980d 100644
--- a/resources/js/components/fieldtypes/ArrayFieldtype.vue
+++ b/resources/js/components/fieldtypes/ArrayFieldtype.vue
@@ -18,7 +18,7 @@
                 </ui-button>
             </template>
 
-            <div ref="editor">
+            <div ref="editor" @keydown.enter="addRowOnEnter">
                 <ui-input-group v-if="isSingle">
                     <ui-input-group-prepend>
                         <select
@@ -274,10 +274,26 @@ export default {
             }
         },
 
-        addValue() {
-            this.data.push(this.newSortableValue());
+        addRowOnEnter(event) {
+            if (!this.isDynamic || this.isReadOnly || this.atMax) return;
+            if (event.target.tagName !== 'INPUT') return;
+
+            event.preventDefault();
+
+            const rows = [...(this.$refs.editor?.querySelectorAll('tr.sortable-row') ?? [])];
+            const current = event.target.closest('tr.sortable-row');
+            const index = rows.indexOf(current);
+
+            this.addValue(index === -1 ? this.data.length : index + 1);
+        },
+
+        addValue(index = this.data.length) {
+            this.data.splice(index, 0, this.newSortableValue());
             this.$nextTick(() => {
-                this.$refs.editor?.querySelector('tr:last-child input')?.focus();
+                this.$refs.editor
+                    ?.querySelectorAll('tr.sortable-row')[index]
+                    ?.querySelector('input')
+                    ?.focus();
             });
         },
 

From 6d9694940f374a57702103903f1edb25e929818c Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 19 Aug 2026 12:46:18 +0100
Subject: [PATCH 13/21] Keyboard shortcut

---
 .../js/components/fieldtypes/ArrayFieldtype.vue      | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/ArrayFieldtype.vue b/resources/js/components/fieldtypes/ArrayFieldtype.vue
index 46bc874980d..2d0bfa69592 100644
--- a/resources/js/components/fieldtypes/ArrayFieldtype.vue
+++ b/resources/js/components/fieldtypes/ArrayFieldtype.vue
@@ -110,8 +110,18 @@
                     </sortable-list>
                 </table>
 
-                <div class="flex gap-2" :class="{ 'mt-2': isCompact && valueCount }">
+                <div
+                    v-if="(!isReadOnly && !isSingle && !isKeyed) || isCompact"
+                    class="flex w-full items-center gap-2"
+                    :class="{ 'mt-2': isCompact && valueCount }"
+                >
                     <ui-button @click="addValue" :disabled="atMax" v-if="!isReadOnly && !isSingle && !isKeyed" :text="addButton" size="sm" />
+                    <ui-button v-if="isCompact" class="ms-auto" size="sm" @click="setCompactOpen(false)">
+                        {{ __('Close') }}
+                        <span class="ms-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded bg-gray-200/75 px-1 font-semibold uppercase text-[0.625rem] text-gray-600 dark:bg-gray-800 dark:text-gray-400">
+                            Esc
+                        </span>
+                    </ui-button>
                 </div>
             </div>
         </component>

From d845086cdcdeb253403c29ea04c7499190cfd62d Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 19 Aug 2026 14:16:17 +0100
Subject: [PATCH 14/21] Improve readability

---
 resources/js/components/fieldtypes/ArrayFieldtype.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/ArrayFieldtype.vue b/resources/js/components/fieldtypes/ArrayFieldtype.vue
index 2d0bfa69592..e332955c35d 100644
--- a/resources/js/components/fieldtypes/ArrayFieldtype.vue
+++ b/resources/js/components/fieldtypes/ArrayFieldtype.vue
@@ -118,7 +118,7 @@
                     <ui-button @click="addValue" :disabled="atMax" v-if="!isReadOnly && !isSingle && !isKeyed" :text="addButton" size="sm" />
                     <ui-button v-if="isCompact" class="ms-auto" size="sm" @click="setCompactOpen(false)">
                         {{ __('Close') }}
-                        <span class="ms-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded bg-gray-200/75 px-1 font-semibold uppercase text-[0.625rem] text-gray-600 dark:bg-gray-800 dark:text-gray-400">
+                        <span class="ms-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded bg-gray-200/50 px-1 font-semibold uppercase text-[0.625rem] text-gray-600 dark:bg-gray-900 dark:text-gray-400/85">
                             Esc
                         </span>
                     </ui-button>

From 2bc93a5fcf694235d22977baf1aecd9cf5448803 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 19 Aug 2026 14:25:14 +0100
Subject: [PATCH 15/21] Improve readability

---
 resources/js/components/fieldtypes/ArrayFieldtype.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/fieldtypes/ArrayFieldtype.vue b/resources/js/components/fieldtypes/ArrayFieldtype.vue
index e332955c35d..cad9f802768 100644
--- a/resources/js/components/fieldtypes/ArrayFieldtype.vue
+++ b/resources/js/components/fieldtypes/ArrayFieldtype.vue
@@ -117,7 +117,7 @@
                 >
                     <ui-button @click="addValue" :disabled="atMax" v-if="!isReadOnly && !isSingle && !isKeyed" :text="addButton" size="sm" />
                     <ui-button v-if="isCompact" class="ms-auto" size="sm" @click="setCompactOpen(false)">
-                        {{ __('Close') }}
+                        <span class="st-text-trim-cap">{{ __('Close') }}</span>
                         <span class="ms-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded bg-gray-200/50 px-1 font-semibold uppercase text-[0.625rem] text-gray-600 dark:bg-gray-900 dark:text-gray-400/85">
                             Esc
                         </span>

From b156b1b3ba42db3e80ff416c9d3ca237a6959457 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 19 Aug 2026 14:36:08 +0100
Subject: [PATCH 16/21] Clean buttons so they don't clash with any buttons
 below

---
 resources/js/components/fieldtypes/ArrayFieldtype.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/fieldtypes/ArrayFieldtype.vue b/resources/js/components/fieldtypes/ArrayFieldtype.vue
index cad9f802768..8fc8f579225 100644
--- a/resources/js/components/fieldtypes/ArrayFieldtype.vue
+++ b/resources/js/components/fieldtypes/ArrayFieldtype.vue
@@ -115,8 +115,8 @@
                     class="flex w-full items-center gap-2"
                     :class="{ 'mt-2': isCompact && valueCount }"
                 >
-                    <ui-button @click="addValue" :disabled="atMax" v-if="!isReadOnly && !isSingle && !isKeyed" :text="addButton" size="sm" />
-                    <ui-button v-if="isCompact" class="ms-auto" size="sm" @click="setCompactOpen(false)">
+                    <ui-button @click="addValue" :disabled="atMax" v-if="!isReadOnly && !isSingle && !isKeyed" :text="addButton" size="sm" :class="compactFooterButtonClass" />
+                    <ui-button v-if="isCompact" class="ms-auto" :class="compactFooterButtonClass" size="sm" @click="setCompactOpen(false)">
                         <span class="st-text-trim-cap">{{ __('Close') }}</span>
                         <span class="ms-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded bg-gray-200/50 px-1 font-semibold uppercase text-[0.625rem] text-gray-600 dark:bg-gray-900 dark:text-gray-400/85">
                             Esc
@@ -251,6 +251,12 @@ export default {
             return __(this.config.value_header || 'Value');
         },
 
+        compactFooterButtonClass() {
+            if (!this.isCompact) return;
+
+            return 'from-white to-white hover:from-white hover:to-gray-50';
+        },
+
         hasCompactValues() {
             return this.data.some((element) => element.key || element.value);
         },

From 005872d342354f2740d0a6e8c622b63ab36f66d3 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 19 Aug 2026 15:22:20 +0100
Subject: [PATCH 17/21] Restore comments so it's easier to trace body class
 meanings

---
 resources/css/elements/base.css | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index 465bf07665f..479287b66f3 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -152,15 +152,14 @@ code:not(pre *) {
     }
 }
 
-/**
-	Override the z-index of Reka's popper content wrapper under certain conditions.
-	We can't use a direct descendant selector because the DatePicker is inside a Portal.
-*/
+/* Override the hardcoded z-index of Reka's popper content wrapper under certain conditions. We can't use a direct descendant selector because things like a datepicker/combobox/popover is inside a portal, so instead we'll check to see if certain conditions are present. */
 body:has(
-	[data-ui-modal-content],
-	.stack,
-	.live-preview,
-	.code-fullscreen
+    /* A modal is present */
+    [data-ui-modal-content],
+    .stack,
+    .live-preview,
+    /* Fullscreen Code Editor fieldtype */
+    .code-fullscreen
 ) [data-reka-popper-content-wrapper] {
     z-index: var(--z-index-portal)!important;
 }
\ No newline at end of file

From 04a598446d7c04a3289694180a41a443cd035953 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 19 Aug 2026 16:10:21 +0100
Subject: [PATCH 18/21] Add a data-ui-confirmation-modal helper for singling
 out confirmation modals

---
 resources/js/components/ui/Modal/ConfirmationModal.vue | 1 +
 resources/js/components/ui/Modal/Modal.vue             | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Modal/ConfirmationModal.vue b/resources/js/components/ui/Modal/ConfirmationModal.vue
index 64faeb0e905..da856994f2c 100644
--- a/resources/js/components/ui/Modal/ConfirmationModal.vue
+++ b/resources/js/components/ui/Modal/ConfirmationModal.vue
@@ -79,6 +79,7 @@ const shouldCloseOnSubmit = computed(() => {
 <template>
     <Modal
         ref="modal"
+        data-ui-confirmation-modal
         :title="__(title)"
         :open="open"
         :blur="blur"
diff --git a/resources/js/components/ui/Modal/Modal.vue b/resources/js/components/ui/Modal/Modal.vue
index 99774eddc61..62d2d701553 100644
--- a/resources/js/components/ui/Modal/Modal.vue
+++ b/resources/js/components/ui/Modal/Modal.vue
@@ -32,6 +32,11 @@ const props = defineProps({
     dismissible: { type: Boolean, default: true },
 });
 
+const restAttrs = computed(() => {
+    const { class: _, ...rest } = attrs;
+    return rest;
+});
+
 const overlayClasses = cva({
     base: 'fixed inset-0 z-(--z-index-portal) bg-gray-800/20 dark:bg-gray-950/60',
     variants: {
@@ -185,7 +190,7 @@ provide('closeModal', close);
                 leave-from-class="opacity-100 scale-100"
                 leave-to-class="opacity-0 scale-95"
             >
-                <div ref="modalContent" v-if="visible" :class="[modalClasses, attrs.class]" data-ui-modal-content>
+                <div ref="modalContent" v-if="visible" v-bind="restAttrs" :class="[modalClasses, attrs.class]" data-ui-modal-content>
                     <div class="relative space-y-3 rounded-xl overflow-auto max-h-[60vh] border border-gray-400/60 bg-white p-4 shadow-[0_1px_16px_-2px_rgba(63,63,71,0.2)] dark:border-none dark:bg-gray-800 dark:shadow-[0_1px_16px_-2px_rgba(0,0,0,.5)] dark:inset-shadow-2xs dark:inset-shadow-white/10">
                         <div v-if="!hasModalTitleComponent && (title || icon)" data-ui-modal-title class="flex items-center gap-2">
                             <Icon :name="icon" v-if="icon" class="size-4" />

From 299f37d1014cdf4d1f8c2d6d145766ddb1887516 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 19 Aug 2026 16:12:31 +0100
Subject: [PATCH 19/21] Branch review - Fix compact array add-row, empty-close
 dirtying the value, and the read-only trigger

---
 .../components/fieldtypes/ArrayFieldtype.vue  |  11 +-
 .../fieldtypes/ArrayFieldtype.test.js         | 103 ++++++++++++++++++
 2 files changed, 112 insertions(+), 2 deletions(-)
 create mode 100644 resources/js/tests/components/fieldtypes/ArrayFieldtype.test.js

diff --git a/resources/js/components/fieldtypes/ArrayFieldtype.vue b/resources/js/components/fieldtypes/ArrayFieldtype.vue
index 8fc8f579225..ae6ac2487c8 100644
--- a/resources/js/components/fieldtypes/ArrayFieldtype.vue
+++ b/resources/js/components/fieldtypes/ArrayFieldtype.vue
@@ -5,7 +5,6 @@
                 <ui-button
                     class="w-full min-w-0 shrink justify-between"
                     icon-append="chevron-down"
-                    :read-only="isReadOnly"
                     :aria-expanded="compactOpen"
                     aria-haspopup="dialog"
                 >
@@ -115,7 +114,7 @@
                     class="flex w-full items-center gap-2"
                     :class="{ 'mt-2': isCompact && valueCount }"
                 >
-                    <ui-button @click="addValue" :disabled="atMax" v-if="!isReadOnly && !isSingle && !isKeyed" :text="addButton" size="sm" :class="compactFooterButtonClass" />
+                    <ui-button @click="addValue()" :disabled="atMax" v-if="!isReadOnly && !isSingle && !isKeyed" :text="addButton" size="sm" :class="compactFooterButtonClass" />
                     <ui-button v-if="isCompact" class="ms-auto" :class="compactFooterButtonClass" size="sm" @click="setCompactOpen(false)">
                         <span class="st-text-trim-cap">{{ __('Close') }}</span>
                         <span class="ms-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded bg-gray-200/50 px-1 font-semibold uppercase text-[0.625rem] text-gray-600 dark:bg-gray-900 dark:text-gray-400/85">
@@ -283,6 +282,10 @@ export default {
 
     methods: {
         setCompactOpen(open) {
+            if (!open) {
+                this.data = this.data.filter((element) => element.key || element.value);
+            }
+
             this.compactOpen = open;
 
             if (open && !this.valueCount && !this.isReadOnly) {
@@ -304,6 +307,10 @@ export default {
         },
 
         addValue(index = this.data.length) {
+            if (typeof index !== 'number' || Number.isNaN(index)) {
+                index = this.data.length;
+            }
+
             this.data.splice(index, 0, this.newSortableValue());
             this.$nextTick(() => {
                 this.$refs.editor
diff --git a/resources/js/tests/components/fieldtypes/ArrayFieldtype.test.js b/resources/js/tests/components/fieldtypes/ArrayFieldtype.test.js
new file mode 100644
index 00000000000..5fe632bbf1c
--- /dev/null
+++ b/resources/js/tests/components/fieldtypes/ArrayFieldtype.test.js
@@ -0,0 +1,103 @@
+import { mount } from '@vue/test-utils';
+import { expect, test, vi } from 'vitest';
+import * as Globals from '@/bootstrap/globals';
+import ArrayFieldtype from '@/components/fieldtypes/ArrayFieldtype.vue';
+import { Button, Input } from '@/components/ui';
+
+Object.keys(Globals).forEach((fn) => (window[fn] = Globals[fn]));
+
+function mountField({ value = {}, config = {}, readOnly = false } = {}) {
+    return mount(ArrayFieldtype, {
+        props: {
+            value,
+            handle: 'attributes',
+            readOnly,
+            meta: { keys: {} },
+            config: { type: 'array', ...config },
+        },
+        global: {
+            stubs: {
+                'confirmation-modal': true,
+                Popover: {
+                    template: '<div><slot name="trigger" /><slot /></div>',
+                    props: ['open', 'align', 'side', 'dismissible'],
+                },
+                SortableList: {
+                    template: '<tbody><slot /></tbody>',
+                    props: ['modelValue', 'vertical', 'itemClass', 'handleClass', 'mirror'],
+                },
+            },
+            components: {
+                'ui-input': Input,
+                'ui-button': Button,
+            },
+        },
+    });
+}
+
+function addButton(wrapper) {
+    return wrapper.findAll('button').find((button) => button.text().includes('Add Row') || button.text().includes('Add Attribute'));
+}
+
+test('add button appends a row', async () => {
+    const wrapper = mountField({ value: { foo: 'bar' } });
+
+    await addButton(wrapper).trigger('click');
+
+    expect(wrapper.vm.data).toHaveLength(2);
+    expect(wrapper.vm.data[0].key).toBe('foo');
+    expect(wrapper.vm.data[1].key).toBeNull();
+    expect(wrapper.vm.data[1].value).toBeNull();
+});
+
+test('opening an empty compact field adds a placeholder row that is discarded on close', () => {
+    const wrapper = mountField({ config: { compact: true } });
+
+    wrapper.vm.setCompactOpen(true);
+    expect(wrapper.vm.data).toHaveLength(1);
+    expect(wrapper.vm.data[0].key).toBeNull();
+    expect(wrapper.vm.data[0].value).toBeNull();
+
+    wrapper.vm.setCompactOpen(false);
+    expect(wrapper.vm.data).toHaveLength(0);
+});
+
+test('closing compact keeps filled rows and drops leftover empty ones', () => {
+    const wrapper = mountField({
+        value: { foo: 'bar' },
+        config: { compact: true },
+    });
+
+    wrapper.vm.addValue();
+    expect(wrapper.vm.data).toHaveLength(2);
+
+    wrapper.vm.setCompactOpen(false);
+    expect(wrapper.vm.data).toHaveLength(1);
+    expect(wrapper.vm.data[0].key).toBe('foo');
+});
+
+test('read-only compact trigger can still be opened', () => {
+    const wrapper = mountField({
+        value: { foo: 'bar' },
+        config: { compact: true },
+        readOnly: true,
+    });
+
+    const trigger = wrapper.find('[aria-haspopup="dialog"]');
+    expect(trigger.exists()).toBe(true);
+    expect(trigger.attributes('disabled')).toBeUndefined();
+});
+
+test('enter adds a row below the current one', () => {
+    const wrapper = mountField({ value: { foo: 'bar' } });
+    const preventDefault = vi.fn();
+
+    wrapper.vm.addRowOnEnter({
+        target: { tagName: 'INPUT', closest: () => null },
+        preventDefault,
+    });
+
+    expect(wrapper.vm.data).toHaveLength(2);
+    expect(wrapper.vm.data[1].key).toBeNull();
+    expect(preventDefault).toHaveBeenCalled();
+});

From 72bb6eae6d87e1356b6ef9961d937ebd33b5c956 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 19 Aug 2026 16:14:49 +0100
Subject: [PATCH 20/21] Fix the popover appearing above the delete row
 confirmation modal

---
 resources/css/elements/base.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index 479287b66f3..484028df91a 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -154,8 +154,8 @@ code:not(pre *) {
 
 /* Override the hardcoded z-index of Reka's popper content wrapper under certain conditions. We can't use a direct descendant selector because things like a datepicker/combobox/popover is inside a portal, so instead we'll check to see if certain conditions are present. */
 body:has(
-    /* A modal is present */
-    [data-ui-modal-content],
+    /* A modal is present, but _not_ a confirmation modal */
+    [data-ui-modal-content]&:not([data-ui-confirmation-modal]),
     .stack,
     .live-preview,
     /* Fullscreen Code Editor fieldtype */

From ec1eaddfd0e1a7a708771b0b9a487909c27cd6ab Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 20 Aug 2026 16:15:08 +0100
Subject: [PATCH 21/21] Revert "Fix the popover appearing above the delete row
 confirmation modal"

This reverts commit 72bb6eae6d87e1356b6ef9961d937ebd33b5c956.
because it breaks a combobox in a popover, e.g. multisite > entry > change localization > which gets you a "Create Localization" modal with a combobox in it
---
 resources/css/elements/base.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index 484028df91a..479287b66f3 100644
--- a/resources/css/elements/base.css
+++ b/resources/css/elements/base.css
@@ -154,8 +154,8 @@ code:not(pre *) {
 
 /* Override the hardcoded z-index of Reka's popper content wrapper under certain conditions. We can't use a direct descendant selector because things like a datepicker/combobox/popover is inside a portal, so instead we'll check to see if certain conditions are present. */
 body:has(
-    /* A modal is present, but _not_ a confirmation modal */
-    [data-ui-modal-content]&:not([data-ui-confirmation-modal]),
+    /* A modal is present */
+    [data-ui-modal-content],
     .stack,
     .live-preview,
     /* Fullscreen Code Editor fieldtype */