Finance, Agent: fix transfers layout (text overflow) (#1271)

aragon · Sep 11, 2020 · 0636c78 · 0636c78
1 parent 809c639
commit 0636c78
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/apps/agent/app/src/components/Transactions.js b/apps/agent/app/src/components/Transactions.js
@@ -191,6 +191,7 @@ const Transactions = React.memo(function Transactions({
             css={`
               ${textStyle('body2')};
               color: ${theme.surfaceContent};
+              white-space: nowrap;
             `}
           >
             {formattedDate}
@@ -237,6 +238,10 @@ const Transactions = React.memo(function Transactions({
             css={`
               ${textStyle('body2')};
               color: ${theme.surfaceContent};
+              padding: ${1 * GU}px 0;
+              overflow-wrap: break-word;
+              word-break: break-word;
+              hyphens: auto;
             `}
           >
             {reference}

diff --git a/apps/finance/app/src/components/Transfers.js b/apps/finance/app/src/components/Transfers.js
@@ -218,7 +218,14 @@ const Transfers = React.memo(({ tokens, transactions }) => {
         )
 
         return [
-          <time dateTime={formattedDate} title={formattedDate}>
+          <time
+            dateTime={formattedDate}
+            title={formattedDate}
+            css={`
+              padding-right: ${2 * GU}px;
+              white-space: nowrap;
+            `}
+          >
             {formatDate(date)}
           </time>,
           <div
@@ -239,7 +246,10 @@ const Transfers = React.memo(({ tokens, transactions }) => {
           </div>,
           <div
             css={`
-              padding: 0 ${0.5 * GU}px;
+              padding: ${1 * GU}px ${0.5 * GU}px;
+              overflow-wrap: break-word;
+              word-break: break-word;
+              hyphens: auto;
             `}
           >
             {reference}