CSS fixes

Author: RobiNN1

assets/css/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.0.16 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.0.17 | MIT License | https://tailwindcss.com */
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
@@ -480,8 +480,8 @@
   .py-4 {
     padding-block: calc(0.25rem * 4);
   }
-  .py-\[0\.54rem\] {
-    padding-block: 0.54rem;
+  .py-\[0\.4rem\] {
+    padding-block: 0.4rem;
   }
   .pl-6 {
     padding-left: calc(0.25rem * 6);
@@ -818,11 +818,6 @@
       margin-inline-end: calc(0.25rem * 4);
     }
   }
-  .md\:mb-0 {
-    @media (width >= 48rem) {
-      margin-bottom: calc(0.25rem * 0);
-    }
-  }
   .md\:flex {
     @media (width >= 48rem) {
       display: flex;
@@ -868,16 +863,6 @@
       grid-template-columns: repeat(10, minmax(0, 1fr));
     }
   }
-  .md\:justify-center {
-    @media (width >= 48rem) {
-      justify-content: center;
-    }
-  }
-  .md\:justify-end {
-    @media (width >= 48rem) {
-      justify-content: flex-end;
-    }
-  }
   .md\:gap-2 {
     @media (width >= 48rem) {
       gap: calc(0.25rem * 2);

templates/components/paginator.twig

@@ -1,38 +1,34 @@
-<div class="md:grid md:grid-cols-3">
+<div class="flex gap-4 flex-wrap items-center justify-between">
     <div class="flex items-center gap-1">
         Showing
         <span class="font-semibold">{{ first_on_page }}</span> to
         <span class="font-semibold">{{ last_on_page }}</span> of
         <span class="font-semibold">{{ total }}</span> items
     </div>
 
-    <div class="mb-4 flex items-center gap-2 md:mb-0 md:justify-center">
+    <div class="flex items-center gap-2">
         {{ include('components/select.twig', {id: 'per_page', options: select, selected: per_page, width: 'w-24', wrapper_class: false}) }}
         <label class="-mt-1.5" for="per_page">per page</label>
     </div>
 
     {% if pages and pages|length > 1 %}
-        <div class="flex items-center md:justify-end">
-            <ul class="inline-flex -space-x-px text-sm">
-                {% for page in pages %}
-                    {% if page == current_page %}
-                        {% set class = 'border-primary-400 bg-primary-500 text-white hover:bg-primary-600 dark:bg-primary-900 dark:hover:bg-primary-800 dark:border-primary-700' %}
-                    {% else %}
-                        {% set class = 'border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white' %}
-                    {% endif %}
+        <nav class="flex -space-x-px">
+            {% for page in pages %}
+                {% if page == current_page %}
+                    {% set class = 'border-primary-400 bg-primary-500 text-white dark:bg-primary-900 dark:border-primary-700' %}
+                {% else %}
+                    {% set class = 'border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-white' %}
+                {% endif %}
 
-                    {% set first_item = loop.first ? ' rounded-l' : '' %}
-                    {% set last_item = loop.last ? ' rounded-r' : '' %}
+                {% set first_item = loop.first ? ' rounded-l' : '' %}
+                {% set last_item = loop.last ? ' rounded-r' : '' %}
 
-                    <li>
-                        {% if page == '...' %}
-                            <span class="py-[0.54rem] px-3 border border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300">{{ page }}</span>
-                        {% else %}
-                            <a href="{{ url ~ page }}" class="py-[0.54rem] px-3 border {{ class }}{{ first_item ~ last_item }}">{{ page }}</a>
-                        {% endif %}
-                    </li>
-                {% endfor %}
-            </ul>
-        </div>
+                {% if page == '...' %}
+                    <div><span class="py-[0.4rem] px-3 border border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300">{{ page }}</span></div>
+                {% else %}
+                    <div><a href="{{ url ~ page }}" class="py-[0.4rem] px-3 border {{ class }}{{ first_item ~ last_item }}">{{ page }}</a></div>
+                {% endif %}
+            {% endfor %}
+        </nav>
     {% endif %}
 </div>