Fixed Bootstrap 5 classes for pagination and form controls to use 'sm' variants for improved styling

resources/views/components/pagination.blade.php

@@ -47,14 +47,10 @@
         @else
             @if ($this->paginationIsEnabled && $this->isPaginationMethod('standard') && $currentRows->lastPage() > 1)
                 <div class="row mt-3">
-                    <div class="col-12 col-md-6 overflow-auto">
-                        {{ $currentRows->links('livewire-tables::specific.bootstrap-4.pagination') }}
-                    </div>
-
                     <div @class([
-                        "col-12 col-md-6 text-center text-muted",
-                        "text-md-right" => $isBootstrap4,
-                        "text-md-end" => $isBootstrap5,
+                        "col-12 col-md-6 text-center text-muted small",
+                        "text-md-left" => $isBootstrap4,
+                        "text-md-start" => $isBootstrap5,
                         ])>
                         @if($this->showPaginationDetails)
                             <span>{{ __($localisationPath.'Showing') }}</span>
@@ -66,17 +62,17 @@
                             <span>{{ __($localisationPath.'results') }}</span>
                         @endif
                     </div>
+
+                    <div class="col-12 col-md-6 overflow-auto d-flex justify-content-end">
+                        {{ $currentRows->links('livewire-tables::specific.bootstrap-4.pagination') }}
+                    </div>
                 </div>
             @elseif ($this->paginationIsEnabled && $this->isPaginationMethod('simple'))
                 <div class="row mt-3">
-                    <div class="col-12 col-md-6 overflow-auto">
-                        {{ $currentRows->links('livewire-tables::specific.bootstrap-4.simple-pagination') }}
-                    </div>
-
                     <div @class([
                         "col-12 col-md-6 text-center text-muted",
-                        "text-md-right" => $isBootstrap4,
-                        "text-md-end" => $isBootstrap5,
+                        "text-md-left" => $isBootstrap4,
+                        "text-md-start" => $isBootstrap5,
                     ])>
                         @if($this->showPaginationDetails)
                             <span>{{ __($localisationPath.'Showing') }}</span>
@@ -85,6 +81,10 @@
                             <strong>{{ $currentRows->count() ? $currentRows->lastItem() : 0 }}</strong>
                         @endif
                     </div>
+
+                    <div class="col-12 col-md-6 overflow-auto d-flex justify-content-end">
+                        {{ $currentRows->links('livewire-tables::specific.bootstrap-4.simple-pagination') }}
+                    </div>
                 </div>
             @elseif ($this->paginationIsEnabled && $this->isPaginationMethod('cursor'))
                 <div class="row mt-3">

resources/views/components/table/td.blade.php

@@ -18,7 +18,7 @@
                     'hidden' =>  $isTailwind && $column && $column->shouldCollapseAlways(),
                     'hidden md:table-cell' => $isTailwind && $column && $column->shouldCollapseOnMobile(),
                     'hidden lg:table-cell' => $isTailwind && $column && $column->shouldCollapseOnTablet(),
-                    '' => $isBootstrap && ($customAttributes['default'] ?? true),
+                    'small' => $isBootstrap && ($customAttributes['default'] ?? true),
                     'd-none' => $isBootstrap && $column && $column->shouldCollapseAlways(),
                     'd-none d-md-table-cell' => $isBootstrap && $column && $column->shouldCollapseOnMobile(),
                     'd-none d-lg-table-cell' => $isBootstrap && $column && $column->shouldCollapseOnTablet(),

resources/views/components/table/td/plain.blade.php

@@ -19,7 +19,7 @@
     <td {{ $attributes
         ->merge($customAttributes)
         ->class([
-            '' => $customAttributes['default'] ?? true,
+            'small' => $customAttributes['default'] ?? true,
             'd-none' => $column && $column->shouldCollapseAlways(),
             'd-none d-md-table-cell' => $column && $column->shouldCollapseOnMobile(),
             'd-none d-lg-table-cell' => $column && $column->shouldCollapseOnTablet(),

resources/views/components/table/th.blade.php

@@ -18,7 +18,7 @@
             'hidden' => $isTailwind && $column->shouldCollapseAlways(),
             'hidden md:table-cell' => $isTailwind && $column->shouldCollapseOnMobile(),
             'hidden lg:table-cell' => $isTailwind && $column->shouldCollapseOnTablet(),
-            '' => $isBootstrap && ($customThAttributes['default'] ?? true),
+            'small' => $isBootstrap && ($customThAttributes['default'] ?? true),
             'd-none' => $isBootstrap && $column->shouldCollapseAlways(),
             'd-none d-md-table-cell' => $isBootstrap && $column->shouldCollapseOnMobile(),
             'd-none d-lg-table-cell' => $isBootstrap && $column->shouldCollapseOnTablet(),

resources/views/components/tools/filters/date.blade.php

@@ -9,7 +9,7 @@
                 ->class([
                     'block w-full rounded-md shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => $isTailwind && ($filterInputAttributes['default-styling'] ?? true),
                     'border-gray-300  focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind && ($filterInputAttributes['default-colors'] ?? true),
-                    'form-control' => $isBootstrap,
+                    'form-control form-control-sm' => $isBootstrap,
                 ])
                 ->except(['default-styling','default-colors']) 
             }} />

resources/views/components/tools/filters/datetime.blade.php

@@ -10,7 +10,7 @@
                 ->class([
                     'block w-full rounded-md shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => $isTailwind && ($filterInputAttributes['default-styling'] ?? true),
                     'border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind && ($filterInputAttributes['default-colors'] ?? true),
-                    'form-control' => $isBootstrap,
+                    'form-control form-control-sm' => $isBootstrap,
                 ])
                 ->except(['default-styling','default-colors']) 
             }} />

