refactor(console): make the LanguageEditor responsive (#2620)

packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageDetails.module.scss

@@ -1,9 +1,11 @@
 @use '@/scss/underscore' as _;
 
 .languageDetails {
-  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 
   .title {
+    flex-shrink: 0;
     padding: _.unit(6) _.unit(5);
     font: var(--font-title-large);
     color: var(--color-text);
@@ -31,11 +33,31 @@
     }
   }
 
-  .content {
-    border-top: 1px solid var(--color-divider);
-    height: 481px;
+  .form {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
     overflow-y: auto;
 
+    .content {
+      flex: 1;
+      border-top: 1px solid var(--color-divider);
+      overflow-y: auto;
+
+      .customValuesColumn {
+        display: flex;
+        align-items: center;
+      }
+
+      .clearButton {
+        margin-left: _.unit(1);
+      }
+
+      .clearIcon {
+        width: 16px;
+        height: 16px;
+      }
+
       > table {
         border: none;
 
@@ -56,23 +78,10 @@
         > tbody > tr > td {
           padding: _.unit(2) _.unit(5);
           border: none;
+          word-wrap: break-word;
         }
       }
 
-    .customValuesColumn {
-      display: flex;
-      align-items: center;
-    }
-
-    .clearButton {
-      margin-left: _.unit(1);
-    }
-
-    .clearIcon {
-      width: 16px;
-      height: 16px;
-    }
-
       .sectionTitle {
         @include _.subhead-cap;
         background-color: var(--color-layer-light);
@@ -90,9 +99,12 @@
     }
 
     .footer {
+      flex-shrink: 0;
       border-top: 1px solid var(--color-divider);
+      height: 85px;
       display: flex;
       flex-direction: row-reverse;
       padding: _.unit(5);
     }
+  }
 }

packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageDetails.tsx

@@ -175,6 +175,7 @@ const LanguageDetails = () => {
         )}
       </div>
       <form
+        className={style.form}
         onSubmit={async (event) => {
           // Note: Avoid propagating the 'submit' event to the outer sign-in-experience form.
           event.stopPropagation();

packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/LanguageNav.module.scss

@@ -6,10 +6,12 @@
   flex-shrink: 0;
   background-color: var(--color-layer-light);
   border-right: 1px solid var(--color-divider);
+  display: flex;
+  flex-direction: column;
 
   .languageItemList {
+    flex: 1;
     margin-top: _.unit(3);
-    height: 569px;
     overflow-y: auto;
   }
 }

packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/index.module.scss

@@ -1,7 +1,45 @@
-.container {
+@use '@/scss/underscore' as _;
+@use '@/scss/dimensions' as dim;
+
+
+.modalOverlay {
+  position: fixed;
+  inset: 0;
+  background: var(--color-overlay);
+
+  .modalContent {
+    position: fixed;
+    inset: 0;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .editor {
+    margin: 0 auto;
+    max-width: dim.$modal-layout-width-xlarge;
+    max-height: 85vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-shadow: var(--shadow-3);
+
+    .header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      flex-shrink: 0;
+      margin-bottom: _.unit(6);
+    }
+
+    .content {
+      flex: 1;
       display: flex;
       flex-direction: row;
       border: 1px solid var(--color-divider);
       border-radius: 8px;
       overflow: hidden;
+    }
+  }
 }

packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/index.tsx

@@ -2,14 +2,16 @@ import { useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import Modal from 'react-modal';
 
+import Close from '@/assets/images/close.svg';
+import Card from '@/components/Card';
+import CardTitle from '@/components/CardTitle';
 import ConfirmModal from '@/components/ConfirmModal';
-import ModalLayout from '@/components/ModalLayout';
+import IconButton from '@/components/IconButton';
 import useUiLanguages from '@/hooks/use-ui-languages';
-import * as modalStyles from '@/scss/modal.module.scss';
 
 import LanguageDetails from './LanguageDetails';
 import LanguageNav from './LanguageNav';
-import * as style from './index.module.scss';
+import * as styles from './index.module.scss';
 import useLanguageEditorContext, { LanguageEditorContext } from './use-language-editor-context';
 
 type Props = {
@@ -69,18 +71,22 @@ const LanguageEditorModal = ({ isOpen, onClose }: Props) => {
   };
 
   return (
-    <Modal isOpen={isOpen} className={modalStyles.content} overlayClassName={modalStyles.overlay}>
-      <ModalLayout
+    <Modal isOpen={isOpen} className={styles.modalContent} overlayClassName={styles.modalOverlay}>
+      <Card className={styles.editor}>
+        <div className={styles.header}>
+          <CardTitle
             title="sign_in_exp.others.manage_language.title"
             subtitle="sign_in_exp.others.manage_language.subtitle"
-        size="xlarge"
-        onClose={onCloseModal}
-      >
-        <div className={style.container}>
+          />
+          <IconButton onClick={onCloseModal}>
+            <Close />
+          </IconButton>
+        </div>
+        <div className={styles.content}>
           <LanguageNav />
           <LanguageDetails />
         </div>
-      </ModalLayout>
+      </Card>
       <ConfirmModal
         isOpen={confirmationState !== 'none'}
         cancelButtonText="general.stay_on_page"