diff --git a/.changelog/1864.bugfix.md b/.changelog/1864.bugfix.md
new file mode 100644
index 0000000000..c8354ce021
--- /dev/null
+++ b/.changelog/1864.bugfix.md
@@ -0,0 +1 @@
+Fix long strings overflowing their container in extension layout
diff --git a/src/app/pages/ParaTimesPage/ParaTimeContent/index.tsx b/src/app/pages/ParaTimesPage/ParaTimeContent/index.tsx
index 109a52a616..aaaaa53a1a 100644
--- a/src/app/pages/ParaTimesPage/ParaTimeContent/index.tsx
+++ b/src/app/pages/ParaTimesPage/ParaTimeContent/index.tsx
@@ -27,7 +27,7 @@ export const ParaTimeContent = ({ children, description, header, isLoading }: Pa
             ? t('paraTimes.common.depositHeader', 'Deposit to ParaTime')
             : t('paraTimes.common.withdrawHeader', 'Withdraw from ParaTime'))}
       </Heading>
-      <Box margin={{ bottom: 'large' }} style={{ maxWidth: '550px' }}>
+      <Box margin={{ bottom: 'large' }} style={{ maxWidth: 'min(100%, 550px)' }}>
         <Text
           data-testid="paraTime-content-description"
           textAlign="center"
diff --git a/src/app/pages/ParaTimesPage/ParaTimeSelection/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/ParaTimesPage/ParaTimeSelection/__tests__/__snapshots__/index.test.tsx.snap
index 8745933d56..c5a1313513 100644
--- a/src/app/pages/ParaTimesPage/ParaTimeSelection/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/ParaTimesPage/ParaTimeSelection/__tests__/__snapshots__/index.test.tsx.snap
@@ -441,7 +441,7 @@ exports[`<ParaTimeSelection /> should render component 1`] = `
     </h3>
     <div
       class="c2"
-      style="max-width: 550px;"
+      style="max-width: min(100%, 550px);"
     >
       <span
         class="c3"
@@ -456,7 +456,7 @@ exports[`<ParaTimeSelection /> should render component 1`] = `
       <form>
         <div
           class="c5"
-          style="max-width: 300px;"
+          style="max-width: min(100%, 300px);"
         >
           <div
             class="c6"
