Disable next/prev buttons so the layout doesn’t jump around

apps/webapp/app/components/LinkWithDisabled.tsx

@@ -0,0 +1,26 @@
+import { Link } from "@remix-run/react";
+import classNames from "classnames";
+
+type Props = Parameters<typeof Link>[0] & {
+  disabled?: boolean;
+  disabledClassName?: string;
+};
+
+export function LinkDisabled({
+  disabled = false,
+  disabledClassName,
+  ...props
+}: Props) {
+  if (disabled) {
+    return (
+      <span
+        {...props}
+        className={classNames(props.className, disabledClassName)}
+      >
+        {props.children}
+      </span>
+    );
+  } else {
+    return <Link {...props}>{props.children}</Link>;
+  }
+}

apps/webapp/app/components/Pagination.tsx

@@ -6,6 +6,7 @@ import {
 } from "@heroicons/react/24/solid";
 import { Link, useLocation } from "@remix-run/react";
 import classNames from "classnames";
+import { LinkDisabled } from "./LinkWithDisabled";
 
 export function PaginationControls({
   currentPage,
@@ -56,27 +57,29 @@ export function PaginationControls({
             className="isolate inline-flex -space-x-px rounded-md shadow-sm"
             aria-label="Pagination"
           >
-            {currentPage > 1 && (
-              <Link
-                to={pageUrl(location, currentPage - 1)}
-                className="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20"
-              >
-                <span className="sr-only">Previous</span>
-                <ChevronLeftIcon className="h-5 w-5" aria-hidden="true" />
-              </Link>
-            )}
+            <LinkDisabled
+              to={pageUrl(location, currentPage - 1)}
+              disabled={currentPage === 1}
+              className="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20"
+              disabledClassName="opacity-30"
+            >
+              <span className="sr-only">Previous</span>
+              <ChevronLeftIcon className="h-5 w-5" aria-hidden="true" />
+            </LinkDisabled>
+
             {calculatePageLinks(currentPage, totalPages).map((page, i) => (
               <PageLinkComponent page={page} key={i} location={location} />
             ))}
-            {currentPage < totalPages && (
-              <Link
-                to={pageUrl(location, currentPage + 1)}
-                className="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20"
-              >
-                <span className="sr-only">Next</span>
-                <ChevronRightIcon className="h-5 w-5" aria-hidden="true" />
-              </Link>
-            )}
+
+            <LinkDisabled
+              to={pageUrl(location, currentPage + 1)}
+              disabled={currentPage === totalPages}
+              className="relative inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20"
+              disabledClassName="opacity-30"
+            >
+              <span className="sr-only">Next</span>
+              <ChevronRightIcon className="h-5 w-5" aria-hidden="true" />
+            </LinkDisabled>
           </nav>
         </div>
       </div>
@@ -137,6 +140,23 @@ function PageLinkComponent({
   }
 }
 
+function NextPreviousButton({
+  path,
+  children,
+}: {
+  path: string;
+  children: any;
+}) {
+  return (
+    <Link
+      to={path}
+      className="relative inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-20"
+    >
+      {children}
+    </Link>
+  );
+}
+
 type PageLink = EllipsisPageLink | SpecificPageLink;
 
 type EllipsisPageLink = {

apps/webapp/app/routes/__app/orgs/$organizationSlug/workflows/$workflowSlug/runs/index.tsx

@@ -48,8 +48,6 @@ export default function Page() {
   const result = useTypedLoaderData<typeof loader>();
   const { runs, total, page, pageCount, pageSize } = result;
 
-  console.log(result);
-
   return (
     <>
       <Header1 className="mb-6">Runs</Header1>