fix: table header height consistency and button loading height (#20249)

* fix: table header height consistency and button loading height

* fix button loading height with `align-middle` and scope header action margins to `sm`

* apply header action negative margins to the container so wrapped rows keep their gap

* remove vestigial `-mt-px` from table header so its optics match a section header

* keep the table heading visible while reordering, only hiding the header actions

* remove reordering header test

* pin link and badge baselines to their labels so loading indicators do not shift them in inline flow

* wrap the link label in optimized rendering paths to match the Blade component

---------

Co-authored-by: Dan Harrin <git@danharrin.com>

Author: hamdyelbatal122

packages/actions/src/Action.php

@@ -890,13 +890,13 @@ protected function toOptimizedLinkHtml(): string
             $iconHtml = $icon ? generate_icon_html($icon, size: IconSize::Small)?->toHtml() : '';
             $hrefHtml = generate_href_html($url)->toHtml();
 
-            return "<a {$hrefHtml}{$wireKeyAttribute} class=\"{$classString}\"{$styleString}>{$iconHtml}{$label}</a>";
+            return "<a {$hrefHtml}{$wireKeyAttribute} class=\"{$classString}\"{$styleString}>{$iconHtml}<span class=\"fi-link-label\">{$label}</span></a>";
         }
 
         $handler = $this->getLivewireClickHandler();
 
         if (blank($handler)) {
-            return "<span{$wireKeyAttribute} class=\"{$classString}\"{$styleString}>{$label}</span>";
+            return "<span{$wireKeyAttribute} class=\"{$classString}\"{$styleString}><span class=\"fi-link-label\">{$label}</span></span>";
         }
 
         $loadingDelay = config('filament.livewire_loading_delay', 'default');
@@ -921,7 +921,7 @@ protected function toOptimizedLinkHtml(): string
         // Match `ComponentAttributeBag::__toString()` attribute escaping (only `"` → `\"`).
         $handler = str_replace('"', '\\"', $handler);
 
-        return "<button type=\"button\" wire:loading.attr=\"disabled\" wire:click=\"{$handler}\"{$wireKeyAttribute} class=\"{$classString}\"{$styleString}>{$iconHtml}{$loadingHtml}{$label}</button>";
+        return "<button type=\"button\" wire:loading.attr=\"disabled\" wire:click=\"{$handler}\"{$wireKeyAttribute} class=\"{$classString}\"{$styleString}>{$iconHtml}{$loadingHtml}<span class=\"fi-link-label\">{$label}</span></button>";
     }
 
     protected function canRenderOptimizedGrouped(): bool

packages/panels/dist/theme.css

@@ -14,8 +14,9 @@
         }
     }
 
