fix(console): add a brief header to the organization guide in drawer view (#4895)

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

@@ -6,8 +6,8 @@
   right: 0;
   bottom: 0;
   width: 50%;
-  max-width: 900px;
-  min-width: 800px;
+  max-width: 960px;
+  min-width: 860px;
   outline: none;
   background: var(--color-base);
 

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

@@ -19,7 +19,7 @@ import TabNav, { TabNavItem } from '@/ds-components/TabNav';
 import useApi, { type RequestError } from '@/hooks/use-api';
 import useTenantPathname from '@/hooks/use-tenant-pathname';
 
-import IntroductionAndPermissions from '../Organizations/Guide/Introduction';
+import Introduction from '../Organizations/Guide/Introduction';
 
 import Members from './Members';
 import Settings from './Settings';
@@ -89,12 +89,14 @@ function OrganizationDetails() {
             ]}
           />
           <Drawer
+            title="organizations.guide.title"
+            subtitle="organizations.guide.subtitle"
             isOpen={isGuideDrawerOpen}
             onClose={() => {
               setIsGuideDrawerOpen(false);
             }}
           >
-            <IntroductionAndPermissions isReadonly />
+            <Introduction isReadonly />
           </Drawer>
           <DeleteConfirmModal
             isOpen={isDeleteFormOpen}

packages/console/src/pages/Organizations/Guide/Introduction/components/User/index.tsx

@@ -29,7 +29,7 @@ function User({
   onMouseOut,
 }: Props) {
   return (
-    <Tooltip content={tooltip} placement="bottom">
+    <Tooltip content={tooltip}>
       <div
         className={classNames(
           styles.user,

packages/console/src/pages/Organizations/Guide/Introduction/index.module.scss

@@ -1,17 +1,23 @@
 @use '@/scss/underscore' as _;
 
-.title {
-  font: var(--font-title-1);
-}
+.container {
+  .title {
+    font: var(--font-title-1);
+  }
 
-.sectionTitle {
-  font: var(--font-title-2);
-}
+  .sectionTitle {
+    font: var(--font-title-2);
+  }
 
-.description {
-  font: var(--font-body-2);
-}
+  .description {
+    font: var(--font-body-2);
+  }
 
-.panel {
-  flex: 1;
+  .panel {
+    flex: 1;
+  }
+
+  .compact {
+    padding: _.unit(6);
+  }
 }

packages/console/src/pages/Organizations/Guide/Introduction/index.tsx

@@ -42,8 +42,8 @@ function Introduction({ isReadonly }: Props) {
   return (
     <>
       <OverlayScrollbar className={parentStyles.stepContainer}>
-        <div className={classNames(parentStyles.content)}>
-          <Card className={parentStyles.card}>
+        <div className={classNames(parentStyles.content, styles.container)}>
+          <Card className={classNames(parentStyles.card, isReadonly && styles.compact)}>
             <OrganizationIcon className={parentStyles.icon} />
             <FlexBox type="column" gap={24}>
               <div className={styles.title}>{t('guide.introduction.title')}</div>