raystack · rsbh · Feb 16, 2026 · Jan 30, 2026 · Feb 9, 2026 · Feb 9, 2026
diff --git a/web/apps/admin/package-lock.json b/web/apps/admin/package-lock.json
diff --git a/web/apps/admin/package.json b/web/apps/admin/package.json
@@ -18,7 +18,7 @@
     "@hookform/resolvers": "^3.0.1",
     "@radix-ui/react-form": "^0.0.2",
     "@radix-ui/react-icons": "^1.3.0",
-    "@raystack/apsara": "^0.53.2",
+    "@raystack/apsara": "^0.56.2",
     "@raystack/frontier": "workspace:^",
     "@raystack/proton": "0.1.0-b1687af73f994fa9612a023c850aa97c35735af8",
     "@stitches/react": "^1.2.8",
@@ -56,4 +56,4 @@
     "vite": "^4.5.9",
     "vite-plugin-svgr": "^4.3.0"
   }
-}
+}
diff --git a/web/apps/admin/src/pages/organizations/list/columns.tsx b/web/apps/admin/src/pages/organizations/list/columns.tsx
@@ -54,8 +54,12 @@ export const getColumns = ({
       accessorKey: "title",
       header: "Name",
       classNames: {
-        cell: styles["name-column"],
-        header: styles["name-column"],
+        cell: styles['name-column'],
+        header: styles['name-column']
+      },
+      styles: {
+        cell: { flex: '0 0 300px' },
+        header: { flex: '0 0 300px' }
       },
       cell: ({ row }) => {
         const avatarColor = getAvatarColor(row?.original?.id || "");
@@ -74,15 +78,27 @@ export const getColumns = ({
       enableSorting: true,
     },
     {
-      accessorKey: "createdBy",
-      header: "Creator",
+      accessorKey: 'createdBy',
+      header: 'Creator',
+      classNames: {
+        cell: styles['creator-column'],
+        header: styles['creator-column']
+      },
+      styles: {
+        cell: { flex: '0 0 300px' },
+        header: { flex: '0 0 300px' }
+      },
       cell: ({ getValue }) => {
         return getValue();
       },
     },
     {
-      accessorKey: "planName",
-      header: "Plan",
+      accessorKey: 'planName',
+      header: 'Plan',
+      styles: {
+        cell: { flex: '0 0 250px' },
+        header: { flex: '0 0 250px' }
+      },
       cell: ({ getValue }) => {
         return planMap[getValue() as string];
       },
@@ -120,9 +136,6 @@ export const getColumns = ({
         return getValue();
       },
       enableHiding: true,
-      classNames: {
-        cell: styles["country-column"],
-      },
     },
     {
       accessorKey: "paymentMode",

diff --git a/web/apps/admin/src/pages/organizations/list/index.tsx b/web/apps/admin/src/pages/organizations/list/index.tsx
@@ -183,13 +183,15 @@ export const OrganizationList = () => {
             openCreatePanel={openCreateOrgPanel}
           />
           <DataTable.Toolbar />
-          <DataTable.Content
+          <DataTable.VirtualizedContent
             classNames={{
               root: styles["table-wrapper"],
               table: tableClassName,
               header: styles["table-header"],
             }}
             emptyState={<NoOrganizations />}
+            rowHeight={48}
+            groupHeaderHeight={48}
           />
         </Flex>
       </DataTable>

diff --git a/web/apps/admin/src/pages/organizations/list/list.module.css b/web/apps/admin/src/pages/organizations/list/list.module.css
@@ -26,7 +26,11 @@
 
 .name-column {
   padding-left: var(--rs-space-7);
-  max-width: 200px;
+  min-width: 300px;
+}
+
+.creator-column {
+  min-width: 300px;
 }
 
 .country-column {
@@ -35,8 +39,8 @@
 
 .table-wrapper {
   /* Navbar Height + Toolbar height */
-  max-height: calc(100vh - 90px);
-  overflow: scroll;
+  height: calc(100vh - 90px);
+  overflow: auto;
 }
 
 .table-header {

diff --git a/web/apps/admin/src/pages/users/list/list.module.css b/web/apps/admin/src/pages/users/list/list.module.css
@@ -26,7 +26,7 @@
 
 .name-column {
   padding-left: var(--rs-space-7);
-  max-width: 200px;
+  min-width: 300px;
 }
 
 .country-column {
@@ -35,8 +35,8 @@
 
 .table-wrapper {
   /* Navbar Height + Toolbar height */
-  max-height: calc(100vh - 90px);
-  overflow: scroll;
+  height: calc(100vh - 90px);
+  overflow: auto;
 }
 
 .table-header {

diff --git a/web/apps/admin/src/pages/users/list/list.tsx b/web/apps/admin/src/pages/users/list/list.tsx
@@ -139,13 +139,15 @@ export const UsersList = () => {
         <Flex direction="column" style={{ width: "100%" }}>
           <Navbar searchQuery={tableQuery.search} />
           <DataTable.Toolbar />
-          <DataTable.Content
+          <DataTable.VirtualizedContent
             classNames={{
               root: styles["table-wrapper"],
               table: tableClassName,
               header: styles["table-header"],
             }}
             emptyState={<NoUsers />}
+            rowHeight={48}
+            groupHeaderHeight={48}
           />
         </Flex>
       </DataTable>

diff --git a/web/lib/admin/views/audit-logs/audit-logs.module.css b/web/lib/admin/views/audit-logs/audit-logs.module.css
@@ -26,10 +26,10 @@
 
 .name-column {
   padding-left: var(--rs-space-7);
-  max-width: 240px;
+  min-width: 300px;
 }
 .org-column {
-  max-width: 200px;
+  min-width: 300px;
 }
 
 .table-wrapper {
@@ -53,8 +53,8 @@
 .table-content-container {
   width: 100%;
   height: 100%;
-  max-height: calc(100vh - 90px);
-  overflow: scroll;
+  height: calc(100vh - 90px);
+  overflow: auto;
   position: relative;
 }
 

diff --git a/web/lib/admin/views/audit-logs/index.tsx b/web/lib/admin/views/audit-logs/index.tsx
@@ -62,7 +62,7 @@

 export type AuditLogsViewProps = {
  appName?: string;
  onExportCsv?: (query: RQLRequest) => Promise<void>;
 };

 export default function AuditLogsView({ appName, onExportCsv }: AuditLogsViewProps = {}) {
@@ -131,7 +131,7 @@
        rqlRequest: updatedRQLRequest,
      });
    },
    [queryClient],
  );

  const handleLoadMore = async () => {
@@ -200,13 +200,15 @@
           <Navbar searchQuery={tableQuery.query.search} onExportCsv={onExportCsv} />
           <DataTable.Toolbar />
           <Flex className={styles["table-content-container"]}>
-            <DataTable.Content
+            <DataTable.VirtualizedContent
               classNames={{
                 root: styles["table-wrapper"],
                 table: tableClassName,
                 header: styles["table-header"],
               }}
               emptyState={<NoAuditLogs />}
+              rowHeight={60}
+              groupHeaderHeight={48}
             />
             {sidePanelOpen && (
               <SidePanelDetails

diff --git a/web/lib/admin/views/invoices/index.tsx b/web/lib/admin/views/invoices/index.tsx
@@ -131,13 +131,15 @@ export default function InvoicesView({ appName }: InvoicesViewProps = {}) {
         <Flex direction="column" style={{ width: "100%" }}>
           <InvoicesNavabar searchQuery={tableQuery.search || ""} />
           <DataTable.Toolbar />
-          <DataTable.Content
+          <DataTable.VirtualizedContent
             classNames={{
               root: styles["table-wrapper"],
               table: tableClassName,
               header: styles["table-header"],
             }}
             emptyState={<NoInvoices />}
+            rowHeight={48}
+            groupHeaderHeight={48}
           />
         </Flex>
       </DataTable>

diff --git a/web/lib/admin/views/invoices/invoices.module.css b/web/lib/admin/views/invoices/invoices.module.css
@@ -21,8 +21,8 @@
 
 .table-wrapper {
   /* Navbar Height + Toolbar height */
-  max-height: calc(100vh - 90px);
-  overflow: scroll;
+  height: calc(100vh - 90px);
+  overflow: auto;
 }
 
 .table-header {

diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml