Merge pull request #4696 from vluna/4598-2

Fix stacking button elements in container [Fixes #4598]

Author: minimalsm

src/pages/stablecoins.js

@@ -249,8 +249,15 @@ const InfoIcon = styled(Icon)`
   fill: ${(props) => props.theme.colors.text};
 `
 
-const ButtonLinkRight = styled(ButtonLink)`
-  margin-left: 1rem;
+const ButtonLinkWrap = styled(ButtonLink)`
+  white-space: break-spaces;
+`
+
+const ButtonLinkContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-flow: wrap;
+  gap: 1em;
 `
 
 const tooltipContent = (
@@ -739,14 +746,14 @@ const StablecoinsPage = ({ data }) => {
             intl
           )}
         >
-          <div>
+          <ButtonLinkContainer>
             <ButtonLink to="/dapps/">
               <Translation id="page-stablecoins-explore-dapps" />
             </ButtonLink>
-            <ButtonLinkRight isSecondary to="/defi/">
+            <ButtonLinkWrap isSecondary to="/defi/">
               <Translation id="page-stablecoins-more-defi-button" />
-            </ButtonLinkRight>
-          </div>
+            </ButtonLinkWrap>
+          </ButtonLinkContainer>
         </StyledCalloutBanner>
         <h2>
           <Translation id="page-stablecoins-save-stablecoins" />