fix(admin): align table columns with page header

web/sdk/admin/views/admins/admins.module.css

@@ -10,3 +10,7 @@
     background-color: var(--rs-color-background-base-primary);
     border-bottom: 1px solid var(--rs-color-border-base-primary);
 }
+
+.first-column {
+    padding-left: var(--rs-space-7);
+}

web/sdk/admin/views/admins/columns.tsx

@@ -1,9 +1,10 @@
 import { Button, type DataTableColumnDef } from "@raystack/apsara-v1";
 import type { ServiceUser, User } from "@raystack/proton/frontier";
 import { TerminologyEntity } from "../../hooks/useTerminology";
+import styles from "./admins.module.css";
 
 export const getColumns: (options?: {
   onNavigateToOrg?: (orgId: string) => void;
   t?: {
     organization: TerminologyEntity;
   };
@@ -15,6 +16,10 @@
     {
       header: "Title",
       accessorKey: "title",
+      classNames: {
+        cell: styles["first-column"],
+        header: styles["first-column"],
+      },
       filterVariant: "text",
       cell: (info) => info.getValue() || "-",
     },

web/sdk/admin/views/invoices/columns.tsx

@@ -7,6 +7,7 @@ import {
   timestampToDate,
 } from "../../utils/connect-timestamp";
 import { TerminologyEntity } from "../../hooks/useTerminology";
+import styles from "./invoices.module.css";
 
 interface GetColumnsOptions {
   t: {
@@ -22,6 +23,10 @@ export const getColumns = ({ t }: GetColumnsOptions): DataTableColumnDef<
     {
       accessorKey: "createdAt",
       header: "Billed on",
+      classNames: {
+        cell: styles["first-column"],
+        header: styles["first-column"],
+      },
       filterType: "date",
       enableColumnFilter: true,
       cell: ({ getValue }) => {
@@ -68,7 +73,7 @@ export const getColumns = ({ t }: GetColumnsOptions): DataTableColumnDef<
       cell: ({ row, getValue }) => {
         const link = getValue() as string;
         return link ? (
-          <Link href={link} external={true}>
+          <Link href={link} external={true} data-test-id="frontier-admin-invoice-link">
             Link
           </Link>
         ) : (

web/sdk/admin/views/invoices/invoices.module.css

@@ -31,8 +31,7 @@
   z-index: 2;
 }
 
-.table th:first-child,
-.table td:first-child {
+.first-column {
   padding-left: var(--rs-space-7);
   max-width: 200px;
 }

web/sdk/admin/views/organizations/details/members/members.module.css

@@ -32,5 +32,5 @@
 }
 
 .table-action-column {
-    width: 32px;
+    width: var(--rs-space-12);
 }

web/sdk/admin/views/organizations/details/projects/projects.module.css

@@ -32,8 +32,7 @@
 }
 
 .table-action-column {
-    width: 32px;
-    padding: 0;
+    width: var(--rs-space-12);
 }
 
 .flex1 {

web/sdk/admin/views/plans/columns.tsx

@@ -1,6 +1,7 @@
 import { Text, type DataTableColumnDef } from "@raystack/apsara-v1";
 import type { Plan } from "@raystack/proton/frontier";
 import { timestampToDate, type TimeStamp } from "../../utils/connect-timestamp";
+import styles from "./plans.module.css";
 
 export const getColumns: (options?: {
   onSelectPlan?: (planId: string) => void;
@@ -12,13 +13,18 @@ export const getColumns: (options?: {
     {
       header: "ID",
       accessorKey: "id",
+      classNames: {
+        cell: styles["first-column"],
+        header: styles["first-column"],
+      },
       filterVariant: "text",
       cell: ({ getValue }) => {
         const id = getValue() as string;
         return (
           <Text
             style={{ cursor: "pointer" }}
             onClick={() => onSelectPlan?.(id)}
+            data-test-id="frontier-admin-plan-link"
           >
             {id}
           </Text>

web/sdk/admin/views/plans/plans.module.css

@@ -14,6 +14,10 @@
     border-bottom: 1px solid var(--rs-color-border-base-primary);
 }
 
+.first-column {
+    padding-left: var(--rs-space-7);
+}
+
 .sheetContent {
     width: 400px;
     padding: 0;

web/sdk/admin/views/preferences/columns.tsx

@@ -19,6 +19,10 @@ export const getColumns: (
     {
       header: "Title",
       accessorKey: "title",
+      classNames: {
+        cell: styles["first-column"],
+        header: styles["first-column"],
+      },
       filterVariant: "text",
       cell: (info) => info.getValue(),
       footer: (props) => props.column.id,

web/sdk/admin/views/preferences/preferences.module.css

@@ -2,6 +2,10 @@
     width: 100%;
 }
 
+.first-column {
+    padding-left: var(--rs-space-7);
+}
+
 .valueColumn {
     max-width: 500px;
     text-wrap: wrap;

web/sdk/admin/views/products/columns.tsx

@@ -1,6 +1,7 @@
 import { Flex, Image, Amount, type DataTableColumnDef } from "@raystack/apsara-v1";
 import type { Product } from "@raystack/proton/frontier";
 import { timestampToDate, TimeStamp } from "../../utils/connect-timestamp";
+import styles from "./products.module.css";
 
 export const getColumns = (
   onNavigateToPrices?: (productId: string) => void
@@ -9,6 +10,10 @@ export const getColumns = (
     {
       accessorKey: "id",
       header: "",
+      classNames: {
+        cell: styles["first-column"],
+        header: styles["first-column"],
+      },
       cell: (info) => {
         return (
               <Image

web/sdk/admin/views/products/prices/columns.tsx

@@ -2,6 +2,7 @@ import type { Price as PriceType } from "@raystack/proton/frontier";
 import { Amount } from "@raystack/apsara-v1";
 import type { DataTableColumnDef } from "@raystack/apsara-v1";
 import { timestampToDate, TimeStamp } from "../../../utils/connect-timestamp";
+import styles from "./prices.module.css";
 
 export const getColumns = (
   prices: PriceType[]
@@ -10,6 +11,10 @@ export const getColumns = (
     {
       header: "Id",
       accessorKey: "id",
+      classNames: {
+        cell: styles["first-column"],
+        header: styles["first-column"],
+      },
       cell: (info) => info.getValue(),
       filterVariant: "text",
     },

web/sdk/admin/views/products/prices/prices.module.css

@@ -0,0 +1,3 @@
+.first-column {
+    padding-left: var(--rs-space-7);
+}

web/sdk/admin/views/products/products.module.css

@@ -15,6 +15,11 @@
     border-bottom: 1px solid var(--rs-color-border-base-primary);
 }
 
+.first-column {
+    width: var(--rs-space-13);
+    padding-left: var(--rs-space-5);
+}
+
 .sheetContent {
     width: 400px;
     padding: 0;

web/sdk/admin/views/roles/columns.tsx

@@ -6,6 +6,10 @@ export const getColumns: () => DataTableColumnDef<Role, unknown>[] = () => {
     {
       accessorKey: "id",
       header: "ID",
+      classNames: {
+        cell: styles["first-column"],
+        header: styles["first-column"],
+      },
       filterVariant: "text",
       cell: ({ getValue }) => getValue(),
     },

web/sdk/admin/views/roles/roles.module.css

@@ -15,6 +15,10 @@
     border-bottom: 1px solid var(--rs-color-border-base-primary);
 }
 
+.first-column {
+    padding-left: var(--rs-space-7);
+}
+
 .permissionsColumn {
     max-width: 500px;
     text-wrap: wrap;

web/sdk/admin/views/users/details/layout/side-panel.module.css

@@ -1,6 +1,6 @@
 .side-panel {
   transform: all 0.3s ease-in-out;
-  padding-bottom: 80px;
+  padding-bottom: var(--rs-space-15);
 }
 
 .side-panel-label {

web/sdk/admin/views/webhooks/webhooks/columns.tsx

@@ -30,6 +30,10 @@ export const getColumns: (
     {
       header: "Description",
       accessorKey: "description",
+      classNames: {
+        cell: styles["first-column"],
+        header: styles["first-column"],
+      },
       filterVariant: "text",
       cell: (info) => info.getValue() || "-",
     },

web/sdk/admin/views/webhooks/webhooks/webhooks.module.css

@@ -1,6 +1,7 @@
 .tableRoot {
     width: 100%;
 }
+
 .tableWrapper {
     width: 100%;
 }
@@ -9,6 +10,10 @@
     table-layout: fixed;
 }
 
+.first-column {
+    padding-left: var(--rs-space-7);
+}
+
 .actionColumn {
     width: 80px;
 }
@@ -29,6 +34,6 @@
 }
 
 .deleteMenuItem {
-    padding: 12px;
+    padding: var(--rs-space-4);
     color: var(--rs-color-foreground-danger-primary);
-}
+}