From a0d740a15152ceb7ebacb53ca2a548e4371e1cf0 Mon Sep 17 00:00:00 2001 From: Pasindu Yeshan Date: Wed, 8 Jan 2025 09:38:15 +0530 Subject: [PATCH 1/9] Change primary icon and icon buttons to text buttons --- .../console/src/public/deployment.config.json | 2 +- .../components/user-profile.tsx | 173 ++++++------------ 2 files changed, 58 insertions(+), 117 deletions(-) diff --git a/apps/console/src/public/deployment.config.json b/apps/console/src/public/deployment.config.json index 12e8caa41cd..a12c70e2088 100644 --- a/apps/console/src/public/deployment.config.json +++ b/apps/console/src/public/deployment.config.json @@ -1282,7 +1282,7 @@ "isHeaderAvatarLabelAllowed": false, "isLeftNavigationCategorized": true, "isMarketingConsentBannerEnabled": false, - "isMultipleEmailsAndMobileNumbersEnabled": false, + "isMultipleEmailsAndMobileNumbersEnabled": true, "isPasswordInputValidationEnabled": true, "isRequestPathAuthenticationEnabled": false, "isSAASDeployment": false, diff --git a/features/admin.users.v1/components/user-profile.tsx b/features/admin.users.v1/components/user-profile.tsx index cf520608937..e472edb6083 100644 --- a/features/admin.users.v1/components/user-profile.tsx +++ b/features/admin.users.v1/components/user-profile.tsx @@ -23,11 +23,11 @@ import TableContainer from "@mui/material/TableContainer"; import TableRow from "@mui/material/TableRow"; import Accordion from "@oxygen-ui/react/Accordion"; import AccordionDetails from "@oxygen-ui/react/AccordionDetails"; -import AccordionSummary from "@oxygen-ui/react/AccordionSummary"; import Alert from "@oxygen-ui/react/Alert"; +import OxygenButton from "@oxygen-ui/react/Button"; +import Chip from "@oxygen-ui/react/Chip"; import IconButton from "@oxygen-ui/react/IconButton"; import Paper from "@oxygen-ui/react/Paper"; -import { CheckIcon, ChevronDownIcon, StarIcon, TrashIcon } from "@oxygen-ui/react-icons"; import { Show, useRequiredScopes } from "@wso2is/access-control"; import { AppConstants, AppState, FeatureConfigInterface, history } from "@wso2is/admin.core.v1"; import useUIConfig from "@wso2is/admin.core.v1/hooks/use-ui-configs"; @@ -67,7 +67,7 @@ import { DangerZone, DangerZoneGroup, EmphasizedSegment, - Tooltip, + Popup, useConfirmationModalAlert } from "@wso2is/react-components"; import { AxiosError, AxiosResponse } from "axios"; @@ -77,7 +77,7 @@ import React, { FunctionComponent, ReactElement, ReactNode, useCallback, useEffe import { useTranslation } from "react-i18next"; import { useDispatch, useSelector } from "react-redux"; import { Dispatch } from "redux"; -import { Button, CheckboxProps, Divider, DropdownItemProps, Form, Grid, Input } from "semantic-ui-react"; +import { Button, CheckboxProps, Divider, DropdownItemProps, Form, Grid, Icon, Input } from "semantic-ui-react"; import { ChangePasswordComponent } from "./user-change-password"; import { updateUserInfo } from "../api"; import { @@ -2027,66 +2027,10 @@ export const UserProfile: FunctionComponent = ( setExpandMultiAttributeAccordion( - { - ...expandMultiAttributeAccordion, - [schema.name]: !expandMultiAttributeAccordion[schema.name] - } - ) } + data-componentid={ `${testId}-profile-form-${schema.name}-accordion` } + expanded={ true } + defaultExpanded > - } - id="multi-attribute-header" - className="accordion-summary" - data-componentid={ `${ testId }-profile-form-${ schema.name }-accordion-summary` } - > - - { - showVerifiedPopup(accordionLabelValue) - && ( -
- - ) } - content={ t("common:verified") } - size="mini" - /> -
- ) - } - { - showPrimaryPopup(accordionLabelValue) - && ( -
- - ) } - content={ t("common:primary") } - size="mini" - /> -
- ) - } - = ( `-verified-icon-${index}` } > - - ) } - content={ t("common:verified") } - size="mini" + + ) + } + header= { t("common:verified") } + inverted /> ) @@ -2139,18 +2090,14 @@ export const UserProfile: FunctionComponent = ( showPrimaryPopup(value) && (
- - ) } - content={ t("common:primary") } - size="mini" +
) @@ -2159,42 +2106,35 @@ export const UserProfile: FunctionComponent = (
- - + { showVerifyButton(value) && ( + handleVerify(schema, value) } + data-componentid={ + `${testId}-profile-form` + + `-${schema.name}-verify-button-${index}` + } + disabled={ isSubmitting || isReadOnly } + > + { t("common:verify") } + + ) } + { showMakePrimaryButton(value) && ( + handleMakePrimary(schema, value) } + data-componentid={ + `${testId}-profile-form` + + `-${schema.name}-make-primary-button-${index}` + } + disabled={ isSubmitting || isReadOnly } + > + { t("common:makePrimary") } + + ) }
From da4ee09f161b095b3fadbf07340ca606eb3a5be1 Mon Sep 17 00:00:00 2001 From: Pasindu Yeshan Date: Wed, 8 Jan 2025 12:12:27 +0530 Subject: [PATCH 2/9] Remove unnecessary accordion --- .../components/user-profile.scss | 94 +++------ .../components/user-profile.tsx | 193 +++++++++--------- 2 files changed, 123 insertions(+), 164 deletions(-) diff --git a/features/admin.users.v1/components/user-profile.scss b/features/admin.users.v1/components/user-profile.scss index c0a6593b35c..73b06745e92 100644 --- a/features/admin.users.v1/components/user-profile.scss +++ b/features/admin.users.v1/components/user-profile.scss @@ -16,75 +16,45 @@ * under the License. */ -.multi-valued-accordion { - .accordion-summary { - display: flex; - padding: 0px 12px 0px 8px; - flex-wrap: nowrap; - align-items: center; - gap: 4px; - border-radius: 8px; - - .accordion-label { - margin: 0 0 0 8px; - flex-shrink: 0; - padding-right: 4px; - min-width: 250px; - - &.mobile-label { - min-width: 150px; - } + .multi-value-table { + .multi-value-table-data-row { + &:last-child td, &:last-child th { + border: none; } - .verified-icon, .primary-icon { + .table-c1 { + display: flex; + flex-wrap: nowrap; align-items: center; - padding: 0 4px; - } - } - - .accordion-details { - border-radius: 8px; - .multi-value-table { - .multi-value-table-data-row { - &:last-child td, &:last-child th { - border: none; - } - } - - .table-c1 { - display: flex; - flex-wrap: nowrap; - align-items: center; - font-size: 1rem; - - .c1-value{ - margin-bottom: 0; - flex-shrink: 0; - padding-right: 12px; - min-width: 250px; - - &.mobile-label { - min-width: 150px; - } - } - - .verified-icon, .primary-icon { - align-items: center; - padding: 0 4px; + font-size: 1rem; + + .c1-value{ + margin-bottom: 0; + flex-shrink: 0; + padding-right: 12px; + min-width: 250px; + + &.mobile-label { + min-width: 150px; } } - - .table-c2 { - display: flex; - flex-wrap: nowrap; + + .verified-icon, .primary-icon { align-items: center; - justify-content: flex-end; - gap: 4px; + padding: 0 4px; } } - } - - .MuiAccordionDetails-root { - padding: 0px; + + .table-c2 { + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: flex-end; + gap: 4px; + } + + .primary-btn { + white-space: nowrap; + } } } diff --git a/features/admin.users.v1/components/user-profile.tsx b/features/admin.users.v1/components/user-profile.tsx index e472edb6083..f91497688ad 100644 --- a/features/admin.users.v1/components/user-profile.tsx +++ b/features/admin.users.v1/components/user-profile.tsx @@ -240,10 +240,6 @@ export const UserProfile: FunctionComponent = ( const oneTimePassword: string = user[userConfig.userProfileSchema]?.oneTimePassword; const isCurrentUserAdmin: boolean = user?.roles?.some((role: RolesMemberInterface) => role.display === administratorConfig.adminRoleName) ?? false; - const [ expandMultiAttributeAccordion, setExpandMultiAttributeAccordion ] = useState>({ - [EMAIL_ADDRESSES_ATTRIBUTE]: false, - [MOBILE_NUMBERS_ATTRIBUTE]: false - }); const [ isFormStale, setIsFormStale ] = useState(false); const [ isMultipleEmailAndMobileNumberEnabled, setIsMultipleEmailAndMobileNumberEnabled ] = useState(false); @@ -1933,7 +1929,6 @@ export const UserProfile: FunctionComponent = ( attributeValueList.unshift(primaryAttributeValue); } const showAccordion: boolean = attributeValueList.length >= 1; - const accordionLabelValue: string = showAccordion ? attributeValueList[0] : ""; const showVerifiedPopup = (value: string): boolean => { return verificationEnabled && @@ -2024,43 +2019,39 @@ export const UserProfile: FunctionComponent = ( } />
- - { attributeValueList?.map( - (value: string, index: number) => ( - - -
-
- - - + } + disabled={ isSubmitting || isReadOnly } + > + + ) } + header={ t("common:delete") } + size="tiny" + inverted + /> + + + + + ) + ) } + + + ); From 653502ce297bbd9fb3ebc846e39218dde845f3c9 Mon Sep 17 00:00:00 2001 From: Pasindu Yeshan Date: Wed, 8 Jan 2025 13:39:52 +0530 Subject: [PATCH 3/9] myaccount-change primary icon and icon buttons --- .../src/components/profile/profile.scss | 27 +- .../src/components/profile/profile.tsx | 357 ++++++++---------- 2 files changed, 171 insertions(+), 213 deletions(-) diff --git a/apps/myaccount/src/components/profile/profile.scss b/apps/myaccount/src/components/profile/profile.scss index 8d4e000c6c0..1fcfcc75236 100644 --- a/apps/myaccount/src/components/profile/profile.scss +++ b/apps/myaccount/src/components/profile/profile.scss @@ -21,44 +21,45 @@ width: 100%; } - .accordion-details { - border-radius: 8px; - padding: 2px; - - .multi-value-table { - .multi-value-table-data-row { - &:last-child td, &:last-child th { - border: none; - } + .multi-value-table { + .multi-value-table-data-row { + &:last-child td, &:last-child th { + border: none; } .table-c1 { display: flex; flex-wrap: nowrap; align-items: center; - + padding: 0.2em 0; + .c1-value{ margin-bottom: 0; flex-shrink: 0; padding-right: 12px; min-width: 30ch; - + &.mobile-label { min-width: 20ch; } } - + .verified-icon, .primary-icon { align-items: center; } } - + .table-c2 { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 4px; + padding: 0.2em 0; + + .text-btn { + padding: 0px; + } } } } diff --git a/apps/myaccount/src/components/profile/profile.tsx b/apps/myaccount/src/components/profile/profile.tsx index 8fb881854bb..031447e7582 100644 --- a/apps/myaccount/src/components/profile/profile.tsx +++ b/apps/myaccount/src/components/profile/profile.tsx @@ -21,8 +21,8 @@ import TableBody from "@mui/material/TableBody"; import TableCell from "@mui/material/TableCell"; import TableContainer from "@mui/material/TableContainer"; import TableRow from "@mui/material/TableRow"; -import Accordion from "@oxygen-ui/react/Accordion"; -import AccordionDetails from "@oxygen-ui/react/AccordionDetails"; +import Button from "@oxygen-ui/react/Button"; +import Chip from "@oxygen-ui/react/Chip"; import IconButton from "@oxygen-ui/react/IconButton"; import MenuItem from "@oxygen-ui/react/MenuItem"; import Paper from "@oxygen-ui/react/Paper"; @@ -30,6 +30,7 @@ import Select from "@oxygen-ui/react/Select"; import Typography from "@oxygen-ui/react/Typography"; import { ProfileConstants } from "@wso2is/core/constants"; import { IdentityAppsApiException } from "@wso2is/core/exceptions"; + /** * `useRequiredScopes` is not supported for myaccount. */ @@ -168,10 +169,6 @@ export const Profile: FunctionComponent = (props: ProfileProps): R const [ isMobileVerificationEnabled, setIsMobileVerificationEnabled ] = useState(false); const [ isEmailVerificationEnabled, setIsEmailVerificationEnabled ] = useState(false); - const [ expandMultiAttributeAccordion, setExpandMultiAttributeAccordion ] = useState>({ - [EMAIL_ADDRESSES_ATTRIBUTE]: false, - [MOBILE_NUMBERS_ATTRIBUTE]: false - }); const [ isMultipleEmailAndMobileNumberEnabled, setIsMultipleEmailAndMobileNumberEnabled ] = useState(false); @@ -1465,12 +1462,10 @@ export const Profile: FunctionComponent = (props: ProfileProps): R let verifiedAttributeValueList: string[] = []; let primaryAttributeValue: string = ""; let verificationEnabled: boolean = false; - let verifyPopupHeader: string = ""; let pendingEmailAddress: string = ""; let maxAllowedLimit: number = 0; if (schema.name === EMAIL_ADDRESSES_ATTRIBUTE) { - verifyPopupHeader = t("myAccount:components.profile.actions.verifyEmail"); attributeValueList = profileInfo?.get(EMAIL_ADDRESSES_ATTRIBUTE)?.split(",") ?? []; verifiedAttributeValueList = profileInfo?.get(VERIFIED_EMAIL_ADDRESSES_ATTRIBUTE)?.split(",") ?? []; pendingEmailAddress = profileDetails?.profileInfo?.pendingEmails?.length > 0 @@ -1485,7 +1480,6 @@ export const Profile: FunctionComponent = (props: ProfileProps): R maxAllowedLimit = ProfileConstants.MAX_EMAIL_ADDRESSES_ALLOWED; } else if (schema.name === MOBILE_NUMBERS_ATTRIBUTE) { - verifyPopupHeader = t("myAccount:components.profile.actions.verifyMobile"); attributeValueList = profileInfo?.get(MOBILE_NUMBERS_ATTRIBUTE)?.split(",") ?? []; verifiedAttributeValueList = profileInfo?.get(VERIFIED_MOBILE_NUMBERS_ATTRIBUTE)?.split(",") ?? []; primaryAttributeValue = profileInfo?.get(ProfileConstants.SCIM2_SCHEMA_DICTIONARY.get("MOBILE")); @@ -1515,7 +1509,7 @@ export const Profile: FunctionComponent = (props: ProfileProps): R (verifiedAttributeValueList.includes(value) || value === primaryAttributeValue); }; - const showPrimaryPopup = (value: string): boolean => { + const showPrimaryChip = (value: string): boolean => { return value === primaryAttributeValue; }; @@ -1564,176 +1558,155 @@ export const Profile: FunctionComponent = (props: ProfileProps): R } /> + ) + } + + + +
+ + + +
+ + + ) + ) } + + + = (props: ProfileProps): R (verifiedAttributeValueList.includes(value) || value === primaryAttributeValue); }; - const showPrimaryPopup = (value: string): boolean => { + const showPrimaryChip = (value: string): boolean => { return value === primaryAttributeValue; }; @@ -2046,6 +2019,7 @@ export const Profile: FunctionComponent = (props: ProfileProps): R className="multi-attribute-dropdown" value={ attributeValueList[0] } disableUnderline + variant="standard" data-componentid={ `${testId}-${schema.name.replace(".", "-")}-readonly-dropdown` } > { attributeValueList?.map( @@ -2091,7 +2065,7 @@ export const Profile: FunctionComponent = (props: ProfileProps): R ) } { - showPrimaryPopup(value) + showPrimaryChip(value) && (
= (props: ProfileProps): R ${schema.name.replace(".", "-")}-primary-icon -${index}` } > - { generatePrimaryPopup() } +
) } @@ -2300,32 +2277,12 @@ export const Profile: FunctionComponent = (props: ProfileProps): R trigger={ ( - ) - } - header= { t("common:verified") } - inverted - /> - ); - }; - - const generatePrimaryPopup= (): JSX.Element => { - - return ( - ) } - header= { t("common:primary") } + header= { t("common:verified") } inverted /> ); From 4e685e54f416535e6e96358082e6e6aef6c9fdd6 Mon Sep 17 00:00:00 2001 From: Pasindu Yeshan Date: Wed, 8 Jan 2025 13:40:56 +0530 Subject: [PATCH 4/9] Update css to make rows same size - console --- features/admin.users.v1/components/user-profile.scss | 11 +++++++---- features/admin.users.v1/components/user-profile.tsx | 5 ++--- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/features/admin.users.v1/components/user-profile.scss b/features/admin.users.v1/components/user-profile.scss index 73b06745e92..fb60ac85fa6 100644 --- a/features/admin.users.v1/components/user-profile.scss +++ b/features/admin.users.v1/components/user-profile.scss @@ -27,6 +27,7 @@ flex-wrap: nowrap; align-items: center; font-size: 1rem; + padding: 0.2em 0; .c1-value{ margin-bottom: 0; @@ -51,10 +52,12 @@ align-items: center; justify-content: flex-end; gap: 4px; - } - - .primary-btn { - white-space: nowrap; + padding: 0.2em 0; + + .text-btn { + padding: 0px; + white-space: nowrap; + } } } } diff --git a/features/admin.users.v1/components/user-profile.tsx b/features/admin.users.v1/components/user-profile.tsx index f91497688ad..1f2664f55e9 100644 --- a/features/admin.users.v1/components/user-profile.tsx +++ b/features/admin.users.v1/components/user-profile.tsx @@ -21,8 +21,6 @@ import TableBody from "@mui/material/TableBody"; import TableCell from "@mui/material/TableCell"; import TableContainer from "@mui/material/TableContainer"; import TableRow from "@mui/material/TableRow"; -import Accordion from "@oxygen-ui/react/Accordion"; -import AccordionDetails from "@oxygen-ui/react/AccordionDetails"; import Alert from "@oxygen-ui/react/Alert"; import OxygenButton from "@oxygen-ui/react/Button"; import Chip from "@oxygen-ui/react/Chip"; @@ -2101,6 +2099,7 @@ export const UserProfile: FunctionComponent = ( handleVerify(schema, value) } data-componentid={ `${testId}-profile-form` + @@ -2115,7 +2114,7 @@ export const UserProfile: FunctionComponent = ( handleMakePrimary(schema, value) } data-componentid={ `${testId}-profile-form` + From 77633d06fd5ef8269655dfd5a3f30306811ffa48 Mon Sep 17 00:00:00 2001 From: Pasindu Yeshan Date: Wed, 8 Jan 2025 14:59:52 +0530 Subject: [PATCH 5/9] Hide select in single value mode --- .../src/components/profile/profile.tsx | 62 +++++++++++++++++-- 1 file changed, 58 insertions(+), 4 deletions(-) diff --git a/apps/myaccount/src/components/profile/profile.tsx b/apps/myaccount/src/components/profile/profile.tsx index 031447e7582..57e82fb0c62 100644 --- a/apps/myaccount/src/components/profile/profile.tsx +++ b/apps/myaccount/src/components/profile/profile.tsx @@ -2014,8 +2014,8 @@ export const Profile: FunctionComponent = (props: ProfileProps): R { attributeValueList.length < 1 ? generatePlaceholderLink(schema, fieldName) - : ( - = (props: ProfileProps): R ) ) } - - ) + ) + : ( +
+ + { attributeValueList[0] } + + { + showPendingEmailPopup(attributeValueList[0]) + && ( +
+ { generatePendingEmailPopup() } +
+ ) + } + { + showVerifiedPopup(attributeValueList[0]) + && ( +
+ { generateVerifiedPopup() } +
+ ) + } + { + showPrimaryChip(attributeValueList[0]) + && ( +
+ +
+ ) + } +
+ ) } ); From 6c727e21387d92de4cf6fb28735bb34da45c3e95 Mon Sep 17 00:00:00 2001 From: Pasindu Yeshan Date: Wed, 8 Jan 2025 15:00:15 +0530 Subject: [PATCH 6/9] Enable multi emails feature --- apps/myaccount/src/public/deployment.config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/myaccount/src/public/deployment.config.json b/apps/myaccount/src/public/deployment.config.json index 3bc5c223cda..8c446d0c8bd 100644 --- a/apps/myaccount/src/public/deployment.config.json +++ b/apps/myaccount/src/public/deployment.config.json @@ -116,7 +116,7 @@ }, "isCookieConsentBannerEnabled": true, "isHeaderAvatarLabelAllowed": true, - "isMultipleEmailsAndMobileNumbersEnabled": false, + "isMultipleEmailsAndMobileNumbersEnabled": true, "isPasswordInputValidationEnabled": true, "isProfileUsernameReadonly": true, "privacyPolicyConfigs": {}, From c1394df22ae507e372f5b7e091be2dceb581d5e0 Mon Sep 17 00:00:00 2001 From: Pasindu Yeshan Date: Wed, 8 Jan 2025 17:46:36 +0530 Subject: [PATCH 7/9] Add changeset --- .changeset/long-rules-joke.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/long-rules-joke.md diff --git a/.changeset/long-rules-joke.md b/.changeset/long-rules-joke.md new file mode 100644 index 00000000000..5198f1c3fcf --- /dev/null +++ b/.changeset/long-rules-joke.md @@ -0,0 +1,7 @@ +--- +"@wso2is/admin.users.v1": patch +"@wso2is/myaccount": patch +"@wso2is/console": patch +--- + +Improve multi email and mobile UI From d2e5c5e3452139b964c5dc700da3a7b9b9ccc191 Mon Sep 17 00:00:00 2001 From: Pasindu Yeshan Date: Fri, 10 Jan 2025 01:22:50 +0530 Subject: [PATCH 8/9] Refactor code --- .../src/components/profile/profile.scss | 1 - .../src/components/profile/profile.tsx | 213 +++++++----------- 2 files changed, 80 insertions(+), 134 deletions(-) diff --git a/apps/myaccount/src/components/profile/profile.scss b/apps/myaccount/src/components/profile/profile.scss index 1fcfcc75236..4fb293f19c8 100644 --- a/apps/myaccount/src/components/profile/profile.scss +++ b/apps/myaccount/src/components/profile/profile.scss @@ -38,7 +38,6 @@ flex-shrink: 0; padding-right: 12px; min-width: 30ch; - &.mobile-label { min-width: 20ch; } diff --git a/apps/myaccount/src/components/profile/profile.tsx b/apps/myaccount/src/components/profile/profile.tsx index 57e82fb0c62..62f93ff4a3c 100644 --- a/apps/myaccount/src/components/profile/profile.tsx +++ b/apps/myaccount/src/components/profile/profile.tsx @@ -2009,140 +2009,87 @@ export const Profile: FunctionComponent = (props: ProfileProps): R return value === primaryAttributeValue; }; - return ( - <> - { - attributeValueList.length < 1 - ? generatePlaceholderLink(schema, fieldName) - : attributeValueList.length > 1 - ? ( ) - : ( -
- - { attributeValueList[0] } - - { - showPendingEmailPopup(attributeValueList[0]) - && ( -
- { generatePendingEmailPopup() } -
- ) - } - { - showVerifiedPopup(attributeValueList[0]) - && ( -
- { generateVerifiedPopup() } -
- ) - } - { - showPrimaryChip(attributeValueList[0]) - && ( -
- -
- ) - } -
- ) - } - - ); + { generatePendingEmailPopup() } + + ) + } + { + showVerifiedPopup(value) + && ( +
+ { generateVerifiedPopup() } +
+ ) + } + { + showPrimaryChip(value) + && ( +
+ +
+ ) + } + + ); + }; + + if (attributeValueList.length < 1) { + return generatePlaceholderLink(schema, fieldName); + } + + if (attributeValueList.length > 1) { + return ( + + ); + } + + return renderSingleMenuItem(attributeValueList[0], 0); }; const generatePlaceholderLink = (schema: ProfileSchema, fieldName: string): JSX.Element => { From 2ac558913c5a598d0812826711824519e2bdadd3 Mon Sep 17 00:00:00 2001 From: Pasindu Yeshan Date: Fri, 10 Jan 2025 08:40:39 +0530 Subject: [PATCH 9/9] Remove spaces --- apps/myaccount/src/components/profile/profile.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/myaccount/src/components/profile/profile.scss b/apps/myaccount/src/components/profile/profile.scss index 4fb293f19c8..ef998670c17 100644 --- a/apps/myaccount/src/components/profile/profile.scss +++ b/apps/myaccount/src/components/profile/profile.scss @@ -38,16 +38,17 @@ flex-shrink: 0; padding-right: 12px; min-width: 30ch; + &.mobile-label { min-width: 20ch; } } - + .verified-icon, .primary-icon { align-items: center; } } - + .table-c2 { display: flex; flex-wrap: nowrap;