Merge pull request #11857 from filamentphp/fix/scrollable-tenant-menu

Fix: scrollable tenant menu
filamentphp · Mar 23, 2024 · 2c5027a · 2c5027a
2 parents 8b779eb + 72b3fee
commit 2c5027a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 23 deletions.
diff --git a/docs-assets/app/public/css/filament/filament/app.css b/docs-assets/app/public/css/filament/filament/app.css
diff --git a/docs-assets/app/public/js/filament/support/support.js b/docs-assets/app/public/js/filament/support/support.js
diff --git a/packages/panels/dist/theme.css b/packages/panels/dist/theme.css
diff --git a/packages/panels/resources/views/components/tenant-menu.blade.php b/packages/panels/resources/views/components/tenant-menu.blade.php
@@ -31,6 +31,7 @@
 <x-filament::dropdown
     placement="bottom-start"
     teleport
+    size
     :attributes="
         \Filament\Support\prepare_inherited_attributes($attributes)
             ->class(['fi-tenant-menu'])

diff --git a/packages/support/resources/views/components/dropdown/index.blade.php b/packages/support/resources/views/components/dropdown/index.blade.php
@@ -3,13 +3,23 @@
     'offset' => 8,
     'placement' => null,
     'shift' => false,
+    'size' => false,
+    'availableHeight' => null,
+    'availableWidth' => null,
+    'sizePadding' => 16,
     'teleport' => false,
     'trigger' => null,
     'width' => null,
 ])
 
 @php
     use Filament\Support\Enums\MaxWidth;
+
+    $sizeConfig = collect([
+        'availableHeight' => $availableHeight,
+        'availableWidth' => $availableWidth,
+        'padding' => $sizePadding,
+    ])->filter()->toJson();
 @endphp
 
 <div
@@ -37,7 +47,7 @@
 
     <div
         x-cloak
-        x-float{{ $placement ? ".placement.{$placement}" : '' }}.flip{{ $shift ? '.shift' : '' }}{{ $teleport ? '.teleport' : '' }}{{ $offset ? '.offset' : '' }}="{ offset: {{ $offset }} }"
+        x-float{{ $placement ? ".placement.{$placement}" : '' }}{{ $size ? '.size' : '' }}.flip{{ $shift ? '.shift' : '' }}{{ $teleport ? '.teleport' : '' }}{{ $offset ? '.offset' : '' }}="{ offset: {{ $offset }}, {{ $size ? ('size: ' . $sizeConfig) : '' }} }"
         x-ref="panel"
         x-transition:enter-start="opacity-0"
         x-transition:leave-end="opacity-0"
@@ -48,21 +58,22 @@
         @class([
             'fi-dropdown-panel absolute z-10 w-screen divide-y divide-gray-100 rounded-lg bg-white shadow-lg ring-1 ring-gray-950/5 transition dark:divide-white/5 dark:bg-gray-900 dark:ring-white/10',
             match ($width) {
-                MaxWidth::ExtraSmall, 'xs' => 'max-w-xs',
-                MaxWidth::Small, 'sm' => 'max-w-sm',
-                MaxWidth::Medium, 'md' => 'max-w-md',
-                MaxWidth::Large, 'lg' => 'max-w-lg',
-                MaxWidth::ExtraLarge, 'xl' => 'max-w-xl',
-                MaxWidth::TwoExtraLarge, '2xl' => 'max-w-2xl',
-                MaxWidth::ThreeExtraLarge, '3xl' => 'max-w-3xl',
-                MaxWidth::FourExtraLarge, '4xl' => 'max-w-4xl',
-                MaxWidth::FiveExtraLarge, '5xl' => 'max-w-5xl',
-                MaxWidth::SixExtraLarge, '6xl' => 'max-w-6xl',
-                MaxWidth::SevenExtraLarge, '7xl' => 'max-w-7xl',
-                null => 'max-w-[14rem]',
+                // These max width classes need to be `!important` otherwise they will be usurped by the Floating UI "size" middleware.
+                MaxWidth::ExtraSmall, 'xs' => '!max-w-xs',
+                MaxWidth::Small, 'sm' => '!max-w-sm',
+                MaxWidth::Medium, 'md' => '!max-w-md',
+                MaxWidth::Large, 'lg' => '!max-w-lg',
+                MaxWidth::ExtraLarge, 'xl' => '!max-w-xl',
+                MaxWidth::TwoExtraLarge, '2xl' => '!max-w-2xl',
+                MaxWidth::ThreeExtraLarge, '3xl' => '!max-w-3xl',
+                MaxWidth::FourExtraLarge, '4xl' => '!max-w-4xl',
+                MaxWidth::FiveExtraLarge, '5xl' => '!max-w-5xl',
+                MaxWidth::SixExtraLarge, '6xl' => '!max-w-6xl',
+                MaxWidth::SevenExtraLarge, '7xl' => '!max-w-7xl',
+                null => '!max-w-[14rem]',
                 default => $width,
             },
-            'overflow-y-auto' => $maxHeight,
+            'overflow-y-auto' => $maxHeight || $size,
         ])
         @style([
             "max-height: {$maxHeight}" => $maxHeight,