+    /* Pinning the badge's baseline to the label keeps it aligned with surrounding text, even when the loading indicator is the first flex item. */
     & .fi-badge-label-ctn {
-        @apply grid;
+        @apply grid self-baseline;
     }
 
     & .fi-badge-label {

packages/support/resources/css/components/badge.css

@@ -1,5 +1,6 @@
 .fi-btn {
-    @apply relative inline-grid grid-flow-col items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium transition duration-75 outline-none;
+    /* `align-middle` keeps the button's placement in inline flow independent of its internal baseline, which shifts when the loading indicator is the first grid item. */
+    @apply relative inline-grid grid-flow-col items-center justify-center gap-1.5 rounded-lg px-3 py-2 align-middle text-sm font-medium transition duration-75 outline-none;
 
     &.fi-force-enabled,
     &:not(.fi-disabled):not([disabled]) {

packages/support/resources/css/components/button.css

@@ -1,6 +1,11 @@
 .fi-link {
     @apply relative inline-flex items-center justify-center gap-1.5 font-medium text-gray-700 outline-none dark:text-gray-200;
 
+    /* Pinning the link's baseline to the label keeps it aligned with surrounding text, even when the loading indicator is the first flex item. */
+    & > .fi-link-label {
+        @apply self-baseline;
+    }
+
     &.fi-force-enabled,
     &:not(.fi-disabled):not([disabled]) {
         @apply hover:underline focus-visible:rounded-sm focus-visible:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current;

packages/support/resources/css/components/link.css

@@ -187,26 +187,25 @@
                 @apply leading-6;
             }
 
-            & .fi-btn:not(.fi-section-header-after-ctn .fi-dropdown-panel *) {
-                &.fi-size-xs {
-                    @apply -my-0.5;
-                }
+            /* The negative margins let the buttons overhang the header's vertical padding, so a header with actions matches the height of one without them. They are applied to the container instead of the buttons so wrapped rows of actions keep their gap, laddered so the largest button size present wins. */
+            &:has(.fi-btn.fi-size-xs:not(.fi-dropdown-panel *)) {
+                @apply -my-0.5;
+            }
 
-                &.fi-size-sm {
-                    @apply -my-1;
-                }
+            &:has(.fi-btn.fi-size-sm:not(.fi-dropdown-panel *)) {
+                @apply -my-1;
+            }
 
-                &.fi-size-md {
-                    @apply -my-1.5;
-                }
+            &:has(.fi-btn.fi-size-md:not(.fi-dropdown-panel *)) {
+                @apply -my-1.5;
+            }
 
-                &.fi-size-lg {
-                    @apply -my-2;
-                }
+            &:has(.fi-btn.fi-size-lg:not(.fi-dropdown-panel *)) {
+                @apply -my-2;
+            }
 
-                &.fi-size-xl {
-                    @apply -my-2.5;
-                }
+            &:has(.fi-btn.fi-size-xl:not(.fi-dropdown-panel *)) {
+                @apply -my-2.5;
             }
         }
 

packages/support/resources/css/components/section.css

@@ -140,7 +140,9 @@
     @endif
 
     @if (! $labelSrOnly)
-        {{ $slot }}
+        <span class="fi-link-label">
+            {{ $slot }}
+        </span>
     @endif
 
     @if ($iconPosition === IconPosition::After)

packages/support/resources/views/components/link.blade.php

@@ -169,7 +169,9 @@ public function generateLinkHtml(
             <?php } ?>
 
             <?php if (! $isLabelSrOnly) { ?>
-                <?= e($label) ?>
+                <span class="fi-link-label">
+                    <?= e($label) ?>
+                </span>
             <?php } ?>
 
             <?php if ($iconPosition === IconPosition::After) { ?>

packages/support/src/View/Concerns/CanGenerateLinkHtml.php

@@ -9,10 +9,6 @@
         @apply animate-pulse;
     }
 
-    & .fi-ta-header-ctn {
-        @apply -mt-px;
-    }
-
     & .fi-ta-header {
         @apply flex flex-col gap-3 border-b border-gray-200 p-4 sm:px-6 dark:border-white/10;
 
@@ -32,6 +28,29 @@
             }
         }
 
+        & .fi-ta-actions {
+            /* The negative margins let the buttons overhang the header's vertical padding, so a header with actions matches the height of one without them. They are applied to the container instead of the buttons so wrapped rows of actions keep their gap, laddered so the largest button size present wins, and scoped to `sm` since the header stacks vertically below it. */
+            &:has(.fi-btn.fi-size-xs:not(.fi-dropdown-panel *)) {
+                @apply sm:-my-0.5;
+            }
+
+            &:has(.fi-btn.fi-size-sm:not(.fi-dropdown-panel *)) {
+                @apply sm:-my-1;
+            }
+
+            &:has(.fi-btn.fi-size-md:not(.fi-dropdown-panel *)) {
+                @apply sm:-my-1.5;
+            }
+
+            &:has(.fi-btn.fi-size-lg:not(.fi-dropdown-panel *)) {
+                @apply sm:-my-2;
+            }
+
+            &:has(.fi-btn.fi-size-xl:not(.fi-dropdown-panel *)) {
+                @apply sm:-my-2.5;
+            }
+        }
+
         & .fi-ta-header-heading {
             @apply text-base leading-6 font-semibold text-gray-950 dark:text-white;
         }

packages/tables/resources/css/container.css

@@ -272,11 +272,11 @@ class="fi-ta-header-ctn"
 
                 @if ($header)
                     {{ $header }}
-                @elseif (($heading || $description || $headerActions) && ! $isReordering)
+                @elseif ($heading || $description || ($headerActions && (! $isReordering)))
                     <div
                         @class([
                             'fi-ta-header',
-                            'fi-ta-header-adaptive-actions-position' => $headerActions && ($headerActionsPosition === HeaderActionsPosition::Adaptive),
+                            'fi-ta-header-adaptive-actions-position' => $headerActions && (! $isReordering) && ($headerActionsPosition === HeaderActionsPosition::Adaptive),
                         ])
                     >
                         @if ($heading || $description)