diff --git a/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx b/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx
index 720a086eef..2395cd74a8 100644
--- a/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx
+++ b/src/components/UserProfile/BasicInformationTab/BasicInformationTab.jsx
@@ -334,14 +334,16 @@ export const formatPhoneNumber = str => {
};
export const Phone = props => {
- const { userProfile, setUserProfile, handleUserProfile, canEdit, desktopDisplay ,darkMode} = props;
+ const { userProfile, setUserProfile, handleUserProfile, canEdit, desktopDisplay, darkMode } = props;
const { phoneNumber, privacySettings } = userProfile;
const phoneInputWrapperRef = useRef(null);
+
if (canEdit) {
return (
<>
+ {/* one toggle, same as Email */}
{
handleUserProfile={handleUserProfile}
darkMode={darkMode}
/>
- {
- setUserProfile({ ...userProfile, phoneNumber: phoneNumber.trim() });
- }}
- />
- {
- const input = phoneInputWrapperRef.current?.querySelector('input');
- if (input) {
- navigator.clipboard.writeText(input.value);
- toast.success('Phone number copied!');
- }
- }}
- title="Copy phone number"
- style={{
- position: 'absolute',
- right: '12px',
- top: '50%',
- transform: 'translateY(-50%)',
- cursor: 'pointer',
- fontSize: '1rem',
- color: darkMode ? '#fff' : '#000',
- zIndex: 2,
- }}
- />
-
+
+ {/* wrapper to position the copy icon correctly */}
+
+
{
+ setUserProfile({ ...userProfile, phoneNumber: value.trim() });
+ }}
+ />
+
+ {
+ const input = phoneInputWrapperRef.current?.querySelector('input');
+ if (input) {
+ navigator.clipboard.writeText(input.value);
+ toast.success('Phone number copied!');
+ }
+ }}
+ style={{
+ position: 'absolute',
+ cursor: 'pointer',
+ fontSize: '1rem',
+ color: darkMode ? '#fff' : '#000',
+ top: '50%',
+ right: '10px',
+ transform: 'translateY(-50%)',
+ zIndex: 2,
+ }}
+ />
+
>
);
}
+
return (
<>
{privacySettings?.phoneNumber && (