166290 fix 20250617 21:11

apps/app/src/client/components/Admin/AuditLog/ActivityTable.tsx

@@ -32,52 +32,54 @@ export const ActivityTable : FC<Props> = (props: Props) => {
 
   return (
     <div className="table-responsive text-nowrap h-100">
-      <table className="table table-default table-bordered table-user-list">
-        <thead>
-          <tr>
-            <th scope="col">{t('admin:audit_log_management.user')}</th>
-            <th scope="col">{t('admin:audit_log_management.date')}</th>
-            <th scope="col">{t('admin:audit_log_management.action')}</th>
-            <th scope="col">{t('admin:audit_log_management.ip')}</th>
-            <th scope="col">{t('admin:audit_log_management.url')}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {props.activityList.map((activity) => {
-            return (
-              <tr data-testid="activity-table" key={activity._id}>
-                <td>
-                  { activity.user != null && (
-                    <>
-                      <UserPicture user={activity.user} />
-                      <a
-                        className="ms-2"
-                        href={isPopulated(activity.user) ? pagePathUtils.userHomepagePath(activity.user) : undefined}
-                      >
-                        {activity.snapshot?.username}
-                      </a>
-                    </>
-                  )}
-                </td>
-                <td>{formatDate(activity.createdAt)}</td>
-                <td>{t(`admin:audit_log_action.${activity.action}`)}</td>
-                <td>{activity.ip}</td>
-                <td>
-                  {activity.endpoint}
-                  <CopyToClipboard text={activity.endpoint} onCopy={showToolTip}>
-                    <button type="button" className="btn btn-outline-secondary border-0 pull-right" id="tooltipTarget">
-                      <span className="material-symbols-outlined" aria-hidden="true">content_paste</span>
-                    </button>
-                  </CopyToClipboard>
-                  <Tooltip placement="top" isOpen={tooltopOpen} fade={false} target="tooltipTarget">
-                    copied!
-                  </Tooltip>
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
+      <div className="text-truncate">
+        <table className="table table-default table-bordered table-user-list">
+          <thead>
+            <tr>
+              <th scope="col">{t('admin:audit_log_management.user')}</th>
+              <th scope="col">{t('admin:audit_log_management.date')}</th>
+              <th scope="col">{t('admin:audit_log_management.action')}</th>
+              <th scope="col">{t('admin:audit_log_management.ip')}</th>
+              <th scope="col">{t('admin:audit_log_management.url')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {props.activityList.map((activity) => {
+              return (
+                <tr data-testid="activity-table" key={activity._id}>
+                  <td>
+                    { activity.user != null && (
+                      <>
+                        <UserPicture user={activity.user} />
+                        <a
+                          className="ms-2"
+                          href={isPopulated(activity.user) ? pagePathUtils.userHomepagePath(activity.user) : undefined}
+                        >
+                          {activity.snapshot?.username}
+                        </a>
+                      </>
+                    )}
+                  </td>
+                  <td>{formatDate(activity.createdAt)}</td>
+                  <td>{t(`admin:audit_log_action.${activity.action}`)}</td>
+                  <td>{activity.ip}</td>
+                  <td>
+                    {activity.endpoint}
+                    <CopyToClipboard text={activity.endpoint} onCopy={showToolTip}>
+                      <button type="button" className="btn btn-outline-secondary border-0 pull-right" id="tooltipTarget">
+                        <span className="material-symbols-outlined" aria-hidden="true">content_paste</span>
+                      </button>
+                    </CopyToClipboard>
+                    <Tooltip placement="top" isOpen={tooltopOpen} fade={false} target="tooltipTarget">
+                      copied!
+                    </Tooltip>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 };

apps/app/src/components/Layout/Admin.module.scss

@@ -224,6 +224,12 @@ $slack-work-space-name-card-border: #efc1f6;
   // }
 
   .admin-audit-log {
+      display: inline-block;
+      width: 400px;
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
     .select-action-dropdown {
       max-height: 500px;
       overflow-y: auto;
@@ -238,9 +244,6 @@ $slack-work-space-name-card-border: #efc1f6;
     .table-user-list {
       max-width: 50px;
     }
-
-
-    overflow-x: hidden;
   }
 
   .settings-table {