Fix positioning issue of the pagination pane in the deployments page

Author: myftija

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments/route.tsx

@@ -52,6 +52,7 @@ import {
 } from "~/presenters/v3/DeploymentListPresenter.server";
 import { requireUserId } from "~/services/session.server";
 import { titleCase } from "~/utils";
+import { cn } from "~/utils/cn";
 import { EnvironmentParamSchema, docsPath, v3DeploymentPath } from "~/utils/pathBuilder";
 import { createSearchParams } from "~/utils/searchParams";
 import { BranchTrackingConfigSchema, getTrackedBranchForEnvironment } from "~/v3/github";
@@ -170,8 +171,8 @@ export default function Page() {
         <ResizablePanelGroup orientation="horizontal" className="h-full max-h-full">
           <ResizablePanel id="deployments-main" min="100px" className="max-h-full">
             {hasDeployments ? (
-              <div className="grid max-h-full grid-rows-[1fr_auto]">
-                <Table containerClassName="border-t-0">
+              <div className="flex h-full max-h-full flex-col">
+                <Table containerClassName="border-t-0 grow">
                   <TableHeader>
                     <TableRow>
                       <TableHeaderCell>Deploy</TableHeaderCell>
@@ -296,9 +297,14 @@ export default function Page() {
                     )}
                   </TableBody>
                 </Table>
-                <div className="-mt-px flex justify-between gap-2 border-t border-grid-dimmed px-2 py-2">
+                <div
+                  className={cn(
+                    "-mt-px flex flex-wrap justify-end gap-2 border-t border-grid-dimmed px-3 pb-[7px] pt-[6px]",
+                    connectedGithubRepository && environmentGitHubBranch && "justify-between"
+                  )}
+                >
                   {connectedGithubRepository && environmentGitHubBranch && (
-                    <div className="flex flex-nowrap items-center gap-2 whitespace-nowrap text-sm">
+                    <div className="flex flex-nowrap items-center gap-2 whitespace-nowrap py-0.5 text-sm">
                       <OctoKitty className="size-4" />
                       Automatically triggered by pushes to{" "}
                       <div className="flex max-w-32 items-center gap-1 truncate rounded bg-grid-dimmed px-1 font-mono">
@@ -315,7 +321,7 @@ export default function Page() {
                       </a>
                     </div>
                   )}
-                  <PaginationControls currentPage={currentPage} totalPages={20} />
+                  <PaginationControls currentPage={currentPage} totalPages={totalPages} />
                 </div>
               </div>
             ) : environment.type === "DEVELOPMENT" ? (