feat(services): make table height responsive to window size

Author: Jxl-s

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

@@ -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>
    );
 }

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."

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>
    );
 }