Merge pull request #1920 from oasisprotocol/mz/layout

Fix layout when showing notifications
oasisprotocol · May 7, 2024 · b84663f · b84663f
2 parents 519997d + 769fd08
commit b84663f
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 51 deletions.
diff --git a/.changelog/1920.bugfix.md b/.changelog/1920.bugfix.md
@@ -0,0 +1,4 @@
+Fix layout when showing notifications
+
+- Grommet Box with gap prop generates gaps for React null elements.
+  Notification component is using Layer which is null before portal is created
diff --git a/src/app/components/AddressBox/index.tsx b/src/app/components/AddressBox/index.tsx
@@ -49,45 +49,51 @@ const Container = ({ address, border, children, copyToClipboard, separator }: Co
   }
 
   return (
-    <Box
-      align="center"
-      border={border && { color: 'brand' }}
-      direction={isMobile ? 'column' : 'row'}
-      gap={isMobile ? 'medium' : undefined}
-      pad={{ right: 'small' }}
-      round="5px"
-    >
+    <>
       <Box
         align="center"
-        border={
-          separator
-            ? {
-                color: 'background-front-border',
-                side: 'bottom',
-              }
-            : undefined
-        }
-        direction="row"
-        flex
-        pad={{ bottom: isMobile ? 'small' : 'xsmall' }}
-        margin={{ right: isMobile ? undefined : 'large' }}
-        width="690px" // keep the same width for address and name variants
+        border={border && { color: 'brand' }}
+        direction={isMobile ? 'column' : 'row'}
+        gap={isMobile ? 'medium' : undefined}
+        pad={{ right: 'small' }}
+        round="5px"
       >
-        {copyToClipboard === 'icon' && (
-          <Button onClick={() => copyAddress()} icon={<Copy size="18px" />} data-testid="copy-address-icon" />
+        <Box
+          align="center"
+          border={
+            separator
+              ? {
+                  color: 'background-front-border',
+                  side: 'bottom',
+                }
+              : undefined
+          }
+          direction="row"
+          flex
+          pad={{ bottom: isMobile ? 'small' : 'xsmall' }}
+          margin={{ right: isMobile ? undefined : 'large' }}
+          width="690px" // keep the same width for address and name variants
+        >
+          {copyToClipboard === 'icon' && (
+            <Button
+              onClick={() => copyAddress()}
+              icon={<Copy size="18px" />}
+              data-testid="copy-address-icon"
+            />
+          )}
+          <Box flex>{children}</Box>
+        </Box>
+
+        {copyToClipboard === 'button' && (
+          <StyledButton
+            label={trimLongString(address, 8, 6)}
+            onClick={() => copyAddress()}
+            icon={<Copy size="18px" />}
+            data-testid="copy-address-button"
+            reverse
+          />
         )}
-        <Box flex>{children}</Box>
       </Box>
-
-      {copyToClipboard === 'button' && (
-        <StyledButton
-          label={trimLongString(address, 8, 6)}
-          onClick={() => copyAddress()}
-          icon={<Copy size="18px" />}
-          data-testid="copy-address-button"
-          reverse
-        />
-      )}
       {notificationVisible && (
         <Notification
           toast
@@ -96,7 +102,7 @@ const Container = ({ address, border, children, copyToClipboard, separator }: Co
           onClose={hideNotification}
         />
       )}
-    </Box>
+    </>
   )
 }
 

diff --git a/src/app/components/Transaction/InfoBox.tsx b/src/app/components/Transaction/InfoBox.tsx
@@ -30,21 +30,23 @@ export function InfoBox({ children, copyToClipboardValue, icon: IconComponent, l
   }
 
   return (
-    <Box
-      direction="row"
-      gap="small"
-      hoverIndicator={{ color: 'background-contrast' }}
-      pad={{ horizontal: 'small', vertical: 'small' }}
-      onClick={copyToClipboardValue ? copyValue : undefined}
-    >
-      <Box fill="vertical" align="center" justify="center" alignSelf="center" pad={{ right: 'xsmall' }}>
-        <IconComponent color="brand" size="20px" />
-      </Box>
-      <Box justify="center">
-        <Text weight="bold" color="grayMedium" style={{ opacity: 0.5 }}>
-          {label}
-        </Text>
-        {children}
+    <>
+      <Box
+        direction="row"
+        gap="small"
+        hoverIndicator={{ color: 'background-contrast' }}
+        pad={{ horizontal: 'small', vertical: 'small' }}
+        onClick={copyToClipboardValue ? copyValue : undefined}
+      >
+        <Box fill="vertical" align="center" justify="center" alignSelf="center" pad={{ right: 'xsmall' }}>
+          <IconComponent color="brand" size="20px" />
+        </Box>
+        <Box justify="center">
+          <Text weight="bold" color="grayMedium" style={{ opacity: 0.5 }}>
+            {label}
+          </Text>
+          {children}
+        </Box>
       </Box>
       {notificationVisible && (
         <Notification
@@ -54,6 +56,6 @@ export function InfoBox({ children, copyToClipboardValue, icon: IconComponent, l
           onClose={hideNotification}
         />
       )}
-    </Box>
+    </>
   )
 }