From e93b6bdd81339a00f9a416f6c0f5cb84e41e13e3 Mon Sep 17 00:00:00 2001
From: Adam Weston <awcodes1@gmail.com>
Date: Tue, 6 Feb 2024 16:12:06 -0500
Subject: [PATCH] Fix: Breakpoint styling

---
 resources/css/plugin.css                      | 172 ++++++++++++------
 .../views/components/table-repeater.blade.php |   8 +-
 2 files changed, 125 insertions(+), 55 deletions(-)

diff --git a/resources/css/plugin.css b/resources/css/plugin.css
index 8f2b9e0..5c38154 100644
--- a/resources/css/plugin.css
+++ b/resources/css/plugin.css
@@ -3,95 +3,145 @@
 }
 
 .table-repeater-column.has-hidden-label .fi-fo-field-wrp > label {
-    @apply not-sr-only text-sm !mb-2 block md:sr-only;
+    @apply sr-only text-sm !mb-2 block;
 }
 
-@media (min-width: theme('screens.sm')) {
-    .table-repeater-component.break-point-sm.streamlined {
-        .fi-input-wrp,
-        .fi-fo-file-upload .filepond--root {
-            @apply ring-0 bg-transparent shadow-none;
+@media (min-width: calc(theme('screens.sm') + 1px)) {
+    .table-repeater-component.break-point-sm {
+        &.streamlined {
+            .fi-input-wrp,
+            .fi-fo-file-upload .filepond--root {
+                @apply ring-0 bg-transparent shadow-none;
+            }
+
+            .fi-fo-field-wrp:has(.fi-fo-checkbox-list),
+            .fi-fo-field-wrp:has(.fi-fo-radio) {
+                @apply py-2 px-3;
+            }
+
+            .fi-fo-field-wrp:has(.fi-fo-toggle) {
+                @apply inline-block mt-1;
+            }
         }
 
-        .fi-fo-field-wrp:has(.fi-fo-checkbox-list),
-        .fi-fo-field-wrp:has(.fi-fo-radio) {
-            @apply py-2 px-3;
+        .table-repeater-row {
+            @apply divide-x divide-gray-950/5 dark:divide-white/20;
         }
 
-        .fi-fo-field-wrp:has(.fi-fo-toggle) {
-            @apply inline-block mt-1;
+        .table-repeater-row-actions {
+            @apply justify-center;
         }
     }
 }
 
-@media (min-width: theme('screens.md')) {
-    .table-repeater-component.break-point-md.streamlined {
-        .fi-input-wrp,
-        .fi-fo-file-upload .filepond--root {
-            @apply ring-0 bg-transparent shadow-none;
+@media (min-width: calc(theme('screens.md') + 1px)) {
+    .table-repeater-component.break-point-md {
+        &.streamlined {
+            .fi-input-wrp,
+            .fi-fo-file-upload .filepond--root {
+                @apply ring-0 bg-transparent shadow-none;
+            }
+
+            .fi-fo-field-wrp:has(.fi-fo-checkbox-list),
+            .fi-fo-field-wrp:has(.fi-fo-radio) {
+                @apply py-2 px-3;
+            }
+
+            .fi-fo-field-wrp:has(.fi-fo-toggle) {
+                @apply inline-block mt-1;
+            }
         }
 
-        .fi-fo-field-wrp:has(.fi-fo-checkbox-list),
-        .fi-fo-field-wrp:has(.fi-fo-radio) {
-            @apply py-2 px-3;
+        .table-repeater-row {
+            @apply divide-x divide-gray-950/5 dark:divide-white/20;
         }
 
-        .fi-fo-field-wrp:has(.fi-fo-toggle) {
-            @apply inline-block mt-1;
+        .table-repeater-row-actions {
+            @apply justify-center;
         }
     }
 }
 
-@media (min-width: theme('screens.lg')) {
-    .table-repeater-component.break-point-lg.streamlined {
-        .fi-input-wrp,
-        .fi-fo-file-upload .filepond--root {
-            @apply ring-0 bg-transparent shadow-none;
+@media (min-width: calc(theme('screens.lg') + 1px)) {
+    .table-repeater-component.break-point-lg {
+        &.streamlined {
+            .fi-input-wrp,
+            .fi-fo-file-upload .filepond--root {
+                @apply ring-0 bg-transparent shadow-none;
+            }
+
+            .fi-fo-field-wrp:has(.fi-fo-checkbox-list),
+            .fi-fo-field-wrp:has(.fi-fo-radio) {
+                @apply py-2 px-3;
+            }
+
+            .fi-fo-field-wrp:has(.fi-fo-toggle) {
+                @apply inline-block mt-1;
+            }
         }
 
-        .fi-fo-field-wrp:has(.fi-fo-checkbox-list),
-        .fi-fo-field-wrp:has(.fi-fo-radio) {
-            @apply py-2 px-3;
+        .table-repeater-row {
+            @apply divide-x divide-gray-950/5 dark:divide-white/20;
         }
 
-        .fi-fo-field-wrp:has(.fi-fo-toggle) {
-            @apply inline-block mt-1;
+        .table-repeater-row-actions {
+            @apply justify-center;
         }
     }
 }
 
-@media (min-width: theme('screens.xl')) {
-    .table-repeater-component.break-point-xl.streamlined {
-        .fi-input-wrp,
-        .fi-fo-file-upload .filepond--root {
-            @apply ring-0 bg-transparent shadow-none;
+@media (min-width: calc(theme('screens.xl') + 1px)) {
+    .table-repeater-component.break-point-xl {
+        &.streamlined {
+            .fi-input-wrp,
+            .fi-fo-file-upload .filepond--root {
+                @apply ring-0 bg-transparent shadow-none;
+            }
+
+            .fi-fo-field-wrp:has(.fi-fo-checkbox-list),
+            .fi-fo-field-wrp:has(.fi-fo-radio) {
+                @apply py-2 px-3;
+            }
+
+            .fi-fo-field-wrp:has(.fi-fo-toggle) {
+                @apply inline-block mt-1;
+            }
         }
 
-        .fi-fo-field-wrp:has(.fi-fo-checkbox-list),
-        .fi-fo-field-wrp:has(.fi-fo-radio) {
-            @apply py-2 px-3;
+        .table-repeater-row {
+            @apply divide-x divide-gray-950/5 dark:divide-white/20;
         }
 
-        .fi-fo-field-wrp:has(.fi-fo-toggle) {
-            @apply inline-block mt-1;
+        .table-repeater-row-actions {
+            @apply justify-center;
         }
     }
 }
 
-@media (min-width: theme('screens.2xl')) {
-    .table-repeater-component.break-point-2xl.streamlined {
-        .fi-input-wrp,
-        .fi-fo-file-upload .filepond--root {
-            @apply ring-0 bg-transparent shadow-none;
+@media (min-width: calc(theme('screens.2xl') + 1px)) {
+    .table-repeater-component.break-point-2xl {
+        &.streamlined {
+            .fi-input-wrp,
+            .fi-fo-file-upload .filepond--root {
+                @apply ring-0 bg-transparent shadow-none;
+            }
+
+            .fi-fo-field-wrp:has(.fi-fo-checkbox-list),
+            .fi-fo-field-wrp:has(.fi-fo-radio) {
+                @apply py-2 px-3;
+            }
+
+            .fi-fo-field-wrp:has(.fi-fo-toggle) {
+                @apply inline-block mt-1;
+            }
         }
 
-        .fi-fo-field-wrp:has(.fi-fo-checkbox-list),
-        .fi-fo-field-wrp:has(.fi-fo-radio) {
-            @apply py-2 px-3;
+        .table-repeater-row {
+            @apply divide-x divide-gray-950/5 dark:divide-white/20;
         }
 
-        .fi-fo-field-wrp:has(.fi-fo-toggle) {
-            @apply inline-block mt-1;
+        .table-repeater-row-actions {
+            @apply justify-center;
         }
     }
 }
@@ -109,6 +159,10 @@
         tr { @apply p-4 !w-full flex flex-col gap-6; }
 
         tr td:last-of-type ul { @apply px-0; }
+
+        .table-repeater-column.has-hidden-label .fi-fo-field-wrp > label {
+            @apply not-sr-only;
+        }
     }
 }
 
@@ -125,6 +179,10 @@
         tr { @apply p-4 !w-full flex flex-col gap-6; }
 
         tr td:last-of-type ul { @apply px-0; }
+
+        .table-repeater-column.has-hidden-label .fi-fo-field-wrp > label {
+            @apply not-sr-only;
+        }
     }
 }
 
@@ -141,6 +199,10 @@
         tr { @apply p-4 !w-full flex flex-col gap-6; }
 
         tr td:last-of-type ul { @apply px-0; }
+
+        .table-repeater-column.has-hidden-label .fi-fo-field-wrp > label {
+            @apply not-sr-only;
+        }
     }
 }
 
@@ -157,6 +219,10 @@
         tr { @apply p-4 !w-full flex flex-col gap-6; }
 
         tr td:last-of-type ul { @apply px-0; }
+
+        .table-repeater-column.has-hidden-label .fi-fo-field-wrp > label {
+            @apply not-sr-only;
+        }
     }
 }
 
@@ -173,6 +239,10 @@
         tr { @apply p-4 !w-full flex flex-col gap-6; }
 
         tr td:last-of-type ul { @apply px-0; }
+
+        .table-repeater-column.has-hidden-label .fi-fo-field-wrp > label {
+            @apply not-sr-only;
+        }
     }
 }
 
diff --git a/resources/views/components/table-repeater.blade.php b/resources/views/components/table-repeater.blade.php
index bb0216c..c22c9f4 100644
--- a/resources/views/components/table-repeater.blade.php
+++ b/resources/views/components/table-repeater.blade.php
@@ -110,7 +110,7 @@ class="table-repeater-rows-wrapper divide-y divide-gray-950/5 dark:divide-white/
                             <tr
                                 wire:key="{{ $this->getId() }}.{{ $row->getStatePath() }}.{{ $field::class }}.item"
                                 x-sortable-item="{{ $uuid }}"
-                                class="table-repeater-row md:divide-x md:divide-gray-950/5 dark:md:divide-white/20"
+                                class="table-repeater-row"
                             >
                                 @php($counter = 0)
                                 @foreach($row->getComponents() as $cell)
@@ -137,7 +137,7 @@ class="table-repeater-row md:divide-x md:divide-gray-950/5 dark:md:divide-white/
 
                                 @if ($hasActions)
                                     <td class="table-repeater-column p-2 w-px">
-                                        <ul class="flex items-center gap-x-3 lg:justify-center px-2">
+                                        <ul class="flex items-center table-repeater-row-actions gap-x-3 px-2">
                                             @foreach ($visibleExtraItemActions as $extraItemAction)
                                                 <li>
                                                     {{ $extraItemAction(['item' => $uuid]) }}
@@ -181,7 +181,7 @@ class="table-repeater-row md:divide-x md:divide-gray-950/5 dark:md:divide-white/
                             </tr>
                         @endforeach
                     @else
-                        <tr class="table-repeater-row table-repeater-empty-row md:divide-x md:divide-gray-950/5 dark:md:divide-divide-white/20">
+                        <tr class="table-repeater-row table-repeater-empty-row">
                             <td colspan="{{ count($headers) + intval($hasActions) }}"
                                 class="table-repeater-column table-repeater-empty-column p-4 w-px text-center italic">
                                 {{ $emptyLabel ?: trans('table-repeater::components.repeater.empty.label') }}
@@ -208,6 +208,6 @@ class="table-repeater-column table-repeater-empty-column p-4 w-px text-center it
                     @endforeach
                 @endif
             </ul>
-         @endif
+        @endif
     </div>
 </x-dynamic-component>