diff --git a/packages/forms/resources/views/components/color-picker.blade.php b/packages/forms/resources/views/components/color-picker.blade.php
index f763912c00..53c8e7f060 100644
--- a/packages/forms/resources/views/components/color-picker.blade.php
+++ b/packages/forms/resources/views/components/color-picker.blade.php
@@ -91,7 +91,10 @@
                 wire:ignore.self
                 wire:key="{{ $this->getId() }}.{{ $statePath }}.{{ $field::class }}.panel"
                 x-cloak
-                x-float.placement.bottom-start.offset.flip.shift="{ offset: 8 }"
+                x-float.placement.bottom-start.offset.autoPlacement.shift="{
+                    offset: 8,
+                    autoPlacement: { allowedPlacements: ['top', 'bottom'] },
+                }"
                 x-ref="panel"
                 class="fi-fo-color-picker-panel absolute z-10 hidden rounded-lg shadow-lg"
             >
diff --git a/packages/forms/resources/views/components/date-time-picker.blade.php b/packages/forms/resources/views/components/date-time-picker.blade.php
index 7cbeb26af5..21a6d1ac2b 100644
--- a/packages/forms/resources/views/components/date-time-picker.blade.php
+++ b/packages/forms/resources/views/components/date-time-picker.blade.php
@@ -145,7 +145,10 @@
                 <div
                     x-ref="panel"
                     x-cloak
-                    x-float.placement.bottom-start.offset.flip.shift="{ offset: 8 }"
+                    x-float.placement.bottom-start.offset.autoPlacement.shift="{
+                        offset: 8,
+                        autoPlacement: { allowedPlacements: ['top', 'bottom'] },
+                    }"
                     wire:ignore
                     wire:key="{{ $this->getId() }}.{{ $statePath }}.{{ $field::class }}.panel"
                     @class([
diff --git a/packages/support/resources/views/components/dropdown/index.blade.php b/packages/support/resources/views/components/dropdown/index.blade.php
index f7fdf8ea85..224995bfa4 100644
--- a/packages/support/resources/views/components/dropdown/index.blade.php
+++ b/packages/support/resources/views/components/dropdown/index.blade.php
@@ -37,7 +37,10 @@
 
     <div
         x-cloak
-        x-float{{ $placement ? ".placement.{$placement}" : '' }}.flip{{ $shift ? '.shift' : '' }}{{ $teleport ? '.teleport' : '' }}{{ $offset ? '.offset' : '' }}="{ offset: {{ $offset }} }"
+        x-float{{ $placement ? ".placement.{$placement}" : '' }}.autoPlacement{{ $shift ? '.shift' : '' }}{{ $teleport ? '.teleport' : '' }}{{ $offset ? '.offset' : '' }}="{
+            offset: {{ $offset }},
+            autoPlacement: { allowedPlacements: ['top', 'bottom'] },
+        }"
         x-ref="panel"
         x-transition:enter-start="opacity-0"
         x-transition:leave-end="opacity-0"