cs & slight tweaks for better responsivity

filamentphp · Feb 5, 2025 · 067b865 · 067b865
1 parent 56d33cd
commit 067b865
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 39 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/docs-assets/app/public/js/filament/support/support.js b/docs-assets/app/public/js/filament/support/support.js
diff --git a/packages/support/dist/index.css b/packages/support/dist/index.css
diff --git a/packages/support/dist/index.js b/packages/support/dist/index.js
diff --git a/packages/support/resources/css/components/modal.css b/packages/support/resources/css/components/modal.css
@@ -136,7 +136,7 @@
     }
 
     & .fi-modal-window {
-        @apply pointer-events-auto relative row-start-2 flex w-full cursor-default flex-col bg-white ring-1 shadow-xl ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+        @apply @container pointer-events-auto relative row-start-2 flex w-full cursor-default flex-col bg-white ring-1 shadow-xl ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
 
         &.fi-align-start,
         &.fi-align-left {
@@ -333,7 +333,7 @@
             @apply px-6;
 
             & .fi-modal-footer-actions {
-                @apply flex flex-col-reverse sm:grid sm:grid-cols-[repeat(auto-fit,minmax(0,1fr))];
+                @apply flex flex-col-reverse;
             }
         }
 
@@ -360,6 +360,28 @@
             }
         }
     }
+
+    @supports (container-type: inline-size) {
+        @apply @container;
+
+        & .fi-modal-footer {
+            &.fi-align-center {
+                & .fi-modal-footer-actions {
+                    @apply @sm:grid @sm:grid-cols-[repeat(auto-fit,minmax(0,1fr))];
+                }
+            }
+        }
+    }
+
+    @supports not (container-type: inline-size) {
+        & .fi-modal-footer {
+            &.fi-align-center {
+                & .fi-modal-footer-actions {
+                    @apply sm:grid sm:grid-cols-[repeat(auto-fit,minmax(0,1fr))];
+                }
+            }
+        }
+    }
 }
 
 & .fi-modal-trigger {

diff --git a/packages/support/resources/css/components/pagination.css b/packages/support/resources/css/components/pagination.css
@@ -83,35 +83,31 @@
     }
 
     @supports (container-type: inline-size) {
-        @apply contain-inline-size;
+        @apply @container;
 
-        @container (min-width: 28rem) {
-            & .fi-pagination-records-per-page-select {
-                &:not(.fi-compact) {
-                    @apply inline;
-                }
+        & .fi-pagination-records-per-page-select {
+            &:not(.fi-compact) {
+                @apply @md:inline;
+            }
 
-                &.fi-compact {
-                    @apply hidden;
-                }
+            &.fi-compact {
+                @apply @md:hidden;
             }
         }
 
-        @container (min-width: 56rem) {
-            &:not(.fi-simple) {
-                & .fi-pagination-previous-btn,
-                & .fi-pagination-next-btn {
-                    @apply hidden;
-                }
+        &:not(.fi-simple) {
+            & .fi-pagination-previous-btn,
+            & .fi-pagination-next-btn {
+                @apply @4xl:hidden;
             }
+        }
 
-            & .fi-pagination-overview {
-                @apply inline;
-            }
+        & .fi-pagination-overview {
+            @apply @4xl:inline;
+        }
 
-            & .fi-pagination-items {
-                @apply flex;
-            }
+        & .fi-pagination-items {
+            @apply @4xl:flex;
         }
     }
 

diff --git a/packages/support/src/SupportServiceProvider.php b/packages/support/src/SupportServiceProvider.php
@@ -227,15 +227,15 @@ public function packageBooted(): void
                 ])
                 ->style([
                     ...array_map(
-                        fn (string $breakpoint, int | string $span): string => "--col-span-" . str_replace('@', 'c', $breakpoint) . ": " . match ($span) {
+                        fn (string $breakpoint, int | string $span): string => '--col-span-' . str_replace('@', 'c', $breakpoint) . ': ' . match ($span) {
                             'full' => '1 / -1',
                             default => "span {$span} / span {$span}",
                         },
                         array_keys($span),
                         array_values($span),
                     ),
                     ...array_map(
-                        fn (string $breakpoint, int $start): string => "--col-start-" . str_replace('@', 'c', $breakpoint) . ": " . $start,
+                        fn (string $breakpoint, int $start): string => '--col-start-' . str_replace('@', 'c', $breakpoint) . ': ' . $start,
                         array_keys($start),
                         array_values($start),
                     ),