Fix bulk action dropdown overflow

filamentphp · Feb 5, 2025 · 5653755 · 5653755
1 parent 15f0e82
commit 5653755
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 148 deletions.
diff --git a/docs-assets/app/public/css/filament/support/support.css b/docs-assets/app/public/css/filament/support/support.css
diff --git a/packages/actions/src/ActionGroup.php b/packages/actions/src/ActionGroup.php
@@ -398,7 +398,7 @@ class="fi-dropdown-trigger"
 
             <div
                 x-cloak
-                x-float.placement.<?= $this->getDropdownPlacement() ?? 'bottom-start' ?>.teleport.offset="{ offset: <?= $this->getDropdownOffset() ?? 8 ?> }"
+                x-float.placement.<?= $this->getDropdownPlacement() ?? 'bottom-start' ?>.offset="{ offset: <?= $this->getDropdownOffset() ?? 8 ?> }"
                 x-ref="panel"
                 x-transition:enter-start="fi-opacity-0"
                 x-transition:leave-end="fi-opacity-0"

diff --git a/packages/schemas/resources/views/schema.blade.php b/packages/schemas/resources/views/schema.blade.php
@@ -36,10 +36,6 @@ function (Component | Action | ActionGroup $component) use (&$hasVisibleComponen
 @endphp
 
 @if ((! $isDirectlyHidden()) && $hasVisibleComponents)
-    @if ($isRoot)
-        {!! '<div class="fi-grid-ctn">' !!}
-    @endif
-
     <div
         {{
             $getExtraAttributeBag()
@@ -166,8 +162,4 @@ function (Component | Action | ActionGroup $component) use (&$hasVisibleComponen
             @endif
         @endforeach
     </div>
-
-    @if ($isRoot)
-        {!! '</div>' !!}
-    @endif
 @endif
diff --git a/packages/support/dist/index.css b/packages/support/dist/index.css
diff --git a/packages/support/resources/css/components/dropdown/index.css b/packages/support/resources/css/components/dropdown/index.css
@@ -1,9 +1,4 @@
 .fi-dropdown {
-    @supports (container-type: inline-size) {
-        /* https://github.com/floating-ui/floating-ui/issues/3067 */
-        contain: layout;
-    }
-
     & .fi-dropdown-trigger {
         @apply flex cursor-pointer;
     }

diff --git a/packages/support/resources/css/components/tables/container.css b/packages/support/resources/css/components/tables/container.css
@@ -10,9 +10,15 @@
     }
 
     & .fi-ta-header {
-        @apply flex flex-col gap-3 p-4;
+        @apply flex flex-col gap-3 p-4 sm:px-6;
 
         &.fi-ta-header-adaptive-actions-position {
+            @apply sm:flex-row sm:items-center;
+
+            & .fi-ta-actions {
+                @apply sm:ms-auto;
+            }
+
             &:not(:has(.fi-ta-header-heading)) {
                 &:not(:has(.fi-ta-header-description)) {
                     & .fi-ta-actions {
@@ -32,7 +38,7 @@
     }
 
     & .fi-ta-header-toolbar {
-        @apply flex items-center justify-between gap-x-4 px-4 py-3;
+        @apply flex items-center justify-between gap-x-4 px-4 py-3 sm:px-6;
 
         & > * {
             @apply flex items-center gap-x-4;
@@ -48,6 +54,10 @@
 
         & .fi-ta-grouping-settings {
             & .fi-dropdown {
+                &.sm\:fi-hidden {
+                    @apply sm:hidden;
+                }
+
                 & .fi-ta-grouping-settings-fields {
                     @apply grid gap-y-6 p-6;
 
@@ -58,7 +68,7 @@
             }
 
             & > .fi-ta-grouping-settings-fields {
-                @apply hidden items-center gap-x-3;
+                @apply hidden items-center gap-x-3 sm:flex;
             }
         }
 
@@ -83,7 +93,7 @@
         @apply grid gap-y-4;
 
         &.fi-ta-filters-below-content {
-            @apply p-4;
+            @apply p-4 sm:px-6;
         }
 
         & .fi-ta-filters-header {
@@ -100,7 +110,7 @@
     }
 
     & .fi-ta-filters-above-content-ctn {
-        @apply grid px-4 py-4;
+        @apply grid px-4 py-4 sm:px-6;
 
         & .fi-ta-filters-trigger-action-ctn {
             @apply ms-auto;
@@ -120,15 +130,15 @@
     }
 
     & .fi-ta-reorder-indicator {
-        @apply flex gap-x-3 bg-gray-50 px-3 py-1.5 text-sm leading-6 font-medium text-gray-700 dark:bg-white/5 dark:text-gray-200;
+        @apply flex gap-x-3 bg-gray-50 px-3 py-1.5 text-sm leading-6 font-medium text-gray-700 sm:px-6 dark:bg-white/5 dark:text-gray-200;
 
         & .fi-loading-indicator {
             @apply text-gray-400 dark:text-gray-500;
         }
     }
 
     & .fi-ta-selection-indicator {
-        @apply flex flex-col justify-between gap-y-1 bg-gray-50 px-3 py-2 dark:bg-white/5;
+        @apply flex flex-col justify-between gap-y-1 bg-gray-50 px-3 py-2 sm:flex-row sm:items-center sm:px-6 sm:py-1.5 dark:bg-white/5;
 
         & .fi-loading-indicator {
             @apply text-gray-400 dark:text-gray-500;
@@ -152,10 +162,10 @@
     }
 
     & .fi-ta-filter-indicators {
-        @apply flex items-start justify-between gap-x-3 bg-gray-50 px-3 py-1.5 dark:bg-white/5;
+        @apply flex items-start justify-between gap-x-3 bg-gray-50 px-3 py-1.5 sm:px-6 dark:bg-white/5;
 
         & > :nth-child(1) {
-            @apply flex flex-col gap-x-3 gap-y-1;
+            @apply flex flex-col gap-x-3 gap-y-1 sm:flex-row;
 
             & .fi-ta-filter-indicators-label {
                 @apply text-sm leading-6 font-medium whitespace-nowrap text-gray-700 dark:text-gray-200;
@@ -172,132 +182,10 @@
     }
 
     & .fi-pagination {
-        @apply px-3 py-3;
+        @apply px-3 py-3 sm:px-6;
     }
 
     & .fi-ta-table-loading-spacer {
         @apply h-32;
     }
-
-    @supports (container-type: inline-size) {
-        @apply @container;
-
-        & .fi-ta-header {
-            @apply @md:px-6;
-
-            &.fi-ta-header-adaptive-actions-position {
-                @apply @md:flex-row @md:items-center;
-
-                & .fi-ta-actions {
-                    @apply @md:ms-auto;
-                }
-            }
-        }
-
-        & .fi-ta-header-toolbar {
-            @apply @md:px-6;
-
-            & .fi-ta-grouping-settings {
-                & .fi-dropdown {
-                    &.sm\:fi-hidden {
-                        @apply @md:hidden;
-                    }
-                }
-
-                & > .fi-ta-grouping-settings-fields {
-                    @apply @md:flex;
-                }
-            }
-        }
-
-        & .fi-ta-filters {
-            &.fi-ta-filters-below-content {
-                @apply @md:px-6;
-            }
-        }
-
-        & .fi-ta-filters-above-content-ctn {
-            @apply @md:px-6;
-        }
-
-        & .fi-ta-reorder-indicator {
-            @apply @md:px-6;
-        }
-
-        & .fi-ta-selection-indicator {
-            @apply @md:flex-row @md:items-center @md:px-6 @md:py-1.5;
-        }
-
-        & .fi-ta-filter-indicators {
-            @apply @md:px-6;
-
-            & > :nth-child(1) {
-                @apply @md:flex-row;
-            }
-        }
-
-        & .fi-pagination {
-            @apply @md:px-6;
-        }
-    }
-
-    @supports not (container-type: inline-size) {
-        & .fi-ta-header {
-            @apply sm:px-6;
-
-            &.fi-ta-header-adaptive-actions-position {
-                @apply sm:flex-row sm:items-center;
-
-                & .fi-ta-actions {
-                    @apply sm:ms-auto;
-                }
-            }
-        }
-
-        & .fi-ta-header-toolbar {
-            @apply sm:px-6;
-
-            & .fi-ta-grouping-settings {
-                & .fi-dropdown {
-                    &.sm\:fi-hidden {
-                        @apply sm:hidden;
-                    }
-                }
-
-                & > .fi-ta-grouping-settings-fields {
-                    @apply sm:flex;
-                }
-            }
-        }
-
-        & .fi-ta-filters {
-            &.fi-ta-filters-below-content {
-                @apply sm:px-6;
-            }
-        }
-
-        & .fi-ta-filters-above-content-ctn {
-            @apply sm:px-6;
-        }
-
-        & .fi-ta-reorder-indicator {
-            @apply sm:px-6;
-        }
-
-        & .fi-ta-selection-indicator {
-            @apply sm:flex-row sm:items-center sm:px-6 sm:py-1.5;
-        }
-
-        & .fi-ta-filter-indicators {
-            @apply sm:px-6;
-
-            & > :nth-child(1) {
-                @apply sm:flex-row;
-            }
-        }
-
-        & .fi-pagination {
-            @apply sm:px-6;
-        }
-    }
 }