Merge pull request #1864 from oasisprotocol/lw/extension-long-strings

Fix long strings overflowing their container in extension layout
oasisprotocol · Apr 1, 2024 · 9fd6c69 · 9fd6c69
2 parents 338485e + d54191d
commit 9fd6c69
Show file tree

Hide file tree

Showing 13 changed files with 21 additions and 15 deletions.
diff --git a/.changelog/1864.bugfix.md 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
@@ -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
@@ -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
@@ -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
@@ -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/...pages/ParaTimesPage/ParaTimesPageInaccessible/__tests__/__snapshots__/index.test.tsx.snap b/...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
@@ -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/...p/pages/ParaTimesPage/TransactionConfirmation/__tests__/__snapshots__/index.test.tsx.snap b/...p/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Fix long strings overflowing their container in extension layout