fix a few layout bugs

ensdomains · Jan 12, 2025 · 38e55e9 · 38e55e9
1 parent 7d204d4
commit 38e55e9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git a/components/src/components/atoms/Field/Field.tsx b/components/src/components/atoms/Field/Field.tsx
@@ -182,7 +182,12 @@ const ErrorBox = ({
   $inline,
   ...props
 }: React.ComponentProps<typeof Typography> & { $inline: boolean }) => (
-  <Typography padding={$inline ? '0' : '2'} {...props} />
+  <Typography
+    color="redPrimary"
+    fontVariant="smallBold"
+    px={$inline ? '0' : '2'}
+    {...props}
+  />
 )
 
 const DecorativeContent = ({
@@ -207,8 +212,7 @@ const DecorativeContent = ({
         aria-live="polite"
         {...ids.error}
         $inline={inline}
-        color="redPrimary"
-        fontVariant="smallBold"
+
       >
         {error}
       </ErrorBox>

diff --git a/components/src/components/molecules/Profile/styles.css.ts b/components/src/components/molecules/Profile/styles.css.ts
@@ -22,7 +22,7 @@ export const variants = recipe({
         height: '10',
         padding: '0',
         width: '10',
-        maxWidth: '0',
+        maxWidth: '10',
         paddingRight: '0',
       }),
       medium: sprinkles({

diff --git a/docs/src/reference/mdx/molecules/Profile.docs.mdx b/docs/src/reference/mdx/molecules/Profile.docs.mdx
@@ -63,12 +63,12 @@ import { Profile } from '@ensdomains/thorin'
     address="0xb6e040c9ecaae172a89bd561c5f73e1c48d28cd9"
     avatar="https://i.imgur.com/BSJBpQE.jpg"
     dropdownItems={[
-      { label: 'Dashboard', onClick: () => null, icon: <DotGridSVG /> },
+      { label: 'Dashboard', onClick: () => null, icon: DotGridSVG },
       {
         label: 'Disconnect',
         onClick: () => null,
         color: 'red',
-        icon: <ExitSVG />,
+        icon: ExitSVG,
       },
     ]}
     ensName="frontend.ens.eth"
@@ -87,14 +87,14 @@ import { Profile } from '@ensdomains/thorin'
       {
         label: 'Dashboard',
         onClick: () => null,
-        icon: <DotGridSVG />,
+        icon: DotGridSVG,
         showIndicator: true,
       },
       {
         label: 'Disconnect',
         onClick: () => null,
         color: 'red',
-        icon: <ExitSVG />,
+        icon: ExitSVG,
       },
     ]}
     ensName="frontend.ens.eth"
@@ -113,14 +113,14 @@ import { Profile } from '@ensdomains/thorin'
       {
         label: 'Dashboard',
         onClick: () => null,
-        icon: <DotGridSVG />,
+        icon: DotGridSVG,
         showIndicator: true,
       },
       {
         label: 'Disconnect',
         onClick: () => null,
         color: 'red',
-        icon: <ExitSVG />,
+        icon: ExitSVG,
       },
     ]}
     ensName="frontend.ens.eth"
@@ -144,12 +144,12 @@ import { Profile } from '@ensdomains/thorin'
       address="0xb6e040c9ecaae172a89bd561c5f73e1c48d28cd9"
       avatar="https://i.imgur.com/BSJBpQE.jpg"
       dropdownItems={[
-        { label: 'Dashboard', onClick: () => null, icon: <DotGridSVG /> },
+        { label: 'Dashboard', onClick: () => null, icon: DotGridSVG },
         {
           label: 'Disconnect',
           onClick: () => null,
           color: 'red',
-          icon: <ExitSVG />,
+          icon: ExitSVG,
         },
       ]}
       ensName="frontend.ens.eth"
@@ -162,7 +162,7 @@ import { Profile } from '@ensdomains/thorin'
 
 ```tsx live=true
 <Card style={{ backgroundColor: 'grey' }}>
-  <Box display="flex" flexDirection="row" flexWrap="wrap" gap="4">
+  <Box display="flex" flexDirection="row" flexWrap="wrap" gap="4" alignItems="center">
     <Profile
       address="0xb6e040c9ecaae172a89bd561c5f73e1c48d28cd9"
       avatar="https://i.imgur.com/BSJBpQE.jpg"