refactor(console): display full contents in language edit section (#2141)

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

@@ -0,0 +1,29 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  border-radius: 6px;
+  border: 1px solid var(--color-border);
+  outline: 3px solid transparent;
+  padding: _.unit(2) _.unit(3);
+
+  &:focus-within {
+    border-color: var(--color-primary);
+    outline-color: var(--color-focused-variant);
+  }
+
+  textarea {
+    width: 100%;
+    height: 100%;
+    color: var(--color-text);
+    font: var(--font-body-medium);
+    background: transparent;
+    border: none;
+    outline: none;
+    resize: none;
+    padding: 0;
+
+    &::placeholder {
+      color: var(--color-caption);
+    }
+  }
+}

packages/console/src/components/Textarea/index.tsx

@@ -0,0 +1,18 @@
+import classNames from 'classnames';
+import { ForwardedRef, forwardRef, HTMLProps } from 'react';
+
+import * as styles from './index.module.scss';
+
+type Props = HTMLProps<HTMLTextAreaElement> & {
+  className?: string;
+};
+
+const Textarea = ({ className, ...rest }: Props, reference: ForwardedRef<HTMLTextAreaElement>) => {
+  return (
+    <div className={classNames(styles.container, className)}>
+      <textarea {...rest} ref={reference} />
+    </div>
+  );
+};
+
+export default forwardRef(Textarea);

packages/console/src/pages/SignInExperience/components/ManageLanguage/LanguageEditor/EditSection.module.scss

@@ -14,5 +14,18 @@
 }
 
 .sectionBuiltInText {
-  padding: _.unit(2) 0;
+  padding: _.unit(2) _.unit(3);
+  border-radius: 6px;
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+  background: var(--color-layer-2);
+}
+
+.inputCell {
+  position: relative;
+}
+
+.sectionInputArea {
+  position: absolute;
+  inset: _.unit(2) _.unit(5);
 }

packages/console/src/pages/SignInExperience/components/ManageLanguage/LanguageEditor/EditSection.tsx

@@ -1,7 +1,7 @@
 import { Translation } from '@logto/schemas';
 import { useFormContext } from 'react-hook-form';
 
-import TextInput from '@/components/TextInput';
+import Textarea from '@/components/Textarea';
 
 import * as style from './EditSection.module.scss';
 
@@ -27,10 +27,10 @@ const EditSection = ({ dataKey, data }: EditSectionProps) => {
           <tr key={fieldKey}>
             <td className={style.sectionDataKey}>{field}</td>
             <td>
-              <TextInput readOnly value={value} className={style.sectionBuiltInText} />
+              <div className={style.sectionBuiltInText}>{value}</div>
             </td>
-            <td>
-              <TextInput {...register(fieldKey)} />
+            <td className={style.inputCell}>
+              <Textarea className={style.sectionInputArea} {...register(fieldKey)} />
             </td>
           </tr>
         );

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

@@ -39,29 +39,23 @@
     > table {
       border: none;
 
-      > thead > tr {
-        > th {
+      > thead {
+        position: sticky;
+        top: 0;
+        // Note: cells with `position: relative` style will overlap this sticky header, add a z-index to fix it.
+        z-index: 1;
+
+        tr > th {
+          padding: _.unit(1) _.unit(5);
           font: var(--font-label-large);
           color: var(--color-text);
           background-color: var(--color-layer-1);
-          position: sticky;
-          top: 0;
-        }
-
-        > th:first-child {
-          width: 300px;
-          padding: _.unit(1) _.unit(5);
         }
       }
 
-      > tbody > tr {
-        > td {
-          border: none;
-        }
-
-        > td:first-child {
-          padding: _.unit(1) _.unit(5);
-        }
+      > tbody > tr > td {
+        padding: _.unit(2) _.unit(5);
+        border: none;
       }
     }