From 206cde4264b2740bce25cfd9980888e8a940be77 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Wed, 5 Aug 2026 09:36:29 +0100
Subject: [PATCH] prevent blueprint field rows from overflowing

fixes #15117

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../js/components/blueprints/RegularField.vue | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/resources/js/components/blueprints/RegularField.vue b/resources/js/components/blueprints/RegularField.vue
index cd0de30e4e..fa3e0201fd 100644
--- a/resources/js/components/blueprints/RegularField.vue
+++ b/resources/js/components/blueprints/RegularField.vue
@@ -1,21 +1,21 @@
 <template>
-    <ui-card class="py-0.75! px-2! field-grid-item blueprint-section-field" :class="widthClass">
+    <ui-card class="py-0.75! px-2! field-grid-item blueprint-section-field @container" :class="widthClass">
         <div class="flex items-center gap-2">
-            <ui-icon name="handles" class="blueprint-drag-handle size-4 cursor-grab text-gray-300 dark:text-gray-600" />
-            <div class="flex flex-1 items-center justify-between">
-                <div class="flex flex-1 items-center py-2">
+            <ui-icon name="handles" class="blueprint-drag-handle size-4 shrink-0 cursor-grab text-gray-300 dark:text-gray-600" />
+            <div class="flex min-w-0 flex-1 items-center justify-between gap-2">
+                <div class="flex min-w-0 flex-1 items-center py-2">
                     <ui-icon
-                        class="size-4 me-2 text-gray-500 dark:text-gray-400"
+                        class="size-4 shrink-0 me-2 text-gray-500 dark:text-gray-400"
                         :name="field.icon"
                         v-tooltip="tooltipText"
                     />
-                    <div class="flex items-center gap-2">
-                        <button class="cursor-pointer overflow-hidden text-ellipsis text-sm hover:text-ui-accent-text text-start" type="button" v-text="__(labelText)" @click="$emit('edit')" />
-                        <ui-icon v-if="isReferenceField" name="link" class="text-gray-400" />
-                        <span v-if="isReferenceField" class="text-gray-500 font-mono text-2xs cursor-help" v-text="__('Field')" v-tooltip="__('Imported from: :reference', { reference: field.field_reference })" />
+                    <div class="flex min-w-0 items-center gap-2">
+                        <button class="cursor-pointer truncate text-sm hover:text-ui-accent-text text-start" type="button" v-text="__(labelText)" @click="$emit('edit')" />
+                        <ui-icon v-if="isReferenceField" name="link" class="shrink-0 text-gray-400 cursor-help" v-tooltip="referenceTooltipText" />
+                        <span v-if="isReferenceField" class="shrink-0 text-gray-500 font-mono text-2xs cursor-help @max-2xs:hidden" v-text="__('Field')" v-tooltip="referenceTooltipText" />
                     </div>
                 </div>
-                <div class="flex items-center gap-2">
+                <div class="flex shrink-0 items-center gap-2">
                     <width-selector v-if="!isHidden" v-model="width" />
 
                     <div
@@ -97,6 +97,10 @@ export default {
             return !this.isReferenceField;
         },
 
+        referenceTooltipText() {
+            return __('Imported from: :reference', { reference: this.field.field_reference });
+        },
+
         fieldConfig() {
             return Object.assign({}, this.field.config, {
                 handle: this.field.handle,