From 333c18098cf2813f6dc3597a811e7d69caad5644 Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Fri, 15 Nov 2024 17:51:29 +0000
Subject: [PATCH 1/2] feat: refactor trade container styles

---
 apps/cowswap-frontend/src/common/pure/RateInfo/index.tsx    | 6 ++++--
 .../src/common/pure/TradeDetailsAccordion/styled.ts         | 5 ++---
 .../limitOrders/containers/LimitOrdersWidget/styled.tsx     | 2 ++
 .../src/modules/trade/containers/TradeWidget/styled.tsx     | 6 ++++++
 .../src/modules/trade/containers/TradeWidgetLinks/styled.ts | 2 --
 5 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/apps/cowswap-frontend/src/common/pure/RateInfo/index.tsx b/apps/cowswap-frontend/src/common/pure/RateInfo/index.tsx
index 107c7a37db..63ff4d9f56 100644
--- a/apps/cowswap-frontend/src/common/pure/RateInfo/index.tsx
+++ b/apps/cowswap-frontend/src/common/pure/RateInfo/index.tsx
@@ -84,7 +84,9 @@ const InvertIcon = styled.div`
     min-width: var(--size);
     min-height: var(--size);
     border-radius: var(--size);
-    transition: background var(${UI.ANIMATION_DURATION}) ease-in-out, var(${UI.ANIMATION_DURATION}) ease-in-out;
+    transition:
+      background var(${UI.ANIMATION_DURATION}) ease-in-out,
+      var(${UI.ANIMATION_DURATION}) ease-in-out;
   }
 
   > svg {
@@ -118,7 +120,7 @@ export const RateWrapper = styled.button`
   color: inherit;
   font-size: 13px;
   letter-spacing: -0.1px;
-  text-align: right;
+  text-align: left;
   font-weight: 500;
   width: 100%;
 `
diff --git a/apps/cowswap-frontend/src/common/pure/TradeDetailsAccordion/styled.ts b/apps/cowswap-frontend/src/common/pure/TradeDetailsAccordion/styled.ts
index 13f1713dc6..11fa8f843d 100644
--- a/apps/cowswap-frontend/src/common/pure/TradeDetailsAccordion/styled.ts
+++ b/apps/cowswap-frontend/src/common/pure/TradeDetailsAccordion/styled.ts
@@ -25,18 +25,17 @@ export const Details = styled.div`
 
 export const Summary = styled.div`
   display: grid;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: 1fr auto;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  gap: 8px;
+  gap: 10px;
   font-size: inherit;
   font-weight: inherit;
 
   span {
     font-size: inherit;
     font-weight: inherit;
-    white-space: nowrap;
   }
 `
 
diff --git a/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWidget/styled.tsx b/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWidget/styled.tsx
index 541854ffff..c23762aa09 100644
--- a/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWidget/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/limitOrders/containers/LimitOrdersWidget/styled.tsx
@@ -14,6 +14,7 @@ export const TradeButtonBox = styled.div`
 export const FooterBox = styled.div`
   display: flex;
   flex-flow: column wrap;
+  max-width: 100%;
   margin: 0 4px;
   padding: 0;
 `
@@ -22,6 +23,7 @@ export const RateWrapper = styled.div`
   display: grid;
   grid-template-columns: auto 151px;
   grid-template-rows: max-content;
+  max-width: 100%;
   gap: 6px;
   text-align: right;
   color: inherit;
diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
index e1546d3080..5254e05d5a 100644
--- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/styled.tsx
@@ -14,6 +14,7 @@ export const ContainerBox = styled.div`
   display: flex;
   flex-flow: column wrap;
   gap: 10px;
+  max-width: 100%;
   background: var(${UI.COLOR_PAPER});
   color: var(${UI.COLOR_TEXT_PAPER});
   border: none;
@@ -22,6 +23,11 @@ export const ContainerBox = styled.div`
   padding: 10px;
   position: relative;
 
+  > div,
+  > span {
+    max-width: 100%;
+  }
+
   .modalMode & {
     box-shadow: none;
   }
diff --git a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidgetLinks/styled.ts b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidgetLinks/styled.ts
index fe44cdacf6..8de0c0f7ae 100644
--- a/apps/cowswap-frontend/src/modules/trade/containers/TradeWidgetLinks/styled.ts
+++ b/apps/cowswap-frontend/src/modules/trade/containers/TradeWidgetLinks/styled.ts
@@ -86,8 +86,6 @@ export const MenuItem = styled.div<{ isActive?: boolean; isDropdownVisible: bool
         width: 100%;
         margin: 0 0 10px;
       `}
-
-    }
   }
 `
 

From 6fc35e2dd654364e316ab8a0ee483ad31510be64 Mon Sep 17 00:00:00 2001
From: fairlighteth <31534717+fairlighteth@users.noreply.github.com>
Date: Tue, 19 Nov 2024 14:35:36 +0000
Subject: [PATCH 2/2] feat: break long digits

---
 libs/ui/src/pure/FiatAmount/index.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/libs/ui/src/pure/FiatAmount/index.tsx b/libs/ui/src/pure/FiatAmount/index.tsx
index 7e817cc845..7fd52fa489 100644
--- a/libs/ui/src/pure/FiatAmount/index.tsx
+++ b/libs/ui/src/pure/FiatAmount/index.tsx
@@ -14,6 +14,7 @@ export interface FiatAmountProps {
 
 const Wrapper = styled.span`
   color: inherit;
+  word-break: break-all;
 `
 
 export function FiatAmount({ amount, defaultValue, className, accurate = false }: FiatAmountProps) {