Fix dashboard pagination styling and layout by adding missing CSS classes and styles

Co-authored-by: PR0M3TH3AN <[email protected]>

dashboard.log

@@ -0,0 +1,8 @@
+
+> [email protected] dashboard:serve
+> node bin/torch-lock.mjs dashboard
+
+Dashboard running at http://localhost:4173/dashboard/
+Serving files from /app
+Using configuration from /app
+Terminated

dashboard/index.html

@@ -102,8 +102,8 @@
         <!-- Pagination Controls -->
         <div id="paginationControls" class="flex items-center justify-between border-t border-border pt-4 mb-8 hidden">
           <div class="flex flex-1 justify-between sm:hidden">
-            <button id="mobilePrevBtn" class="pagination-btn rounded-md">Previous</button>
-            <button id="mobileNextBtn" class="pagination-btn rounded-md ml-auto">Next</button>
+            <button id="mobilePrevBtn" class="pagination-btn rounded-md px-3 py-2">Previous</button>
+            <button id="mobileNextBtn" class="pagination-btn rounded-md ml-auto px-3 py-2">Next</button>
           </div>
           <div class="sm:flex sm:flex-1 sm:items-center sm:justify-between hidden">
             <div>

dashboard/styles.css

@@ -282,3 +282,78 @@ a { color: inherit; }
 #markdown-content a:hover {
     text-decoration: underline;
 }
+
+/* -------------------------------------------------------------------------- */
+/* Missing Utilities & Pagination Fixes                                       */
+/* -------------------------------------------------------------------------- */
+
+.hidden { display: none; }
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+
+.rounded-l-md { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; }
+.rounded-r-md { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; }
+
+.h-5 { height: 1.25rem; }
+.w-5 { width: 1.25rem; }
+
+.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
+.isolate { isolation: isolate; }
+
+@media (min-width: 640px) {
+  .sm\:hidden { display: none; }
+  .sm\:flex { display: flex; }
+  .sm\:flex-1 { flex: 1 1 0%; }
+  .sm\:items-center { align-items: center; }
+  .sm\:justify-between { justify-content: space-between; }
+}
+
+/* Pagination Button Styles */
+.pagination-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--surface-alt);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative; /* For z-index and adjacent overlap */
+}
+
+.pagination-btn:hover:not(:disabled) {
+  background-color: var(--surface);
+  border-color: var(--accent);
+  color: var(--text-strong);
+  z-index: 10;
+}
+
+.pagination-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--surface);
+}
+
+/* Handle adjacent borders for grouped buttons */
+.pagination-btn + .pagination-btn {
+  margin-left: -1px;
+}
+
+/* Additional Utilities */
+.-space-x-px > * + * { margin-left: -1px; }
+.flex-1 { flex: 1 1 0%; }
+.pt-4 { padding-top: 1rem; }