diff --git a/packages/extension-ui/src/Popup/Accounts/Account.tsx b/packages/extension-ui/src/Popup/Accounts/Account.tsx
index 693b8699..006e45e1 100644
--- a/packages/extension-ui/src/Popup/Accounts/Account.tsx
+++ b/packages/extension-ui/src/Popup/Accounts/Account.tsx
@@ -95,19 +95,23 @@ function Account ({ address, className, genesisHash, isExternal, isHidden, paren
Forget Account
-
-
+
+
+
+
+
+
>
), [_onChangeGenesis, _toggleEdit, _toggleVisibility, address, genesisHash, isExternal, isHidden]);
@@ -160,5 +164,9 @@ export default styled(Account)`
margin: 0;
min-width: 13rem;
padding: 4px 16px;
+
+ .inputItem {
+ margin: 0;
+ }
}
`;
diff --git a/packages/extension-ui/src/components/Address.tsx b/packages/extension-ui/src/components/Address.tsx
index c4434509..962070e9 100644
--- a/packages/extension-ui/src/components/Address.tsx
+++ b/packages/extension-ui/src/components/Address.tsx
@@ -250,7 +250,8 @@ const ArrowLabel = styled(Svg).attrs(() => ({ src: parentArrow }))`
`;
const MovableMenu = styled(Menu)<{ isMoved: boolean }>`
- ${({ isMoved }): string => isMoved ? 'bottom: 50px' : ''};
+ ${({ isMoved }): string => isMoved ? 'bottom: 0;' : ''}
+ right: 28px;
`;
export default styled(Address)(({ theme }: ThemeProps) => `
diff --git a/packages/extension-ui/src/components/MenuItem.tsx b/packages/extension-ui/src/components/MenuItem.tsx
index c3020025..0991f067 100644
--- a/packages/extension-ui/src/components/MenuItem.tsx
+++ b/packages/extension-ui/src/components/MenuItem.tsx
@@ -26,6 +26,7 @@ function MenuItem ({ children, className = '', title }: Props): React.ReactEleme
}
export default styled(MenuItem)`
+ min-width: 13rem;
padding: 0 16px;
max-width: 100%;
diff --git a/packages/extension-ui/src/hooks/useOutsideClick.ts b/packages/extension-ui/src/hooks/useOutsideClick.ts
index f7f40435..2440ade2 100644
--- a/packages/extension-ui/src/hooks/useOutsideClick.ts
+++ b/packages/extension-ui/src/hooks/useOutsideClick.ts
@@ -2,14 +2,14 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
-import { useEffect, RefObject } from 'react';
+import { useCallback, useEffect, RefObject } from 'react';
export default function useOutsideClick (ref: RefObject, callback: () => void): void {
- const handleClick = (e: MouseEvent): void => {
+ const handleClick = useCallback((e: MouseEvent): void => {
if (ref.current && !ref.current.contains(e.target as HTMLInputElement)) {
callback();
}
- };
+ }, [callback, ref]);
useEffect(() => {
document.addEventListener('click', handleClick);