diff --git a/web/src/v1.0.0/App.tsx b/web/src/v1.0.0/App.tsx
index d5dd3b60b..ebe3063ba 100644
--- a/web/src/v1.0.0/App.tsx
+++ b/web/src/v1.0.0/App.tsx
@@ -1,3 +1,4 @@
+import { createPortal } from 'react-dom'
 import { ToastContainer } from 'react-toastify'
 import Header from './components/Header'
 import { ToastOptionsShortcuts } from '../helpers'
@@ -111,7 +112,10 @@ const App = () => {
             </main>
             <footer className="footer"></footer>
 
-            <ToastContainer {...ToastOptionsShortcuts.Default} />
+            {createPortal(
+                <ToastContainer {...ToastOptionsShortcuts.Default} />,
+                document.body,
+            )}
             <ToastStatus />
             <BaseModal />
         </div>
diff --git a/web/src/v1.0.0/pages/DaoLayout.tsx b/web/src/v1.0.0/pages/DaoLayout.tsx
index 9c6aec43d..1a7ce9886 100644
--- a/web/src/v1.0.0/pages/DaoLayout.tsx
+++ b/web/src/v1.0.0/pages/DaoLayout.tsx
@@ -67,7 +67,7 @@ const DaoLayout = () => {
                         </span>
                     </h1>
                     <CopyClipboard
-                        className="text-xs text-gray-7c8db5"
+                        className="w-fit text-xs text-gray-7c8db5"
                         label={
                             <span
                                 data-tooltip-id="common-tip"
diff --git a/web/src/v2.0.0/App.tsx b/web/src/v2.0.0/App.tsx
index b7bc4092d..36e7d4e2e 100644
--- a/web/src/v2.0.0/App.tsx
+++ b/web/src/v2.0.0/App.tsx
@@ -1,3 +1,4 @@
+import { createPortal } from 'react-dom'
 import { ToastContainer } from 'react-toastify'
 import Header from './components/Header'
 import { ToastOptionsShortcuts } from '../helpers'
@@ -122,7 +123,10 @@ const App = () => {
             </main>
             <footer className="footer"></footer>
 
-            <ToastContainer {...ToastOptionsShortcuts.Default} />
+            {createPortal(
+                <ToastContainer {...ToastOptionsShortcuts.Default} />,
+                document.body,
+            )}
             <ToastStatus />
             <BaseModal />
         </div>
diff --git a/web/src/v2.0.0/pages/DaoLayout.tsx b/web/src/v2.0.0/pages/DaoLayout.tsx
index 6d9891ac2..ba93e07b3 100644
--- a/web/src/v2.0.0/pages/DaoLayout.tsx
+++ b/web/src/v2.0.0/pages/DaoLayout.tsx
@@ -87,7 +87,7 @@ const DaoLayout = () => {
                     <DaoSummary className="my-2 text-sm" />
 
                     <CopyClipboard
-                        className="text-xs text-gray-7c8db5"
+                        className="w-fit text-xs text-gray-7c8db5"
                         label={
                             <span
                                 data-tooltip-id="common-tip"
diff --git a/web/src/v3.0.0/App.tsx b/web/src/v3.0.0/App.tsx
index b7bc4092d..36e7d4e2e 100644
--- a/web/src/v3.0.0/App.tsx
+++ b/web/src/v3.0.0/App.tsx
@@ -1,3 +1,4 @@
+import { createPortal } from 'react-dom'
 import { ToastContainer } from 'react-toastify'
 import Header from './components/Header'
 import { ToastOptionsShortcuts } from '../helpers'
@@ -122,7 +123,10 @@ const App = () => {
             </main>
             <footer className="footer"></footer>
 
-            <ToastContainer {...ToastOptionsShortcuts.Default} />
+            {createPortal(
+                <ToastContainer {...ToastOptionsShortcuts.Default} />,
+                document.body,
+            )}
             <ToastStatus />
             <BaseModal />
         </div>
diff --git a/web/src/v3.0.0/pages/DaoLayout.tsx b/web/src/v3.0.0/pages/DaoLayout.tsx
index 6d9891ac2..ba93e07b3 100644
--- a/web/src/v3.0.0/pages/DaoLayout.tsx
+++ b/web/src/v3.0.0/pages/DaoLayout.tsx
@@ -87,7 +87,7 @@ const DaoLayout = () => {
                     <DaoSummary className="my-2 text-sm" />
 
                     <CopyClipboard
-                        className="text-xs text-gray-7c8db5"
+                        className="w-fit text-xs text-gray-7c8db5"
                         label={
                             <span
                                 data-tooltip-id="common-tip"
diff --git a/web/src/v4.0.0/App.tsx b/web/src/v4.0.0/App.tsx
index b7bc4092d..36e7d4e2e 100644
--- a/web/src/v4.0.0/App.tsx
+++ b/web/src/v4.0.0/App.tsx
@@ -1,3 +1,4 @@
+import { createPortal } from 'react-dom'
 import { ToastContainer } from 'react-toastify'
 import Header from './components/Header'
 import { ToastOptionsShortcuts } from '../helpers'
@@ -122,7 +123,10 @@ const App = () => {
             </main>
             <footer className="footer"></footer>
 
-            <ToastContainer {...ToastOptionsShortcuts.Default} />
+            {createPortal(
+                <ToastContainer {...ToastOptionsShortcuts.Default} />,
+                document.body,
+            )}
             <ToastStatus />
             <BaseModal />
         </div>
diff --git a/web/src/v4.0.0/pages/DaoLayout.tsx b/web/src/v4.0.0/pages/DaoLayout.tsx
index 6d9891ac2..ba93e07b3 100644
--- a/web/src/v4.0.0/pages/DaoLayout.tsx
+++ b/web/src/v4.0.0/pages/DaoLayout.tsx
@@ -87,7 +87,7 @@ const DaoLayout = () => {
                     <DaoSummary className="my-2 text-sm" />
 
                     <CopyClipboard
-                        className="text-xs text-gray-7c8db5"
+                        className="w-fit text-xs text-gray-7c8db5"
                         label={
                             <span
                                 data-tooltip-id="common-tip"
diff --git a/web/src/v5.0.0/App.tsx b/web/src/v5.0.0/App.tsx
index b7bc4092d..36e7d4e2e 100644
--- a/web/src/v5.0.0/App.tsx
+++ b/web/src/v5.0.0/App.tsx
@@ -1,3 +1,4 @@
+import { createPortal } from 'react-dom'
 import { ToastContainer } from 'react-toastify'
 import Header from './components/Header'
 import { ToastOptionsShortcuts } from '../helpers'
@@ -122,7 +123,10 @@ const App = () => {
             </main>
             <footer className="footer"></footer>
 
-            <ToastContainer {...ToastOptionsShortcuts.Default} />
+            {createPortal(
+                <ToastContainer {...ToastOptionsShortcuts.Default} />,
+                document.body,
+            )}
             <ToastStatus />
             <BaseModal />
         </div>
diff --git a/web/src/v5.0.0/pages/DaoLayout.tsx b/web/src/v5.0.0/pages/DaoLayout.tsx
index 6d9891ac2..ba93e07b3 100644
--- a/web/src/v5.0.0/pages/DaoLayout.tsx
+++ b/web/src/v5.0.0/pages/DaoLayout.tsx
@@ -87,7 +87,7 @@ const DaoLayout = () => {
                     <DaoSummary className="my-2 text-sm" />
 
                     <CopyClipboard
-                        className="text-xs text-gray-7c8db5"
+                        className="w-fit text-xs text-gray-7c8db5"
                         label={
                             <span
                                 data-tooltip-id="common-tip"
diff --git a/web/src/v5.1.0/App.tsx b/web/src/v5.1.0/App.tsx
index b7bc4092d..36e7d4e2e 100644
--- a/web/src/v5.1.0/App.tsx
+++ b/web/src/v5.1.0/App.tsx
@@ -1,3 +1,4 @@
+import { createPortal } from 'react-dom'
 import { ToastContainer } from 'react-toastify'
 import Header from './components/Header'
 import { ToastOptionsShortcuts } from '../helpers'
@@ -122,7 +123,10 @@ const App = () => {
             </main>
             <footer className="footer"></footer>
 
-            <ToastContainer {...ToastOptionsShortcuts.Default} />
+            {createPortal(
+                <ToastContainer {...ToastOptionsShortcuts.Default} />,
+                document.body,
+            )}
             <ToastStatus />
             <BaseModal />
         </div>
diff --git a/web/src/v5.1.0/pages/DaoLayout.tsx b/web/src/v5.1.0/pages/DaoLayout.tsx
index 6d9891ac2..ba93e07b3 100644
--- a/web/src/v5.1.0/pages/DaoLayout.tsx
+++ b/web/src/v5.1.0/pages/DaoLayout.tsx
@@ -87,7 +87,7 @@ const DaoLayout = () => {
                     <DaoSummary className="my-2 text-sm" />
 
                     <CopyClipboard
-                        className="text-xs text-gray-7c8db5"
+                        className="w-fit text-xs text-gray-7c8db5"
                         label={
                             <span
                                 data-tooltip-id="common-tip"
diff --git a/web/src/v6.0.0/App.tsx b/web/src/v6.0.0/App.tsx
index b7bc4092d..36e7d4e2e 100644
--- a/web/src/v6.0.0/App.tsx
+++ b/web/src/v6.0.0/App.tsx
@@ -1,3 +1,4 @@
+import { createPortal } from 'react-dom'
 import { ToastContainer } from 'react-toastify'
 import Header from './components/Header'
 import { ToastOptionsShortcuts } from '../helpers'
@@ -122,7 +123,10 @@ const App = () => {
             </main>
             <footer className="footer"></footer>
 
-            <ToastContainer {...ToastOptionsShortcuts.Default} />
+            {createPortal(
+                <ToastContainer {...ToastOptionsShortcuts.Default} />,
+                document.body,
+            )}
             <ToastStatus />
             <BaseModal />
         </div>
diff --git a/web/src/v6.0.0/pages/DaoLayout.tsx b/web/src/v6.0.0/pages/DaoLayout.tsx
index 6d9891ac2..ba93e07b3 100644
--- a/web/src/v6.0.0/pages/DaoLayout.tsx
+++ b/web/src/v6.0.0/pages/DaoLayout.tsx
@@ -87,7 +87,7 @@ const DaoLayout = () => {
                     <DaoSummary className="my-2 text-sm" />
 
                     <CopyClipboard
-                        className="text-xs text-gray-7c8db5"
+                        className="w-fit text-xs text-gray-7c8db5"
                         label={
                             <span
                                 data-tooltip-id="common-tip"
diff --git a/web/src/v6.1.0/App.tsx b/web/src/v6.1.0/App.tsx
index 4c0028d3d..495a7a863 100644
--- a/web/src/v6.1.0/App.tsx
+++ b/web/src/v6.1.0/App.tsx
@@ -1,3 +1,4 @@
+import { createPortal } from 'react-dom'
 import { ToastContainer } from 'react-toastify'
 import Header from './components/Header'
 import { ToastOptionsShortcuts } from '../helpers'
@@ -131,7 +132,10 @@ const App = () => {
             </main>
             <footer className="footer"></footer>
 
-            <ToastContainer {...ToastOptionsShortcuts.Default} />
+            {createPortal(
+                <ToastContainer {...ToastOptionsShortcuts.Default} />,
+                document.body,
+            )}
             <ToastStatus />
             <BaseModal />
         </div>
diff --git a/web/src/v6.1.0/pages/DaoLayout.tsx b/web/src/v6.1.0/pages/DaoLayout.tsx
index f3e7b2b22..eb5dd3a77 100644
--- a/web/src/v6.1.0/pages/DaoLayout.tsx
+++ b/web/src/v6.1.0/pages/DaoLayout.tsx
@@ -88,7 +88,7 @@ const DaoLayout = () => {
                     <DaoSummary className="my-2 text-sm" />
 
                     <CopyClipboard
-                        className="text-xs text-gray-7c8db5"
+                        className="w-fit text-xs text-gray-7c8db5"
                         label={
                             <span
                                 data-tooltip-id="common-tip"