From 3cea0735c498e98f10b14a5207b7759fa1f1cc5e Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Mon, 15 Apr 2024 18:26:33 +0800
Subject: [PATCH] style(console): update organization template layout (#5713)

---
 .../src/pages/OrganizationRoleDetails/index.module.scss    | 6 ++++++
 .../console/src/pages/OrganizationRoleDetails/index.tsx    | 7 ++++++-
 .../src/pages/OrganizationTemplate/index.module.scss       | 2 ++
 3 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 packages/console/src/pages/OrganizationRoleDetails/index.module.scss

diff --git a/packages/console/src/pages/OrganizationRoleDetails/index.module.scss b/packages/console/src/pages/OrganizationRoleDetails/index.module.scss
new file mode 100644
index 000000000..023c775d8
--- /dev/null
+++ b/packages/console/src/pages/OrganizationRoleDetails/index.module.scss
@@ -0,0 +1,6 @@
+@use '@/scss/underscore' as _;
+
+.withTable {
+  height: 100%;
+  padding-bottom: _.unit(6);
+}
diff --git a/packages/console/src/pages/OrganizationRoleDetails/index.tsx b/packages/console/src/pages/OrganizationRoleDetails/index.tsx
index 3f05670c3..d7d162520 100644
--- a/packages/console/src/pages/OrganizationRoleDetails/index.tsx
+++ b/packages/console/src/pages/OrganizationRoleDetails/index.tsx
@@ -1,11 +1,12 @@
 import { withAppInsights } from '@logto/app-insights/react/AppInsightsReact';
 import { type OrganizationRole } from '@logto/schemas';
+import classNames from 'classnames';
 import { useState } from 'react';
 import { toast } from 'react-hot-toast';
 import { useTranslation } from 'react-i18next';
 // FIXME: @yijun
 // eslint-disable-next-line no-restricted-imports
-import { Navigate, Route, Routes, useParams } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation, useParams } from 'react-router-dom';
 import useSWR, { useSWRConfig } from 'swr';
 
 import Delete from '@/assets/icons/delete.svg';
@@ -23,6 +24,7 @@ import useTenantPathname from '@/hooks/use-tenant-pathname';
 
 import Permissions from './Permissions';
 import Settings from './Settings';
+import * as styles from './index.module.scss';
 
 const orgRolesPath = `/organization-template/${OrganizationTemplateTabs.OrganizationRoles}`;
 
@@ -31,6 +33,8 @@ function OrganizationRoleDetails() {
 
   const { id } = useParams();
   const { navigate } = useTenantPathname();
+  const { pathname } = useLocation();
+  const isPageHasTable = pathname.endsWith(OrganizationRoleDetailsTabs.Permissions);
 
   const { data, error, mutate, isLoading } = useSWR<OrganizationRole, RequestError>(
     id && `api/organization-roles/${id}`
@@ -63,6 +67,7 @@ function OrganizationRoleDetails() {
       backLinkTitle="organization_role_details.back_to_org_roles"
       isLoading={isLoading}
       error={error}
+      className={classNames(isPageHasTable && styles.withTable)}
       onRetry={mutate}
     >
       <PageMeta titleKey="organization_role_details.page_title" />
diff --git a/packages/console/src/pages/OrganizationTemplate/index.module.scss b/packages/console/src/pages/OrganizationTemplate/index.module.scss
index 00066ed6d..58b8c54f0 100644
--- a/packages/console/src/pages/OrganizationTemplate/index.module.scss
+++ b/packages/console/src/pages/OrganizationTemplate/index.module.scss
@@ -1,6 +1,8 @@
 @use '@/scss/underscore' as _;
 
 .container {
+  height: 100%;
+
   > *:not(:first-child) {
     margin-top: _.unit(4);
   }