resources/views/components/tools/filters/number.blade.php

@@ -10,7 +10,7 @@
                 ->class([
                     'block w-full rounded-md shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => $isTailwind && ($filterInputAttributes['default-styling'] ?? true),
                     'border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind && ($filterInputAttributes['default-colors'] ?? true),
-                    'form-control' => $isBootstrap,
+                    'form-control form-control-sm' => $isBootstrap,
                 ])
                 ->except(['default-styling','default-colors']) 
             }} />

resources/views/components/tools/filters/select.blade.php

@@ -10,8 +10,8 @@
                 ->class([
                     'block w-full transition duration-150 ease-in-out rounded-md shadow-sm focus:ring focus:ring-opacity-50' => $isTailwind && ($filterInputAttributes['default-styling'] ?? true),
                     'border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind && ($filterInputAttributes['default-colors'] ?? true),
-                    'form-control' => $isBootstrap4 && ($filterInputAttributes['default-styling'] ?? true),
-                    'form-select' => $isBootstrap5 && ($filterInputAttributes['default-styling'] ?? true),
+                    'form-control form-control-sm' => $isBootstrap4 && ($filterInputAttributes['default-styling'] ?? true),
+                    'form-select form-select-sm' => $isBootstrap5 && ($filterInputAttributes['default-styling'] ?? true),
                 ])
                 ->except(['default-styling','default-colors']) 
             }}>

resources/views/components/tools/filters/text-field.blade.php

@@ -10,7 +10,7 @@
                 ->class([
                     'block w-full rounded-md shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => $isTailwind && ($filterInputAttributes['default-styling'] ?? true),
                     'border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind && ($filterInputAttributes['default-colors'] ?? true),
-                    'form-control' => $isBootstrap,
+                    'form-control form-control-sm' => $isBootstrap,
                 ])
                 ->except(['default-styling','default-colors']) 
             }} />

resources/views/components/tools/toolbar/items/bulk-actions.blade.php

