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 5c4184576d1..f8706ba4f40 100644
--- a/resources/js/components/fieldtypes/ArrayFieldtype.vue
+++ b/resources/js/components/fieldtypes/ArrayFieldtype.vue
@@ -1,99 +1,129 @@
 <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>
+                <ui-button
+                    class="w-full min-w-0 shrink justify-between"
+                    icon-append="chevron-down"
+                    :aria-expanded="compactOpen"
+                    aria-haspopup="dialog"
                 >
-                    <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 font-normal"
+                        :class="{ 'text-gray-500 dark:text-gray-400': !hasCompactValues }"
+                    >
+                        {{ compactTriggerText }}
+                    </span>
+                </ui-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" @keydown.enter="addRowOnEnter">
+                <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
+                    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" :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
+                        </span>
+                    </ui-button>
+                </div>
+            </div>
+        </component>
 
         <confirmation-modal
             :open="deleting !== false"
@@ -110,7 +140,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 +149,7 @@ export default {
     components: {
         SortableList,
         Button,
+        Popover,
     },
 
     setup() {
@@ -135,6 +166,7 @@ export default {
             data: this.objectToSortable(this.value || []),
             selectedKey,
             deleting: false,
+            compactOpen: false,
         };
     },
 
@@ -169,6 +201,28 @@ 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,
+                excludeZManipulation: true,
+                open: this.compactOpen,
+                'onUpdate:open': this.setCompactOpen,
+            };
+        },
+
         keyedData() {
             return this.data.filter((element) => this.keys.hasOwnProperty(element.key));
         },
@@ -197,6 +251,25 @@ 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);
+        },
+
+        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 +282,42 @@ export default {
     },
 
     methods: {
-        addValue() {
-            this.data.push(this.newSortableValue());
+        setCompactOpen(open) {
+            if (!open) {
+                this.data = this.data.filter((element) => element.key || element.value);
+            }
+
+            this.compactOpen = open;
+
+            if (open && !this.valueCount && !this.isReadOnly) {
+                this.addValue();
+            }
+        },
+
+        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) {
+            if (typeof index !== 'number' || Number.isNaN(index)) {
+                index = this.data.length;
+            }
+
+            this.data.splice(index, 0, this.newSortableValue());
             this.$nextTick(() => {
-                this.$el.querySelector('tr:last-child input').focus();
+                this.$refs.editor
+                    ?.querySelectorAll('tr.sortable-row')[index]
+                    ?.querySelector('input')
+                    ?.focus();
             });
         },
 
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" />
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();
+});
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'),
+                    ],
                 ],
             ],
             [
diff --git a/src/Sites/Sites.php b/src/Sites/Sites.php
index d7fc9498b80..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,
                 ],
             ],
         ];