From 7969ad575347e4b947692c9e03c1a8d4990c9a93 Mon Sep 17 00:00:00 2001
From: henry-deriv <118344354+henry-deriv@users.noreply.github.com>
Date: Wed, 17 May 2023 11:50:59 +0800
Subject: [PATCH] henry/92122/fix: spacing issue in russian and french
 languages accumulator (#8062)

* fix: spacing issue in russian and french languages accumulator

* fix: change contract card text overflow issue accumulator

* fix: button overlay overflow for russian

* fix: widget spacing in mobile

* fix: widget spacing in mobile

* fix: spacing issue in mobile contract card

---------

Co-authored-by: hirad-deriv <hirad@re-work.dev>
---
 .../contract-card-header.tsx                  | 29 ++++++++++++-------
 .../contract-card/contract-card.scss          | 11 +++++--
 .../src/sass/app/modules/trading-mobile.scss  |  2 +-
 .../trader/src/sass/app/modules/trading.scss  |  2 +-
 4 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/components/contract-card/contract-card-items/contract-card-header.tsx b/packages/components/src/components/contract-card/contract-card-items/contract-card-header.tsx
index e7b941ba149b..6fc8e74f627b 100644
--- a/packages/components/src/components/contract-card/contract-card-items/contract-card-header.tsx
+++ b/packages/components/src/components/contract-card/contract-card-items/contract-card-header.tsx
@@ -77,12 +77,21 @@ const ContractCardHeader = ({
                 className={classNames('dc-contract-card__grid', 'dc-contract-card__grid-underlying-trade', {
                     'dc-contract-card__grid-underlying-trade--mobile': is_mobile && !multiplier && !is_accumulator,
                     'dc-contract-card__grid-underlying-trade--trader': !is_pathname_bot,
-                    'dc-contract-card__grid-underlying-trade--trader--accumulator': is_accumulator,
+                    'dc-contract-card__grid-underlying-trade--trader--accumulator': !is_mobile && is_accumulator,
                     'dc-contract-card__grid-underlying-trade--trader--accumulator-sold': is_accumulator && is_sold,
                 })}
             >
-                <div id='dc-contract_card_underlying_label' className='dc-contract-card__underlying-name'>
-                    <Icon icon={underlying ? `IcUnderlying${underlying}` : 'IcUnknown'} width={40} size={32} />
+                <div
+                    id='dc-contract_card_underlying_label'
+                    className={classNames('dc-contract-card__underlying-name', {
+                        'dc-contract-card__underlying-name--accumulator': is_accumulator,
+                    })}
+                >
+                    <Icon
+                        icon={underlying ? `IcUnderlying${underlying}` : 'IcUnknown'}
+                        width={is_accumulator ? 46 : 40}
+                        size={32}
+                    />
                     <Text size='xxs' className='dc-contract-card__symbol' weight='bold'>
                         {display_name || contract_info.display_name}
                     </Text>
@@ -127,14 +136,14 @@ const ContractCardHeader = ({
                         </CSSTransition>
                     ) : null}
                 </MobileWrapper>
-                {!is_sold && is_accumulator && (
-                    <TickCounterBar
-                        current_tick={tick_passed}
-                        max_ticks_duration={tick_count}
-                        label={getCardLabels().TICKS}
-                    />
-                )}
             </div>
+            {!is_sold && is_accumulator && (
+                <TickCounterBar
+                    current_tick={tick_passed}
+                    max_ticks_duration={tick_count}
+                    label={getCardLabels().TICKS}
+                />
+            )}
             <MobileWrapper>
                 <div className='dc-progress-slider--completed' />
             </MobileWrapper>
diff --git a/packages/components/src/components/contract-card/contract-card.scss b/packages/components/src/components/contract-card/contract-card.scss
index fcb1f29337b2..a12f52759dd4 100644
--- a/packages/components/src/components/contract-card/contract-card.scss
+++ b/packages/components/src/components/contract-card/contract-card.scss
@@ -43,8 +43,11 @@
 
             &--trader {
                 grid-template-columns: 1.2fr 1fr;
-                &--accumulator-sold {
-                    padding-top: 1rem;
+                &--accumulator {
+                    display: flex;
+                    &-sold {
+                        padding-top: 1rem;
+                    }
                 }
             }
             &--mobile {
@@ -204,6 +207,10 @@
         font-size: 1.2em;
         max-width: 18rem;
         min-width: 10rem;
+
+        &--accumulator {
+            max-width: 10rem;
+        }
     }
     &__type {
         font-size: 1.2em;
diff --git a/packages/trader/src/sass/app/modules/trading-mobile.scss b/packages/trader/src/sass/app/modules/trading-mobile.scss
index 2b8beb6ae94a..58f0c7350921 100644
--- a/packages/trader/src/sass/app/modules/trading-mobile.scss
+++ b/packages/trader/src/sass/app/modules/trading-mobile.scss
@@ -58,7 +58,7 @@
                 padding-right: 0.8rem;
             }
             &:is(.amount__widget) {
-                grid-template-columns: 5fr 1fr;
+                grid-template-columns: 5fr 1.3fr;
             }
             .trade-container {
                 &__amount {
diff --git a/packages/trader/src/sass/app/modules/trading.scss b/packages/trader/src/sass/app/modules/trading.scss
index de2799827a8e..e4b7c4a2c36a 100644
--- a/packages/trader/src/sass/app/modules/trading.scss
+++ b/packages/trader/src/sass/app/modules/trading.scss
@@ -713,7 +713,7 @@
         cursor: not-allowed;
 
         &__caption {
-            width: 17.2rem;
+            width: 18rem;
             height: 4rem;
             color: var(--text-less-prominent);
             text-align: center;