Amend localisation configuration layout

authgear · Jun 14, 2024 · 850fb3c · 850fb3c
1 parent a149123
commit 850fb3c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/portal/src/graphql/portal/LocalizationConfigurationScreen.module.css b/portal/src/graphql/portal/LocalizationConfigurationScreen.module.css
@@ -1,4 +1,4 @@
-.titleContainer {
+.descriptionContainer {
   display: flex;
   flex-direction: row;
   justify-content: space-between;

diff --git a/portal/src/graphql/portal/LocalizationConfigurationScreen.tsx b/portal/src/graphql/portal/LocalizationConfigurationScreen.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useContext, useMemo, useState } from "react";
 import { useParams } from "react-router-dom";
 import { Pivot, PivotItem } from "@fluentui/react";
+import cn from "classnames";
 import { Context, FormattedMessage } from "@oursky/react-messageformat";
 import ShowLoading from "../../ShowLoading";
 import ShowError from "../../ShowError";
@@ -677,21 +678,22 @@ const ResourcesConfigurationContent: React.VFC<ResourcesConfigurationContentProp
 
     return (
       <ScreenContent>
-        <div className={styles.titleContainer}>
-          <ScreenTitle>
-            <FormattedMessage id="LocalizationConfigurationScreen.title" />
-          </ScreenTitle>
+        <ScreenTitle className={cn("col-span-8", "tablet:col-span-full")}>
+          <FormattedMessage id="LocalizationConfigurationScreen.title" />
+        </ScreenTitle>
+        <div className={styles.descriptionContainer}>
+          <ScreenDescription className={styles.widget}>
+            <FormattedMessage id="LocalizationConfigurationScreen.description" />
+          </ScreenDescription>
           <ManageLanguageWidget
+            showLabel={false}
             existingLanguages={initialSupportedLanguages}
             supportedLanguages={supportedLanguages}
             selectedLanguage={state.selectedLanguage}
             fallbackLanguage={state.fallbackLanguage}
             onChangeSelectedLanguage={setSelectedLanguage}
           />
         </div>
-        <ScreenDescription className={styles.widget}>
-          <FormattedMessage id="LocalizationConfigurationScreen.description" />
-        </ScreenDescription>
         {/* Code editors might incorrectly fire change events when changing language
             Set key to selectedLanguage to ensure code editors always remount */}
         <Widget className={styles.widget} key={state.selectedLanguage}>