overflow fix

ensdomains · Aug 12, 2024 · f22faac · f22faac
1 parent c720a44
commit f22faac
Showing 1 changed file with 50 additions and 51 deletions.
diff --git a/src/components/@molecules/ProfileEditor/Avatar/AvatarButton.tsx b/src/components/@molecules/ProfileEditor/Avatar/AvatarButton.tsx
@@ -5,14 +5,9 @@ import styled, { css } from 'styled-components'
 import { Avatar, Button, Dropdown } from '@ensdomains/thorin'
 import { DropdownItem } from '@ensdomains/thorin/dist/types/components/molecules/Dropdown/Dropdown'
 
-import { LegacyDropdown } from '@app/components/@molecules/LegacyDropdown/LegacyDropdown'
-
 const AvatarWrapper = styled.button<{ $error?: boolean; $validated?: boolean; $dirty?: boolean }>(
   ({ theme, $validated, $dirty, $error }) => css`
     position: relative;
-    width: 120px;
-    height: 120px;
-    min-width: 120px;
     border-radius: 50%;
     background-color: ${theme.colors.backgroundPrimary};
     cursor: pointer;
@@ -65,15 +60,16 @@ const ActionContainer = styled.div(
   ({ theme }) => css`
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
     gap: ${theme.space[2]};
     overflow: hidden;
   `,
 )
 
 const Container = styled.div(
   ({ theme }) => css`
-    width: 100%;
-    display: flex;
+    display: grid;
+    grid-template-columns: 120px 1fr;
     align-items: center;
     gap: ${theme.space[4]};
   `,
@@ -129,48 +125,51 @@ const AvatarButton = ({
       <AvatarWrapper $validated={validated && dirty} $error={error} $dirty={dirty} type="button">
         <Avatar label="profile-button-avatar" src={src} noBorder />
       </AvatarWrapper>
-      <ActionContainer>
-        {!!src && (
-          <Button disabled colorStyle="accentSecondary">
-            {src}
-          </Button>
-        )}
-        <LegacyDropdown
-          items={
-            [
-              {
-                label: t('input.profileEditor.tabs.avatar.dropdown.selectNFT'),
-                color: 'black',
-                onClick: handleSelectOption('nft'),
-              },
-              {
-                label: t('input.profileEditor.tabs.avatar.dropdown.uploadImage'),
-                color: 'black',
-                onClick: handleSelectOption('upload'),
-              },
-              {
-                label: t('input.profileEditor.tabs.avatar.dropdown.enterManually'),
-                color: 'black',
-                onClick: handleSelectOption('manual'),
-              },
-              ...(validated
-                ? [
-                    {
-                      label: t('action.remove', { ns: 'common' }),
-                      color: 'red',
-                      onClick: handleSelectOption('remove'),
-                    },
-                  ]
-                : []),
-            ] as DropdownItem[]
-          }
-          keepMenuOnTop
-          shortThrow
-          {...dropdownProps}
-        >
-          <Button colorStyle="accentSecondary">
-            {t('input.profileEditor.tabs.avatar.change')}
-          </Button>
+
+      <Dropdown
+        items={
+          [
+            {
+              label: t('input.profileEditor.tabs.avatar.dropdown.selectNFT'),
+              color: 'black',
+              onClick: handleSelectOption('nft'),
+            },
+            {
+              label: t('input.profileEditor.tabs.avatar.dropdown.uploadImage'),
+              color: 'black',
+              onClick: handleSelectOption('upload'),
+            },
+            {
+              label: t('input.profileEditor.tabs.avatar.dropdown.enterManually'),
+              color: 'black',
+              onClick: handleSelectOption('manual'),
+            },
+            ...(validated
+              ? [
+                  {
+                    label: t('action.remove', { ns: 'common' }),
+                    color: 'red',
+                    onClick: handleSelectOption('remove'),
+                  },
+                ]
+              : []),
+          ] as DropdownItem[]
+        }
+        keepMenuOnTop
+        shortThrow
+        {...dropdownProps}
+      >
+        <ActionContainer>
+          {!!src && (
+            <Button disabled colorStyle="accentSecondary">
+              {src}
+            </Button>
+          )}
+          <div>
+            <Button colorStyle="accentSecondary">
+              {t('input.profileEditor.tabs.avatar.change')}
+            </Button>
+          </div>
           <input
             type="file"
             style={{ display: 'none' }}
@@ -183,8 +182,8 @@ const AvatarButton = ({
               }
             }}
           />
-        </LegacyDropdown>
-      </ActionContainer>
+        </ActionContainer>
+      </Dropdown>
     </Container>
   )
 }