diff --git a/resources/views/columns/image-column-gallery.blade.php b/resources/views/columns/image-column-gallery.blade.php
index e7b8b72..6fc33b6 100644
--- a/resources/views/columns/image-column-gallery.blade.php
+++ b/resources/views/columns/image-column-gallery.blade.php
@@ -14,7 +14,7 @@
$isCircular = $isCircular();
$isSquare = $isSquare();
$isStacked = $isStacked();
- $overlap = $isStacked ? $getOverlap() ?? 2 : null;
+ $overlap = $isStacked ? $getOverlap() ?? 2 : 0;
$defaultWidth = $getWidth();
$defaultHeight = $getHeight();
@@ -23,38 +23,30 @@
$defaultHeight = $defaultHeight ? (is_numeric($defaultHeight) ? $defaultHeight . 'px' : $defaultHeight) : '40px';
$galleryId = 'gallery-' . str_replace(['{', '}', '-'], '', (string) \Illuminate\Support\Str::uuid());
+
+ // Calculate margin for stacked images using inline styles (Tailwind-safe)
+ // Each unit = 0.25rem (4px)
+ $stackedMarginValue = $overlap * 0.25;
+ $stackedMargin = $isStacked && $overlap > 0 ? "-{$stackedMarginValue}rem" : '0';
@endphp
merge($getExtraAttributes(), escape: false)->class([
- 'fi-ta-image',
- 'flex items-center',
- match ($overlap) {
- 1 => '-space-x-1 rtl:space-x-reverse',
- 2 => '-space-x-2 rtl:space-x-reverse',
- 3 => '-space-x-3 rtl:space-x-reverse',
- 4 => '-space-x-4 rtl:space-x-reverse',
- 5 => '-space-x-5 rtl:space-x-reverse',
- 6 => '-space-x-6 rtl:space-x-reverse',
- 7 => '-space-x-7 rtl:space-x-reverse',
- 8 => '-space-x-8 rtl:space-x-reverse',
- default => 'gap-1.5',
- },
- ]) }}
+ {{ $attributes->merge($getExtraAttributes(), escape: false)->class(['fi-ta-image', 'flex items-center', 'gap-1.5' => !$isStacked]) }}
data-viewer-gallery wire:ignore.self>
- @foreach ($limitedState as $stateItem)
+ @foreach ($limitedState as $index => $stateItem)
 }})
class([
- 'max-w-none object-cover object-center curor',
+ 'max-w-none object-cover object-center',
'rounded-full' => $isCircular,
'rounded-lg' => $isSquare,
'ring-white dark:ring-gray-900' => $isStacked,
- 'ring-2' => $isStacked && ($overlap === null || $overlap > 0),
+ 'ring-2' => $isStacked && $overlap > 0,
]) }} />
@endforeach
@@ -64,6 +56,7 @@
min-width: {{ $defaultWidth }};
height: {{ $defaultHeight }};
width: {{ $defaultWidth }};
+ @if ($isStacked) margin-inline-start: {{ $stackedMargin }}; @endif
"
@class(['flex items-center justify-center font-medium text-gray-500'])>
diff --git a/resources/views/columns/image-gallery.blade.php b/resources/views/columns/image-gallery.blade.php
index a4952ba..44b6334 100644
--- a/resources/views/columns/image-gallery.blade.php
+++ b/resources/views/columns/image-gallery.blade.php
@@ -37,12 +37,10 @@
$borderColorClass = '';
}
- // Stacked spacing - use dynamic -space-x value
- if ($isStacked) {
- $stackedClass = "-space-x-{$stackedOverlap} rtl:space-x-reverse";
- } else {
- $stackedClass = 'gap-1';
- }
+ // Calculate stacked margin using inline styles (Tailwind-safe)
+ // Each unit = 0.25rem (4px)
+ $stackedMarginValue = $stackedOverlap * 0.25;
+ $stackedMargin = $isStacked && $stackedOverlap > 0 ? "-{$stackedMarginValue}rem" : '0';
// Size styles - only add if width/height specified
$sizeStyle = '';
@@ -54,16 +52,18 @@
}
@endphp
-
- @foreach ($visibleUrls as $src)
+
+ @foreach ($visibleUrls as $index => $src)

+ style="{{ $sizeStyle }} {{ $ringStyle }} @if ($isStacked && $index > 0) margin-inline-start: {{ $stackedMargin }}; @endif"
+ alt="image" />
@endforeach
@if ($shouldShowRemainingText() && $remaining > 0 && $width)
+ style="width: {{ $width }}px; height: {{ $height ?? $width }}px; min-width: {{ $width }}px; @if ($isStacked) margin-inline-start: {{ $stackedMargin }}; @endif">
+{{ $remaining }}
@endif
diff --git a/src/Tables/Columns/ImageGalleryColumn.php b/src/Tables/Columns/ImageGalleryColumn.php
index 64aa271..c99eb13 100644
--- a/src/Tables/Columns/ImageGalleryColumn.php
+++ b/src/Tables/Columns/ImageGalleryColumn.php
@@ -12,7 +12,7 @@ class ImageGalleryColumn extends Column
protected int | Closure | null $thumbWidth = null;
- protected int | Closure | null $thumbHeight = null;
+ protected int | Closure | null $thumbHeight = 40;
protected int | Closure | null $limit = 3;