From 9707d669309ddd5dd79d200f660dbffdb6d07d80 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Fri, 19 Apr 2024 15:54:49 +0800
Subject: [PATCH] fix(console): pagination bar should be fully visible (#5758)

---
 .../TenantSettings/TenantMembers/EditMemberModal/index.tsx  | 6 +++++-
 .../TenantMembers/InviteMemberModal/index.tsx               | 5 ++++-
 .../pages/TenantSettings/TenantMembers/index.module.scss    | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/console/src/pages/TenantSettings/TenantMembers/EditMemberModal/index.tsx b/packages/console/src/pages/TenantSettings/TenantMembers/EditMemberModal/index.tsx
index ba2a0da26..3aa0904ef 100644
--- a/packages/console/src/pages/TenantSettings/TenantMembers/EditMemberModal/index.tsx
+++ b/packages/console/src/pages/TenantSettings/TenantMembers/EditMemberModal/index.tsx
@@ -15,6 +15,8 @@ import { useConfirmModal } from '@/hooks/use-confirm-modal';
 import useCurrentTenantScopes from '@/hooks/use-current-tenant-scopes';
 import * as modalStyles from '@/scss/modal.module.scss';
 
+import * as styles from '../index.module.scss';
+
 type Props = {
   readonly user: TenantMemberResponse;
   readonly isOpen: boolean;
@@ -43,7 +45,9 @@ function EditMemberModal({ user, isOpen, onClose }: Props) {
     if (role === TenantRole.Admin) {
       const [result] = await show({
         ModalContent: () => (
-          <Trans components={{ ul: <ul />, li: <li /> }}>{t('assign_admin_confirm')}</Trans>
+          <Trans components={{ ul: <ul className={styles.list} />, li: <li /> }}>
+            {t('assign_admin_confirm')}
+          </Trans>
         ),
         confirmButtonText: 'general.confirm',
       });
diff --git a/packages/console/src/pages/TenantSettings/TenantMembers/InviteMemberModal/index.tsx b/packages/console/src/pages/TenantSettings/TenantMembers/InviteMemberModal/index.tsx
index 716eaf5b4..d0881a0d4 100644
--- a/packages/console/src/pages/TenantSettings/TenantMembers/InviteMemberModal/index.tsx
+++ b/packages/console/src/pages/TenantSettings/TenantMembers/InviteMemberModal/index.tsx
@@ -15,6 +15,7 @@ import * as modalStyles from '@/scss/modal.module.scss';
 
 import InviteEmailsInput from '../InviteEmailsInput';
 import useEmailInputUtils from '../InviteEmailsInput/hooks';
+import * as styles from '../index.module.scss';
 import { type InviteMemberForm } from '../types';
 
 import Footer from './Footer';
@@ -66,7 +67,9 @@ function InviteMemberModal({ isOpen, onClose }: Props) {
     if (role === TenantRole.Admin) {
       const [result] = await show({
         ModalContent: () => (
-          <Trans components={{ ul: <ul />, li: <li /> }}>{t('assign_admin_confirm')}</Trans>
+          <Trans components={{ ul: <ul className={styles.list} />, li: <li /> }}>
+            {t('assign_admin_confirm')}
+          </Trans>
         ),
         confirmButtonText: 'general.confirm',
       });
diff --git a/packages/console/src/pages/TenantSettings/TenantMembers/index.module.scss b/packages/console/src/pages/TenantSettings/TenantMembers/index.module.scss
index bb444a0dd..6d66a8c1d 100644
--- a/packages/console/src/pages/TenantSettings/TenantMembers/index.module.scss
+++ b/packages/console/src/pages/TenantSettings/TenantMembers/index.module.scss
@@ -53,7 +53,7 @@
   }
 }
 
-ul {
+.list {
   padding-inline-start: _.unit(6);
 
   > li {