refactor(console): user logs (#2512)

packages/console/src/components/AuditLogTable/index.module.scss

@@ -1,5 +1,11 @@
 @use '@/scss/underscore' as _;
 
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .filter {
   display: flex;
   justify-content: flex-end;
@@ -28,6 +34,9 @@
 .tableLayout {
   display: flex;
   flex-direction: column;
+  max-height: 100%;
+  overflow-y: auto;
+  flex: 1;
 
   .tableContainer {
     border-top-left-radius: 0;

packages/console/src/components/AuditLogTable/index.tsx

@@ -13,7 +13,6 @@ import TableError from '@/components/Table/TableError';
 import TableLoading from '@/components/Table/TableLoading';
 import UserName from '@/components/UserName';
 import type { RequestError } from '@/hooks/use-api';
-import * as resourcesStyles from '@/scss/resources.module.scss';
 import * as tableStyles from '@/scss/table.module.scss';
 
 import ApplicationSelector from './components/ApplicationSelector';
@@ -69,8 +68,8 @@ const AuditLogTable = ({ userId }: Props) => {
   };
 
   return (
-    <>
-      <div className={classNames(resourcesStyles.table, styles.tableLayout)}>
+    <div className={styles.container}>
+      <div className={styles.tableLayout}>
         <div className={styles.filter}>
           <div className={styles.title}>{t('logs.filter_by')}</div>
           <div className={styles.eventSelector}>
@@ -153,7 +152,7 @@ const AuditLogTable = ({ userId }: Props) => {
           updateQuery('page', String(page));
         }}
       />
-    </>
+    </div>
   );
 };
 

packages/console/src/pages/AuditLogs/index.tsx

@@ -8,7 +8,9 @@ const AuditLogs = () => {
       <div className={resourcesStyles.headline}>
         <CardTitle title="logs.title" subtitle="logs.subtitle" />
       </div>
-      <AuditLogTable />
+      <div className={resourcesStyles.table}>
+        <AuditLogTable />
+      </div>
     </div>
   );
 };

packages/console/src/pages/UserDetails/components/UserLogs.module.scss

@@ -1,9 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .logs {
+  flex: 1;
   margin-bottom: _.unit(6);
-
-  >:not(:first-child) {
-    margin-top: _.unit(3);
-  }
+  overflow-y: auto;
 }

packages/console/src/pages/UserDetails/components/UserLogs.tsx

@@ -1,5 +1,4 @@
 import AuditLogTable from '@/components/AuditLogTable';
-import Card from '@/components/Card';
 
 import * as styles from './UserLogs.module.scss';
 
@@ -9,9 +8,9 @@ type Props = {
 
 const UserLogs = ({ userId }: Props) => {
   return (
-    <Card className={styles.logs}>
+    <div className={styles.logs}>
       <AuditLogTable userId={userId} />
-    </Card>
+    </div>
   );
 };
 

packages/console/src/pages/UserDetails/index.module.scss

@@ -4,6 +4,10 @@
   margin: _.unit(1) 0 0 _.unit(1);
 }
 
+.resourceLayout {
+  height: 100%;
+}
+
 .header {
   padding: _.unit(6);
   display: flex;

packages/console/src/pages/UserDetails/index.tsx

@@ -1,4 +1,5 @@
 import type { User } from '@logto/schemas';
+import classNames from 'classnames';
 import { useMemo, useState } from 'react';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
@@ -78,7 +79,7 @@ const UserDetails = () => {
   };
 
   return (
-    <div className={detailsStyles.container}>
+    <div className={classNames(detailsStyles.container, isLogs && styles.resourceLayout)}>
       <LinkButton
         to="/users"
         icon={<Back />}