@@ -16,7 +16,7 @@
             {{ 
                 $attributes->merge($this->getBulkActionsButtonAttributes)
                 ->class([
-                    'btn dropdown-toggle d-block d-md-inline' => $isBootstrap && ($this->getBulkActionsButtonAttributes['default-styling'] ?? true),
+                    'btn btn-sm dropdown-toggle d-block d-md-inline' => $isBootstrap && ($this->getBulkActionsButtonAttributes['default-styling'] ?? true),
                     'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600' => $isTailwind && ($this->getBulkActionsButtonAttributes['default-colors'] ?? true),
                     'inline-flex justify-center w-full rounded-md border shadow-sm px-4 py-2 text-sm font-medium focus:ring focus:ring-opacity-50' => $isTailwind && ($this->getBulkActionsButtonAttributes['default-styling'] ?? true),
 

resources/views/components/tools/toolbar/items/column-select.blade.php

@@ -122,7 +122,7 @@ class="inline-flex items-center px-2 py-1 disabled:opacity-50 disabled:cursor-wa
                 {{
                     $attributes->merge($this->getColumnSelectButtonAttributes())
                     ->class([
-                        'btn dropdown-toggle d-block w-100 d-md-inline' => $this->getColumnSelectButtonAttributes()['default-styling'],
+                        'btn btn-sm dropdown-toggle d-block w-100 d-md-inline' => $this->getColumnSelectButtonAttributes()['default-styling'],
                     ])
                     ->except(['default-styling', 'default-colors'])
                 }}

resources/views/components/tools/toolbar/items/filter-button.blade.php

@@ -23,7 +23,7 @@
             <button
                 type="button"
                 @class([
-                    'btn dropdown-toggle d-block w-100 d-md-inline' => $isBootstrap,
+                    'btn btn-sm dropdown-toggle d-block w-100 d-md-inline' => $isBootstrap,
                     'inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600' => $isTailwind,
                 ])
                 @if ($this->isFilterLayoutPopover()) x-on:click="filterPopoverOpen = !filterPopoverOpen"

resources/views/components/tools/toolbar/items/pagination-dropdown.blade.php

@@ -8,8 +8,8 @@
         {{ 
             $attributes->merge($this->getPerPageFieldAttributes())
             ->class([
-                'form-control' => $isBootstrap4 && $this->getPerPageFieldAttributes()['default-styling'],
-                'form-select' => $isBootstrap5 && $this->getPerPageFieldAttributes()['default-styling'],
+                'form-control form-control-sm' => $isBootstrap4 && $this->getPerPageFieldAttributes()['default-styling'],
+                'form-select form-select-sm' => $isBootstrap5 && $this->getPerPageFieldAttributes()['default-styling'],
                 'block w-full rounded-md shadow-sm transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:ring focus:ring-opacity-50' => $isTailwind && $this->getPerPageFieldAttributes()['default-styling'],
                 'border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600' => $isTailwind && $this->getPerPageFieldAttributes()['default-colors'],
             ])

resources/views/components/tools/toolbar/items/reorder-buttons.blade.php

@@ -9,7 +9,7 @@
         x-on:click="reorderToggle"
         type="button"
         @class([
-            'btn btn-default d-block d-md-inline' => $isBootstrap,
+            'btn btn-default btn-sm d-block d-md-inline' => $isBootstrap,
             'inline-flex justify-center items-center w-full md:w-auto px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600' => $isTailwind
         ])
     >
@@ -28,7 +28,7 @@
             type="button"
             x-on:click="updateOrderedItems"
             @class([
-                'btn btn-default d-block d-md-inline' => $isBootstrap && $this->currentlyReorderingStatus,
+                'btn btn-default btn-sm d-block d-md-inline' => $isBootstrap && $this->currentlyReorderingStatus,
                 'inline-flex justify-center items-center w-full md:w-auto px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 active:bg-gray-50 active:text-gray-800 transition ease-in-out duration-150 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600' => $isTailwind
             ])
         >

resources/views/components/tools/toolbar/items/search/input.blade.php

@@ -12,7 +12,7 @@
             'border-gray-300 dark:bg-gray-700 dark:text-white dark:border-gray-600 focus:border-indigo-300 focus:ring-indigo-200' => $isTailwind && !$this->hasSearch()  && (($this->getSearchFieldAttributes()['default'] ?? true) || ($this->getSearchFieldAttributes()['default-colors'] ?? true)),
             'block w-full' => !$this->hasSearchIcon,
             'pl-8 pr-4' => $this->hasSearchIcon,
-            'form-control' => $isBootstrap && $this->getSearchFieldAttributes()['default'] ?? true,
+            'form-control form-control-sm' => $isBootstrap && $this->getSearchFieldAttributes()['default'] ?? true,
         ])
         ->except(['default','default-styling','default-colors']) 
     }}

resources/views/components/tools/toolbar/items/search/remove.blade.php

@@ -8,7 +8,7 @@
         wire:click="clearSearch"
 
         @class([
-                'btn btn-outline-secondary d-inline-flex h-100 align-items-center' => $isBootstrap,
+                'btn btn-sm btn-danger btn-sm d-inline-flex h-100 align-items-center' => $isBootstrap,
                 'inline-flex h-full items-center px-3 text-gray-500 bg-gray-50 rounded-r-md border border-l-0 border-gray-300 cursor-pointer sm:text-sm dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600' => $isTailwind,
             ])
     >

resources/views/specific/bootstrap-4/pagination.blade.php

@@ -3,7 +3,7 @@
         @php(isset($this->numberOfPaginatorsRendered[$paginator->getPageName()]) ? $this->numberOfPaginatorsRendered[$paginator->getPageName()]++ : $this->numberOfPaginatorsRendered[$paginator->getPageName()] = 1)
 
         <nav>
-            <ul class="pagination d-flex flex-wrap justify-content-start">
+            <ul class="pagination pagination-sm d-flex flex-wrap justify-content-start">
                 {{-- Previous Page Link --}}
                 @if ($paginator->onFirstPage())
                     <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">

resources/views/specific/bootstrap-4/simple-pagination.blade.php

@@ -1,7 +1,7 @@
 <div>
     @if ($paginator->hasPages())
         <nav>
-            <ul class="pagination">
+            <ul class="pagination pagination-sm">
                 {{-- Previous Page Link --}}
                 @if ($paginator->onFirstPage())
                     <li class="page-item disabled" aria-disabled="true">