feat: paginate the admin booking list

tailwind/_components.css

@@ -2,4 +2,5 @@
 @import "components/button.css";
 @import "components/forms.css";
 @import "components/badge.css";
+@import "components/datatable.css";
 @import "components/toast.css";

tailwind/components/button.css

@@ -6,7 +6,10 @@
 }
 
 .button--small {
-    @apply px-2 py-1 md:px-4 text-xs sm:text-sm;
+    /* The fixed height of .button is what made these look full-size; a small button sizes to its
+       own padding instead, so it fits inside a table row and next to a form field. */
+    @apply h-auto md:h-auto leading-none md:leading-none;
+    @apply px-2 py-1.5 md:px-3 md:py-2 text-xs sm:text-sm normal-case;
 }
 
 .button--primary {

tailwind/components/datatable.css

@@ -0,0 +1,31 @@
+.data-table-wrapper {
+    @apply overflow-x-auto lg:overflow-x-visible mb-8;
+}
+
+.data-table-wrapper__inner {
+    @apply align-middle inline-block min-w-full overflow-hidden lg:overflow-visible;
+}
+
+.data-table {
+    @apply min-w-full;
+}
+
+.data-table tbody {
+    @apply bg-white;
+}
+
+.data-table tr {
+    @apply border border-gray-300;
+}
+
+.data-table th {
+    @apply px-4 py-2 bg-gray-200 text-left leading-4 font-bold text-primary align-top;
+}
+
+.data-table td {
+    @apply px-4 py-2 leading-5 align-top;
+}
+
+.data-table tbody tr {
+    @apply hover:bg-gray-100;
+}