diff --git a/.changelog/1920.bugfix.md b/.changelog/1920.bugfix.md
new file mode 100644
index 0000000000..58e9f05c71
--- /dev/null
+++ 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
index 5f312c6461..33856c2782 100644
--- 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 (
-
+ <>
- {copyToClipboard === 'icon' && (
-
-
- {copyToClipboard === 'button' && (
- copyAddress()}
- icon={}
- data-testid="copy-address-button"
- reverse
- />
- )}
{notificationVisible && (
)}
-
+ >
)
}
diff --git a/src/app/components/Transaction/InfoBox.tsx b/src/app/components/Transaction/InfoBox.tsx
index 8443231d62..8ed40ffad0 100644
--- 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 (
-
-
-
-
-
-
- {label}
-
- {children}
+ <>
+
+
+
+
+
+
+ {label}
+
+ {children}
+
{notificationVisible && (
)}
-
+ >
)
}