[6.x] Don't reserve space when a field's display label is hidden (#14803)

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: jasonvarga

resources/css/components/fieldtypes/grid.css

@@ -7,10 +7,6 @@
         border-spacing: 0;
         table-layout: auto;
 
-        [data-ui-field-text] {
-            @apply sr-only;
-        }
-
         thead th {
             @apply sticky -top-2 table-cell z-(--z-index-above) border-b bg-gray-50 p-2 text-sm font-medium text-gray-900 dark:border-gray-700 dark:bg-gray-925 dark:text-gray-100;
             /* Prevent the sticky toolbar from hitting the very end of container, which causes it to overlap the container's border-radius */

resources/js/components/ui/Field.vue

@@ -52,25 +52,10 @@ const rootClasses = computed(() =>
             },
             inline: {
                 true: 'grid md:grid-cols-2 items-start px-4.5 py-4 gap-y-3 md:gap-y-0 md:gap-x-5!',
+                false: 'flex flex-col gap-2',
             },
             fullWidthSetting: {
-                true: 'md:grid-cols-1',
-            },
-        },
-    })({
-        ...props,
-    })),
-);
-
-const descriptionClasses = computed(() =>
-    twMerge(cva({
-        base: ['mb-2 -mt-0.5'],
-        variants: {
-            inline: {
-                true: 'mb-0',
-            },
-            fullWidthSetting: {
-                true: 'mb-3',
+                true: 'md:grid-cols-1 md:gap-y-3',
             },
         },
     })({
@@ -96,35 +81,30 @@ const hasErrors = computed(() => {
 
 <template>
     <div :class="[rootClasses, $attrs.class]" data-ui-input-group :data-ui-field-has-errors="hasErrors ? '' : null">
-        <div v-if="label || (instructions && !instructionsBelow) || $slots.label || $slots.actions">
+        <div
+            v-if="label || $slots.label || $slots.actions || (instructions && !instructionsBelow)"
+            class="flex flex-col gap-1.5"
+            data-ui-field-header
+        >
             <div
                 v-if="$slots.actions"
-                :class="[
-                    'flex items-center gap-x-1 mb-0',
-                    props.label || $slots.label ? 'justify-between' : 'justify-end',
-                ]"
-                data-ui-field-header
+                class="flex items-center gap-x-1"
+                :class="label || $slots.label ? 'justify-between' : 'justify-end'"
             >
                 <slot name="label">
                     <Label v-if="label" v-bind="labelProps" class="flex-1" />
                 </slot>
                 <slot name="actions" />
             </div>
-            <div
-                v-if="(!$slots.actions && (label || (instructions && !instructionsBelow) || $slots.label)) || ($slots.actions && instructions && !instructionsBelow)"
-                data-ui-field-text
-                :class="inline ? 'mb-0' : 'mb-2'"
-            >
-                <slot v-if="!$slots.actions" name="label">
-                    <Label v-if="label" v-bind="labelProps" class="flex-1" />
-                </slot>
-                <Description :text="instructions" v-if="instructions && !instructionsBelow" :class="descriptionClasses" />
-            </div>
+            <slot v-else name="label">
+                <Label v-if="label" v-bind="labelProps" />
+            </slot>
+            <Description :text="instructions" v-if="instructions && !instructionsBelow" />
         </div>
         <slot />
-        <div v-if="(instructions && instructionsBelow) || hasErrors">
-            <Description :text="instructions" v-if="instructions && instructionsBelow" class="mt-2" />
-            <ErrorMessage v-if="errors" v-for="(error, i) in errors" :key="i" :text="error" class="mt-2" />
+        <div v-if="(instructions && instructionsBelow) || hasErrors" class="flex flex-col gap-2">
+            <Description :text="instructions" v-if="instructions && instructionsBelow" />
+            <ErrorMessage v-if="errors" v-for="(error, i) in errors" :key="i" :text="error" />
         </div>
     </div>
 </template>

resources/js/components/ui/Label.vue

@@ -18,7 +18,7 @@ const props = defineProps({
 
 <template>
     <label
-        class="flex justify-between mb-1.5 text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
+        class="flex justify-between text-sm font-medium [&_button]:font-medium text-gray-925 select-none dark:text-gray-300 [&_button:has(svg)]:h-auto"
         data-ui-label
         :for="for"
     >

resources/js/components/ui/Publish/Field.vue

@@ -151,10 +151,13 @@ const shouldShowField = computed(() => {
 
 const shouldShowLabelText = computed(() => !props.config.hide_display);
 
+// Whether the label renders anything visible. When it doesn't, we avoid rendering
+// the field header entirely (so it doesn't reserve space) and instead attach a
+// screen-reader-only label to the control below.
 const shouldShowLabel = computed(
     () =>
         shouldShowLabelText.value || // Need to see the text
-        props.config.hide_display || // Need label for accessibility (visually hidden)
+        isRequired.value || // Need to see the required asterisk
         isLocked.value || // Need to see the avatar
         isSyncable.value, // Need to see the icon
 );
@@ -267,6 +270,7 @@ const fieldtypeComponentEvents = computed(() => ({
             <template #actions v-if="shouldShowFieldActions">
                 <FieldActions :actions="fieldActions" />
             </template>
+            <label v-if="!shouldShowLabel && config.hide_display" :for="fieldId" class="sr-only">{{ __(config.display) }}</label>
             <div class="text-xs text-red-600" v-if="!fieldtypeComponentExists && fieldtypeComponent !== 'spacer-fieldtype'">
                 Component <code v-text="fieldtypeComponent"></code> does not exist.
             </div>