diff --git a/src/app/pages/ParaTimesPage/ParaTimeSelection/index.tsx b/src/app/pages/ParaTimesPage/ParaTimeSelection/index.tsx
index aed61ad697..68822a670b 100644
--- a/src/app/pages/ParaTimesPage/ParaTimeSelection/index.tsx
+++ b/src/app/pages/ParaTimesPage/ParaTimeSelection/index.tsx
@@ -73,7 +73,7 @@ export const ParaTimeSelection = () => {
         onSubmit={navigateToRecipient}
         value={transactionForm}
       >
-        <Box style={{ maxWidth: '300px' }}>
+        <Box style={{ maxWidth: 'min(100%, 300px)' }}>
           <Box margin={{ bottom: 'medium' }}>
             <FormField name="paraTime" required>
               <Select
diff --git a/src/app/pages/ParaTimesPage/ParaTimeTransferType/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/ParaTimesPage/ParaTimeTransferType/__tests__/__snapshots__/index.test.tsx.snap
index 788c1c7b21..20a8ebcc50 100644
--- a/src/app/pages/ParaTimesPage/ParaTimeTransferType/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/ParaTimesPage/ParaTimeTransferType/__tests__/__snapshots__/index.test.tsx.snap
@@ -261,7 +261,7 @@ exports[`<ParaTimeTransferType /> should render component 1`] = `
     </h3>
     <div
       class="c2"
-      style="max-width: 550px;"
+      style="max-width: min(100%, 550px);"
     >
       <span
         class="c3"
diff --git a/src/app/pages/ParaTimesPage/ParaTimesPageInaccessible/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/ParaTimesPage/ParaTimesPageInaccessible/__tests__/__snapshots__/index.test.tsx.snap
index 3ce8ba413e..094e9bd253 100644
--- a/src/app/pages/ParaTimesPage/ParaTimesPageInaccessible/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/ParaTimesPage/ParaTimesPageInaccessible/__tests__/__snapshots__/index.test.tsx.snap
@@ -100,7 +100,7 @@ exports[`<ParaTimesPageInaccessible /> should render component 1`] = `
     </h3>
     <div
       class="c2"
-      style="max-width: 550px;"
+      style="max-width: min(100%, 550px);"
     >
       <span
         class="c3"
diff --git a/src/app/pages/ParaTimesPage/TransactionAmount/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/ParaTimesPage/TransactionAmount/__tests__/__snapshots__/index.test.tsx.snap
index aafec9e5aa..ce594be183 100644
--- a/src/app/pages/ParaTimesPage/TransactionAmount/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/ParaTimesPage/TransactionAmount/__tests__/__snapshots__/index.test.tsx.snap
@@ -608,7 +608,7 @@ exports[`<TransactionAmount /> should render component 1`] = `
     </h3>
     <div
       class="c2"
-      style="max-width: 550px;"
+      style="max-width: min(100%, 550px);"
     >
       <span
         class="c3"
diff --git a/src/app/pages/ParaTimesPage/TransactionConfirmation/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/ParaTimesPage/TransactionConfirmation/__tests__/__snapshots__/index.test.tsx.snap
index 1449091d87..803b1d298d 100644
--- a/src/app/pages/ParaTimesPage/TransactionConfirmation/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/ParaTimesPage/TransactionConfirmation/__tests__/__snapshots__/index.test.tsx.snap
@@ -533,7 +533,7 @@ exports[`<TransactionConfirmation /> should render component 1`] = `
     </h3>
     <div
       class="c2"
-      style="max-width: 550px;"
+      style="max-width: min(100%, 550px);"
     >
       <span
         class="c3"
@@ -574,7 +574,7 @@ exports[`<TransactionConfirmation /> should render component 1`] = `
       <form>
         <div
           class="c5"
-          style="max-width: 450px;"
+          style="max-width: min(100%, 450px);"
         >
           <div
             class="c6"
diff --git a/src/app/pages/ParaTimesPage/TransactionConfirmation/index.tsx b/src/app/pages/ParaTimesPage/TransactionConfirmation/index.tsx
index 8a435dbd4f..de4b6a4357 100644
--- a/src/app/pages/ParaTimesPage/TransactionConfirmation/index.tsx
+++ b/src/app/pages/ParaTimesPage/TransactionConfirmation/index.tsx
@@ -33,7 +33,7 @@ export const ConfirmationCheckbox = ({
   const isMobile = useContext(ResponsiveContext) === 'small'
 
   return (
-    <Box margin={{ bottom: 'medium' }} style={{ maxWidth: '450px' }}>
+    <Box margin={{ bottom: 'medium' }} style={{ maxWidth: 'min(100%, 450px)' }}>
       <Box margin={{ bottom: 'small' }} responsive={false}>
         <AlertBox status={warning ? 'warning' : 'error'}>
           <Text textAlign="center" size={isMobile ? '16px' : 'medium'}>
diff --git a/src/app/pages/ParaTimesPage/TransactionError/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/ParaTimesPage/TransactionError/__tests__/__snapshots__/index.test.tsx.snap
index 170d56b89d..c036da6bb8 100644
--- a/src/app/pages/ParaTimesPage/TransactionError/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/ParaTimesPage/TransactionError/__tests__/__snapshots__/index.test.tsx.snap
@@ -433,7 +433,7 @@ exports[`<TransactionError /> should render component 1`] = `
     </h3>
     <div
       class="c2"
-      style="max-width: 550px;"
+      style="max-width: min(100%, 550px);"
     >
       <span
         class="c3"
@@ -473,7 +473,7 @@ exports[`<TransactionError /> should render component 1`] = `
     >
       <div
         class="c5"
-        style="max-width: 550px;"
+        style="max-width: min(100%, 550px);"
       >
         <svg
           aria-label="Status is critical"
diff --git a/src/app/pages/ParaTimesPage/TransactionError/index.tsx b/src/app/pages/ParaTimesPage/TransactionError/index.tsx
index cc8dbd8e2d..ae4ed792db 100644
--- a/src/app/pages/ParaTimesPage/TransactionError/index.tsx
+++ b/src/app/pages/ParaTimesPage/TransactionError/index.tsx
@@ -55,7 +55,12 @@ export const TransactionError = () => {
       }
     >
       {transactionError && (
-        <Box margin={{ bottom: 'medium' }} align="center" gap="medium" style={{ maxWidth: '550px' }}>
+        <Box
+          margin={{ bottom: 'medium' }}
+          align="center"
+          gap="medium"
+          style={{ maxWidth: 'min(100%, 550px)' }}
+        >
           <StatusCritical size="80px" color="status-error" />
           <AlertBox status="error">
             <ErrorFormatter code={transactionError.code} message={transactionError.message} />
diff --git a/src/app/pages/ParaTimesPage/TransactionRecipient/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/ParaTimesPage/TransactionRecipient/__tests__/__snapshots__/index.test.tsx.snap
index 98a846eed3..e11627d9cc 100644
--- a/src/app/pages/ParaTimesPage/TransactionRecipient/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/ParaTimesPage/TransactionRecipient/__tests__/__snapshots__/index.test.tsx.snap
@@ -350,7 +350,7 @@ exports[`<TransactionRecipient /> should render component 1`] = `
     </h3>
     <div
       class="c2"
-      style="max-width: 550px;"
+      style="max-width: min(100%, 550px);"
     >
       <span
         class="c3"
diff --git a/src/app/pages/ParaTimesPage/TransactionSummary/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/ParaTimesPage/TransactionSummary/__tests__/__snapshots__/index.test.tsx.snap
index 18ad44c34b..9d1b88fabc 100644
--- a/src/app/pages/ParaTimesPage/TransactionSummary/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/ParaTimesPage/TransactionSummary/__tests__/__snapshots__/index.test.tsx.snap
@@ -316,7 +316,7 @@ exports[`<TransactionSummary /> should render component 1`] = `
     </h3>
     <div
       class="c2"
-      style="max-width: 550px;"
+      style="max-width: min(100%, 550px);"
     >
       <span
         class="c3"