Make services table height responsive

app/(authenticated)/services/layout.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+
+/** Bounded height for /services so the table can paginate inside the column. */
+export default function ServicesLayout({ children }: { children: ReactNode }) {
+   return (
+      <div className="flex h-full max-h-full min-h-0 w-full min-w-0 flex-1 flex-col overflow-hidden">
+         {children}
+      </div>
+   );
+}

app/(authenticated)/services/page.tsx

@@ -10,13 +10,15 @@ export default async function ServicesPage() {
    ]);
 
    return (
-      <main className="flex min-h-screen flex-col gap-6 p-8">
-         <h1 className="text-3xl font-bold">Services</h1>
-         <ServicesTable
-            services={services}
-            coordinators={coordinators}
-            forms={forms}
-         />
+      <main className="flex h-full max-h-full min-h-0 w-full min-w-0 flex-1 flex-col gap-4 overflow-hidden p-8">
+         <h1 className="shrink-0 text-3xl font-bold">Services</h1>
+         <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
+            <ServicesTable
+               services={services}
+               coordinators={coordinators}
+               forms={forms}
+            />
+         </div>
       </main>
    );
 }

app/(authenticated)/services/services-data-table.tsx

@@ -11,7 +11,7 @@ import {
    TooltipContent,
    TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { DataTable } from "@/components/data-table";
+import { UsersDataTable } from "@/app/(authenticated)/users/_components/users-data-table";
 import { formatDate } from "@/lib/format";
 import { statusBadgeClass, subscriptionBadgeClass } from "@/lib/service-badges";
 
@@ -44,13 +44,15 @@ export function ServicesDataTable({
          {
             accessorKey: "title",
             header: "Program",
+            meta: { colWidth: "42%" },
             cell: ({ row }) => (
                <span className="font-medium">{row.original.title ?? "—"}</span>
             ),
          },
          {
             accessorKey: "status",
             header: "Status",
+            meta: { colWidth: "13%" },
             cell: ({ row }) => (
                <span
                   className={
@@ -79,6 +81,7 @@ export function ServicesDataTable({
          {
             id: "startDate",
             header: "Start Date",
+            meta: { colWidth: "17%" },
             cell: ({ row }) => {
                const s = row.original.scheduledAt;
                return s ? formatDate(s.startDate) : "—";
@@ -87,14 +90,16 @@ export function ServicesDataTable({
          {
             id: "endDate",
             header: "End Date",
+            meta: { colWidth: "17%" },
             cell: ({ row }) => {
                const s = row.original.scheduledAt;
                return s ? formatDate(s.endDate) : "—";
             },
          },
          {
             id: "actions",
-            header: () => <div className="text-right">Actions</div>,
+            header: "Actions",
+            meta: { colWidth: "11%", thClassName: "text-right", tdClassName: "text-right" },
             cell: ({ row }) => {
                const s = row.original;
                return (
@@ -197,7 +202,7 @@ export function ServicesDataTable({
    );
 
    return (
-      <DataTable
+      <UsersDataTable
          columns={columns}
          data={services}
          emptyMessage="No services found."

app/(authenticated)/services/services-table.tsx

@@ -31,13 +31,13 @@ export function ServicesTable({
    }, [services, tab]);
 
    return (
-      <>
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
          <Tabs
             value={tab}
             onValueChange={(v) => setTab(v as StatusTab)}
-            className="w-full"
+            className="flex min-h-0 w-full min-w-0 flex-1 flex-col gap-2 overflow-hidden"
          >
-            <div className="flex items-center justify-between">
+            <div className="flex shrink-0 items-center justify-between">
                <TabsList className="border border-border">
                   {statusTabs.map((status) => (
                      <TabsTrigger key={status} value={status}>
@@ -52,7 +52,10 @@ export function ServicesTable({
                />
             </div>
 
-            <TabsContent value={tab}>
+            <TabsContent
+               value={tab}
+               className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden focus-visible:outline-none"
+            >
                <ServicesDataTable services={filtered} onEdit={setEditing} />
             </TabsContent>
          </Tabs>
@@ -66,6 +69,6 @@ export function ServicesTable({
                if (!v) setEditing(null);
             }}
          />
-      </>
+      </div>
    );
 }