From 3e07dc8b9d45f8604cd181c058f7f51503ab7e09 Mon Sep 17 00:00:00 2001
From: Jia Xuan Li <77560326+Jxl-s@users.noreply.github.com>
Date: Fri, 26 Jun 2026 23:33:48 -0700
Subject: [PATCH 1/2] feat(services): make table height responsive to window
 size

---
 app/(authenticated)/services/layout.tsx             | 10 ++++++++++
 app/(authenticated)/services/page.tsx               |  8 +++++---
 .../services/services-data-table.tsx                |  4 ++--
 app/(authenticated)/services/services-table.tsx     | 13 ++++++++-----
 4 files changed, 25 insertions(+), 10 deletions(-)
 create mode 100644 app/(authenticated)/services/layout.tsx

diff --git a/app/(authenticated)/services/layout.tsx b/app/(authenticated)/services/layout.tsx
new file mode 100644
index 0000000..03af22f
--- /dev/null
+++ b/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>
+   );
+}
diff --git a/app/(authenticated)/services/page.tsx b/app/(authenticated)/services/page.tsx
index 57d8485..9c597fb 100644
--- a/app/(authenticated)/services/page.tsx
+++ b/app/(authenticated)/services/page.tsx
@@ -8,9 +8,11 @@ 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} />
+      <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} />
+         </div>
       </main>
    );
 }
diff --git a/app/(authenticated)/services/services-data-table.tsx b/app/(authenticated)/services/services-data-table.tsx
index 268ce43..67f1d4a 100644
--- a/app/(authenticated)/services/services-data-table.tsx
+++ b/app/(authenticated)/services/services-data-table.tsx
@@ -10,7 +10,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 } from "@/lib/service-status";
 
@@ -172,7 +172,7 @@ export function ServicesDataTable({
    );
 
    return (
-      <DataTable
+      <UsersDataTable
          columns={columns}
          data={services}
          emptyMessage="No services found."
diff --git a/app/(authenticated)/services/services-table.tsx b/app/(authenticated)/services/services-table.tsx
index 2d4ef84..c375349 100644
--- a/app/(authenticated)/services/services-table.tsx
+++ b/app/(authenticated)/services/services-table.tsx
@@ -28,13 +28,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}>
@@ -45,7 +45,10 @@ export function ServicesTable({
                <ServiceDialog mode="add" coordinators={coordinators} />
             </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>
@@ -58,6 +61,6 @@ export function ServicesTable({
                if (!v) setEditing(null);
             }}
          />
-      </>
+      </div>
    );
 }

From 68fc410c7ff33232e1061a5ba5b72361e83185fd Mon Sep 17 00:00:00 2001
From: Jia Xuan Li <77560326+Jxl-s@users.noreply.github.com>
Date: Wed, 8 Jul 2026 22:14:54 -0700
Subject: [PATCH 2/2] feat(services): add column width metadata for table
 headers

---
 app/(authenticated)/services/services-data-table.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/(authenticated)/services/services-data-table.tsx b/app/(authenticated)/services/services-data-table.tsx
index 67f1d4a..6379698 100644
--- a/app/(authenticated)/services/services-data-table.tsx
+++ b/app/(authenticated)/services/services-data-table.tsx
@@ -43,6 +43,7 @@ export function ServicesDataTable({
          {
             accessorKey: "title",
             header: "Program",
+            meta: { colWidth: "42%" },
             cell: ({ row }) => (
                <span className="font-medium">{row.original.title ?? "—"}</span>
             ),
@@ -50,6 +51,7 @@ export function ServicesDataTable({
          {
             accessorKey: "status",
             header: "Status",
+            meta: { colWidth: "13%" },
             cell: ({ row }) => (
                <span
                   className={
@@ -64,6 +66,7 @@ export function ServicesDataTable({
          {
             id: "startDate",
             header: "Start Date",
+            meta: { colWidth: "17%" },
             cell: ({ row }) => {
                const s = row.original.scheduledAt;
                return s ? formatDate(s.startDate) : "—";
@@ -72,6 +75,7 @@ export function ServicesDataTable({
          {
             id: "endDate",
             header: "End Date",
+            meta: { colWidth: "17%" },
             cell: ({ row }) => {
                const s = row.original.scheduledAt;
                return s ? formatDate(s.endDate) : "—";
@@ -79,7 +83,8 @@ export function ServicesDataTable({
          },
          {
             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 (